How to Add CAPTCHA Protection in Webflow Forms

To add CAPTCHA protection to your Webflow forms, follow these steps to ensure a secure and spam-free experience for your users.

Step 1: Set Up a Google reCAPTCHA Account
1. Visit the Google reCAPTCHA website and click on the "Admin Console" button.
2. Sign in to your Google account.
3. On the registration page, provide a label for your CAPTCHA, such as "My Webflow Site."
4. Choose between reCAPTCHA v2 (checkbox required) or reCAPTCHA v3 (runs in the background).
5. Enter your domain name, for example, yoursite.webflow.io, in the Domains section.
6. Accept the Terms of Service and click "Submit."
7. You'll receive a site key and a secret key—save them for later use.

Step 2: Add reCAPTCHA to Your Webflow Form
1. Log in to your Webflow account and go to your project.
2. Navigate to the page with the form you want to protect and enter Designer mode.
3. Select the form element and go to the Add panel (the plus icon).
4. Choose the "Embed" component and drag it into your form.
5. Click the Embed element to edit the code.

Step 3: Integrate Your reCAPTCHA Site Key
1. In the Embed code editor, paste the code:

```
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
```

Replace YOUR_SITE_KEY with your site key from Google reCAPTCHA.

2. Save your changes by clicking "Save & Close."

Step 4: Add reCAPTCHA Script
1. Click on the Page Settings icon (gear icon) of your page.
2. In the Before </body> tag section, insert the code:

```
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
```

3. Save the changes.

Step 5: Handle CAPTCHA Validation on Form Submission
1. Capture the response token generated by reCAPTCHA when the form is submitted.
2. Send this token to your server with the form data for validation.
3. On the server, make a POST request to the URL:

```
https://www.google.com/recaptcha/api/siteverify
```

Include the secret key, user response token, and your server’s IP address. Refer to Google reCAPTCHA documentation for detailed examples in different programming languages.

Step 6: Test Your Implementation
1. Preview and test the form on your Webflow site to ensure CAPTCHA appears correctly.
2. Submit the form to see if reCAPTCHA validation works without issues.

With these steps, you've successfully integrated CAPTCHA protection into your Webflow forms, enhancing security and reducing spam. Regular monitoring is recommended to maintain effectiveness and make necessary adjustments.