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:
- 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.
- 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 ```
- 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.
- 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:
- How do I create a reCAPTCHA API key for my Webflow site?
- Can I use reCAPTCHA on multiple forms in Webflow?
- What are the benefits of using reCAPTCHA on my Webflow site?