reCaptcha Integration

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: https://codepen.io/surjithctly/pen/BaZQLyR

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 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

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.