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. Pro Features

reCaptcha Integration

PreviousPro FeaturesNextCloudflare Turnstile Captcha

Last updated 1 year ago

Was this helpful?

Web3forms supports Google's reCaptcha for forms. We recommend to use the v3 version since its easy for humans and hard for bots.

Codepen Demo:

Heads Up! This is a PRO feature. You must have an active membership to use this feature.

To setup, first you should register your domain on Google reCaptcha and generate API keys from their website. Go to to create new keys. Choose reCaptcha v3 from the option. Add your domain name and submit to create your keys. You will need both Site Key and Secret Key. Copy those code and save it in your notepad. We will need this later.

Now login to Web3Forms Dashboard (Beta Access) and add your reCaptcha Secret Key in the form settings.

Now open your HTML file where your form exists and paste the following code just before the closing of </body> tag.

<!-- Recaptcha v3 -->

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

Now replace YOUR_SITE_KEY_HERE with your actual Site key you've obtained from the reCaptcha Website. You need to replace it in two places above. LINE 3 & LINE 6

Heads Up! You'll need to change the SITE KEY in two places in the above code.

Now add the following code inside your <form> tag.

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

That's it. Now test your form and it should work without any extra configuration.

How to know the reCaptcha is working as expected?

To test, right click the page and choose Inspect Element. Now inspect the <form> part where the above recaptcha_response will be populated with a large key value. If you don't see that, check console.log() for more info.

https://codepen.io/surjithctly/pen/BaZQLyR
reCaptcha Website
Registering reCaptcha