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:

Remove the Webflow native reCaptcha from your forms.

First, remove the Webflow native reCaptcha from your forms.

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

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

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.

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