How can I install reCAPTCHA v3 or reCAPTCHA v2 (invisible) on Webflow?

Published on
September 22, 2023

To install reCAPTCHA v3 or reCAPTCHA v2 (invisible) on Webflow, you can follow these steps:

  1. Sign up and create a reCAPTCHA API key:
  • Go to the reCAPTCHA website (https://www.google.com/recaptcha) and sign into your Google account.
  • Click on the "Admin Console" button in the top-right corner.
  • You will be redirected to the reCAPTCHA Admin Console.
  • Click on the "+ Add Key" button to create a new API key.
  • Fill in the required information, including the domains you want to protect with reCAPTCHA.
  • Choose either reCAPTCHA v3 or reCAPTCHA v2 (invisible) as your preferred version.
  • Agree to the Terms of Service and click on the "Submit" button.
  • On the next page, you will see your Site Key and Secret Key. Make sure to copy them as you will need them later.
  1. Add the reCAPTCHA script to your Webflow site:
  • Open your Webflow project and go to the "Project Settings".
  • Click on the "Custom code" tab.
  • In the "Head Code" section, paste the following script:
    ```html ```
  1. Add the reCAPTCHA element to your form:
  • Open the page with the form you want to protect with reCAPTCHA.
  • Drag and drop an HTML Embed element onto the page where you want the reCAPTCHA to appear.
  • Double-click on the HTML Embed element to open the code editor.
  • Inside the code editor, paste the following code:
    ```html
    \`\`\` Replace "YOUR_SITE_KEY" with your reCAPTCHA Site Key that you obtained in step 1.
  1. Submit the form with reCAPTCHA validation:
  • Select your form element and go to its Settings.
  • In the Form Settings panel, enable the option to "Use reCAPTCHA".
  • Input your reCAPTCHA Secret Key that you obtained in step 1.
  • Save your changes.

That's it! You have successfully installed reCAPTCHA v3 or reCAPTCHA v2 (invisible) on your Webflow site.

Additional Note: If you are using reCAPTCHA v3, it will automatically detect and score the risk level of a user without any user interaction. If you are using reCAPTCHA v2 (invisible), it will display a reCAPTCHA challenge only if it determines that the user might be a bot.

Now that you have installed reCAPTCHA on your Webflow site, you can prevent spam and protect your forms from abusive activities.

Additional Questions:

  1. How do I create a reCAPTCHA API key for my Webflow site?
  2. Can I use reCAPTCHA on multiple forms in Webflow?
  3. What are the benefits of using reCAPTCHA on my Webflow site?