reCaptcha Integration

Web3forms supports Google's reCaptcha v3 for forms.

Codepen Demo: https://codepen.io/surjithctly/pen/BaZQLyR

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

Generate reCaptcha Keys

To setup, first you should register your domain on Google reCaptcha and generate API keys from their website. Go to reCaptcha Website 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.

Registering reCaptcha

Client-side Integration

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="></script>
<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('', {
                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">

Add Secret Keys to your Web3Forms Dashboard

1. Visit the Web3Forms Dashboard and select your form at: https://app.webforms.com

2. Open Settings and choose recaptcha as your captcha provider

3. Enter the Secret Key in the Textbox below

4. Save Changes

That's it. Your form will automatically be protected with reCaptcha v3.

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.