Web3Forms
  • Introduction
  • Getting Started
    • Installation
    • Customizations
      • Email Subject line
      • Success / Thank You Page
      • Custom Redirection
      • Captcha & SPAM
        • hCaptcha
        • reCaptcha & Turnstile
        • Honeypot
        • Report Spam
      • Custom Reply-To
      • From Name
    • Pro Features
      • reCaptcha Integration
      • Cloudflare Turnstile Captcha
      • Add CC Email
      • Autoresponder (Auto-Reply)
      • File Attachments
      • Advanced File Uploader
      • Webhooks
      • Restrict to Domain
      • Intro Text
    • Examples
      • Basic HTML Contact Form
      • Advanced - All Options
      • Ajax Contact Form using Javascript
      • Multi Column Contact Form
      • Javascript Form Validation
      • Contact Form with Dark Mode
      • Raw Contact Form
      • Google reCaptcha v3
      • File Upload Form
      • With Multiple Checkbox
    • Integrations
      • Zapier
      • Integromat
      • Examples
        • Google Sheets
        • Airtable
        • Telegram Notifications
    • Options Reference
    • API Reference
    • Troubleshooting
    • FAQ
  • How-to Guides
    • HTML & JavaScript
    • JS Frameworks
      • React JS
        • Web3Forms React Plugin
        • React Hook Form
        • Simple React Contact Form
        • React File Upload Form
        • React Google ReCaptcha v3
        • React Hook Form File Upload
      • Vue JS
      • Svelte
      • Angular JS
      • Alpine.js
    • Site Builders
      • Webflow
      • Framer
      • Carrd.co
      • Squarespace
      • Wix
      • Dorik
    • Static Site Generators
      • Next.js
      • Astro
      • Nuxt.js
      • Hugo
      • Jekyll
      • Gatsby
      • Gridsome
      • Eleventy
    • Hosting Providers
      • Vercel
      • Netlify
      • Digital Ocean
      • AWS
      • Github
      • Cloudflare
    • JAM Stack
    • Landing Page Builders
      • Unbounce
      • Instapage
      • Pagewiz
      • Groovefunnels
    • WordPress
      • Elementor
      • Oxygen Builder
Powered by GitBook
On this page
  • Step 01: Get Access Key
  • Step 2: Create HTML Form
  • Step 3: Add your Access Key
  • Step 4: Done

Was this helpful?

Edit on Git
  1. Getting Started

Installation

PreviousIntroductionNextCustomizations

Last updated 1 year ago

Was this helpful?

Step 01: Get Access Key

First step is to get an Access Key from Web3Forms.

Once you submit the form, you will get the Access key in your Email. Copy that key so that we can use this later.

Step 2: Create HTML Form

Create a form in your website with our form endpoint inside action attribute. Following is a simple example on how it should look like:

<form action="https://api.web3forms.com/submit" method="POST">

    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    <input type="hidden" name="redirect" value="https://web3forms.com/success">
    <button type="submit">Submit Form</button>

</form>
<form action="https://api.web3forms.com/submit" method="POST">

    <!-- REQUIRED: Your Access key here. Don't worry this can be public -->
    <!-- Create your Access key here: https://web3forms.com/ -->
    <!-- <input type="hidden" name="apikey" value="YOUR_ACCESS_KEY_HERE"> -->
    <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

    <!-- Optional: Can be type="hidden" or type="text" for subject -->
    <input type="hidden" name="subject" value="New Submission from Web3Forms">
  
    <!-- Optional: From Name you want to see in the email
          Default is "Notifications". you can overwrite here -->
    <input type="hidden" name="from_name" value="Your Website Name">
  
    <!-- Optional: To send the form submission as CC email -->
    <input type="hidden" name="ccemail" value="partner@example.com">

    <!-- Optional: default replyto will be "email" (if available), 
         you may overwrite here -->
    <input type="hidden" name="replyto" value="customer@example.com">

    <!-- Required: if submitting without Javascript 
         (because by default web3form outputs json) -->

    <!-- If javascript, use "window.location.hash" for redirects -->
    <input type="hidden" name="redirect" value="https://web3forms.com/success">

    <!-- Optional: But Recommended: To Prevent SPAM Submission. 
         Make sure its hidden by default -->
    <input type="checkbox" name="botcheck" id="" style="display: none;">
    
    <!-- Webhooks: Send your form data to Notion, Google Sheets or Zapier.
         This feature available to PRO & Starter Plan users only -->
    <input type="hidden" name="webhook" value="WEBHOOK_URL_HERE" />

    <!-- Google reCaptcha v3: To Prevent SPAM Submission.PRO Plan only -->
    <input type="hidden" name="recaptcha_response" id="recaptchaResponse">
    
    <!-- Attachments: Make sure the <form> has enctype="multipart/form-data"
         This feature available to PRO Plan users only -->
    <input type="file" name="attachment" />

    <!-- Custom Form Data: 
     Then you can include your own form data you wish to receive in email. -->
    <input type="email" name="email" required>
    <input type="text" name="First Name" required>
    <input type="text" name="Phone Number" required>
    <textarea name="message" cols="30" rows="10" required></textarea>

    <button type="submit">Submit Form</button>

</form>

Make sure you added `name` attribute, form action URL and the `access_key` to make the form work as expected

Step 3: Add your Access Key

Add your access key to start receiving email submissions.

<input type="hidden" name="apikey" value="YOUR_ACCESS_KEY_HERE">

Step 4: Done

That's it. Run your code on a browser and it should work. This is a simple starting example. However you can customize it with unlimited possibilities. Checkout other pages to know more.

Create Access Key