How can I implement reCAPTCHA v3 on my Webflow sites?

To implement reCAPTCHA v3 on your Webflow site, follow these steps:

​

1. Get reCAPTCHA v3 Site Keys

• Go to the reCAPTCHA admin console.
• Register your site by providing a label and selecting reCAPTCHA v3.
• Add your domain(s) and accept the terms of service.
• Obtain the Site Key and Secret Key provided.

​

2. Add Site Key to Webflow

• Go to Project Settings in your Webflow Dashboard.
• Navigate to the Integrations tab.
• In the Google reCAPTCHA section, enter your Site Key.
• Save Changes to apply the configuration.

​

3. Embed reCAPTCHA v3 Script

• Open the Designer for your site.
• Add an Embed Element to a page (typically in the Footer or Head).
• Paste the following script, replacing YOURSITEKEY with your reCAPTCHA site key:

​

  ```html

  <script src="https://www.google.com/recaptcha/api.js?render=YOURSITEKEY"></script>

  ```

​

4. Configure Form Submission

• Select the Form element you want to protect.
• Go to the Form Settings in the right sidebar.
• Scroll to the Custom Code section.
• Add a JavaScript snippet to execute reCAPTCHA on form submission:

​

  ```html

  <script>

    document.querySelector('form').addEventListener('submit', function(event) {

      event.preventDefault();

      grecaptcha.ready(function() {

        grecaptcha.execute('YOURSITEKEY', {action: 'submit'}).then(function(token) {

          // Add reCAPTCHA token to form

          var recaptchaResponse = document.createElement('input');

          recaptchaResponse.setAttribute('type', 'hidden');

          recaptchaResponse.setAttribute('name', 'g-recaptcha-response');

          recaptchaResponse.setAttribute('value', token);

          document.querySelector('form').appendChild(recaptchaResponse);

          document.querySelector('form').submit(); // Submit form after token is added

        });

      });

    });

  </script>

  ```

​

5. Verify Token Server-Side

• Use your Secret Key to verify the token on your server after form submission.
• Send a POST request to https://www.google.com/recaptcha/api/siteverify with these parameters:
• secret (your secret key)
• response (the token from the form)
• remoteip (optional, the user's IP address)

​

Summary

To integrate reCAPTCHA v3 with Webflow, get your site keys from Google, configure them in Webflow settings, add reCAPTCHA scripts to your pages, modify your forms for token handling, and verify tokens server-side. This ensures that your forms are protected against spam and abuse while maintaining a seamless user experience.