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.

Form with name and email fields, submit button, and a highlighted reCAPTCHA box with an error indicator.

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

Web design editor interface showing form fields for name, email, submit button, and a highlighted div block.

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  {
        grecaptcha.render('recaptcha', {
          'sitekey' : 'ADD_SITE_KEY_HERE'
        });
      }; </script>

Copy code

Code editor showing script for managing Finsweet Cookie Consent and rendering reCAPTCHA with a site key placeholder.

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.

Website settings panel showing Custom code section with script for Finsweet Cookie Consent recaptcha setup.

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?" async="" defer="" fs-consent-categories="essential" type="fs-consent"></script>

Copy code

Code editor showing a script tag for Google reCAPTCHA with Finsweet cookie consent management.

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

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

Settings page showing reCAPTCHA validation disabled toggle with fields for site key and secret key.

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.

reCAPTCHA settings page shows invalid v2 site and secret keys with error mark and validation enabled toggle.

Publish your project! Done!

Still need help?

Get Support