How to use consent-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:

Note: Consent Pro is the standalone successor to the Cookie Consent solution previously included in Finsweet Components. You may still encounter mentions of “Cookie Consent” or “Components” in the screenshots of this documentation, but they remain accurate and applicable for following the tutorial.

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