How to use cookie-compliant reCaptcha on your forms

If you are using native Webflow reCaptcha in your forms, please follow the documentation below to make it cookie-compliant, and ensure that reCaptcha loads only after the user has given explicit consent for cookies.

Follow this step-by-step guide to use reCaptcha:

1

Remove the Webflow native reCaptcha from your forms.

First, remove the Webflow native reCaptcha from your forms.

2

Add a Div Block to your form with the id 'recaptcha'.

Go to the 'Elements' panel and add a 'Div Block' to your form. Then, select the div block, go to 'Settings,' and set the ID to 'recaptcha'.

3

Add the script to the <head> section of the site settings.

This script is responsible for initializing and rendering Google reCaptcha on your webpage. Copy and paste the script below into the <head> section of your site's settings.

 <script type="fs-consent" fs-consent-categories="essential">
      var onloadCallback = function() {
        grecaptcha.render('recaptcha', {
          'sitekey' : 'ADD_SITE_KEY_HERE'
        });
      }; </script> 
Copy code
https://cdn.jsdelivr.net/gh/finsweet/cookie-consent-worker@1/worker/script.js
4

Replace the Site Key placeholder in the script with your actual Site Key.

Find the placeholder 'ADD_SITE_KEY_HERE' in the script and replace it with your reCaptcha v2 site key.

If you don't have one yet, go to this page to register for a new key.

5

Add the script to the <footer> section of the site settings.

This script tag is used to load the Google reCaptcha API on your webpage. Copy and paste the script below into the <footer> section of your site's settings.

 <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async="" defer="" fs-consent-categories="essential" type="fs-consent"></script> 
Copy code
6

Make sure to disable reCaptcha in the 'Forms' tab of the site settings.

Go to 'Site Settings' > 'Forms' and disable reCaptcha.

7

Make sure to remove the site keys in the 'Forms' tab of the site settings.

Go to 'Site Settings' > 'Forms' and remove the keys in the reCAPTCHA validation section.

8

Publish your project! Done!

Still need help?
Get Support