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

Was this helpful?

Edit on Git
  1. Getting Started
  2. Examples

Google reCaptcha v3

HTML (Styled using TailwindCSS)

<div class="flex items-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="container mx-auto">
    <div class="max-w-md mx-auto my-10 bg-white p-5 rounded-md shadow-sm">
      <div class="text-center">
        <h1 class="my-3 text-3xl font-semibold text-gray-700 dark:text-gray-200">
          Contact Us
        </h1>
        <p class="text-gray-400 dark:text-gray-400">
          Fill up the form below to send us a message.
        </p>
      </div>
      <div class="m-7">
        <form action="https://api.web3forms.com/submit" method="POST" id="form">
          <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE" />
          <input type="hidden" name="subject" value="New Submission from Web3Forms" />
          <input type="checkbox" name="botcheck" id="" style="display: none;" />
          <!-- Google reCaptcha v3: To Prevent SPAM Submission.PRO Plan only -->
          <input type="hidden" name="recaptcha_response" id="recaptchaResponse">

          <div class="mb-6">
            <label for="name" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Full Name</label>
            <input type="text" name="name" id="name" placeholder="John Doe" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
          </div>
          <div class="mb-6">
            <label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Email Address</label>
            <input type="email" name="email" id="email" placeholder="you@company.com" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
          </div>
          <div class="mb-6">
            <label for="phone" class="text-sm text-gray-600 dark:text-gray-400">Phone Number</label>
            <input type="text" name="phone" id="phone" placeholder="+1 (555) 1234-567" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
          </div>
          <div class="mb-6">
            <label for="message" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Your Message</label>

            <textarea rows="5" name="message" id="message" placeholder="Your Message" class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" required></textarea>
          </div>
          <div class="mb-6">
            <button type="submit" class="w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none">
              Send Message
            </button>
          </div>
          <p class="text-base text-center text-gray-400" id="result"></p>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Needed for Recaptcha -->

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_PUBLIC_KEY_HERE"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('YOUR_PUBLIC_KEY_HERE', {
      action: 'contact'
    }).then(function(token) {
      recaptchaResponse.value = token;
    });
  });
</script>

Javascript

const form = document.getElementById("form");
const result = document.getElementById("result");

form.addEventListener("submit", function (e) {
  e.preventDefault();
  
  const formData = new FormData(form);
  const object = Object.fromEntries(formData);
  const json = JSON.stringify(object);
  result.innerHTML = "Please wait...";

  fetch("https://api.web3forms.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json"
    },
    body: json
  })
    .then(async (response) => {
      let json = await response.json();
      if (response.status == 200) {
        result.innerHTML = json.message;
        result.classList.remove("text-gray-500");
        result.classList.add("text-green-500");
      } else {
        console.log(response);
        result.innerHTML = json.message;
        result.classList.remove("text-gray-500");
        result.classList.add("text-red-500");
      }
    })
    .catch((error) => {
      console.log(error);
      result.innerHTML = "Something went wrong!";
    })
    .then(function () {
      form.reset();
      setTimeout(() => {
        result.style.display = "none";
      }, 5000);
    });
});
PreviousRaw Contact FormNextFile Upload Form

Last updated 2 years ago

Was this helpful?