reCAPTCHA

How to integrate reCAPTCHA with Webflow

reCAPTCHA offers multiple integration paths for Webflow sites, from simple native implementation to advanced custom configurations.

While Webflow provides built-in support for reCAPTCHA v2 with drag-and-drop checkbox widgets, you can extend functionality through apps like Basin Forms for invisible v3 scoring, Code Embeds for custom styling and triggers, or custom JavaScript for invisible v2 implementation and advanced v3 risk analysis.

Note: When reCAPTCHA is enabled site-wide, you must add the element to every form on your site, or submissions will fail.

Use native reCAPTCHA features

Webflow includes built-in reCAPTCHA v2 support. To enable it, generate API keys through Google reCAPTCHA Admin Console, then navigate to your Webflow Site Settings > Forms and enter your site and secret keys. Once enabled, you can drag the reCAPTCHA element into any form on your site.

Key capabilities of native integration:

• Checkbox verification displays the familiar "I'm not a robot" challenge
• Automatic spam filtering blocks bot submissions before they reach your inbox
• Site-wide protection when enabled globally in site settings

Use third-party apps

For teams needing more advanced spam protection or alternative CAPTCHA providers, the Basin Forms app can enhance Webflow's capabilities:

It provides enterprise-grade form handling with multiple CAPTCHA options:

• Multi-CAPTCHA support including reCAPTCHA v3, hCaptcha, and Cloudflare Turnstile
• Lead scoring to prioritize high-value submissions
• Auto-configuration that automatically sets form action URLs and redirect pages without manual setup

Basin's advantages include support for reCAPTCHA v3's invisible scoring system and compatibility with forms that have custom actions.

Use Code Embeds

For implementations beyond Webflow’s reCAPTCHA element, use Webflow's Embed element to add custom HTML, CSS, and JavaScript directly to your page.

This method enables invisible reCAPTCHA v2 (no checkbox required), reCAPTCHA v3 risk scoring, custom styling, and programmatic control over when verification occurs.

This method requires a backend verification endpoint to validate tokens server-side.

Invisible reCAPTCHA v2

Invisible reCAPTCHA v2 removes the checkbox interaction by analyzing user behavior in the background.

Users only see a small badge, and verification happens automatically when they click your submit button. If Google detects suspicious activity, it may still show a visual challenge as a fallback.

Here’s how to add invisible reCAPTCHA v2 to your site:

1. Include Google’s API in your site’s head (in Site Settings > Custom Code > Head Code)

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

2. Add an Embed element inside your form where you want the reCAPTCHA widget using an Embed element

<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-size="invisible" data-callback="onSubmit"></div><button type="button" id="submit-btn">Submit</button>

3. Add a script to your site’s settings that triggers execution on form submission

<script>  document.getElementById('submit-btn').addEventListener('click', function() {    grecaptcha.execute();  });  function onSubmit(token) {    document.querySelector('form').submit();  }</script>

4. Server-side verification: Send the g-recaptcha-response token to https://www.google.com/recaptcha/api/siteverify with your secret key.

reCAPTCHA v3

reCAPTCHA v3 runs completely invisibly in the background, analyzing user behavior patterns (mouse movements, typing speed, browsing history) to assign each interaction a risk score from 0.0 (likely bot) to 1.0 (likely human).

Unlike v2, users never see challenges unless you implement fallback logic for suspicious scores. You control what actions to take based on the risk score, like block submissions, require additional verification, or allow through.

1. Load reCAPTCHA Library: In Webflow Designer, click Site Settings > Custom Code. Paste the following code in the Head Code section:

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

2. Token Retrieval: On the same page, paste the following script in the Footer Code section (loads after your forms):

<script>
  document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    grecaptcha.ready(function() {
      grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then(function(token) {
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'g-recaptcha-response';
        input.value = token;
        e.target.appendChild(input);
        e.target.submit();
      });
    });
  });
</script>

3. Backend validation (requires server-side development): Verify g-recaptcha-response with Google’s siteverify endpoint to get the risk score, then implement your business logic based on the score threshold.

Build with Webflow and reCAPTCHA APIs

Direct API integration unlocks advanced security features beyond standard form protection, including behavioral analysis, risk scoring, and enterprise-grade bot detection. This approach requires server-side implementation but offers maximum control over the verification process.

The reCAPTCHA Enterprise API provides granular risk assessment that standard implementations can't match. By processing tokens server-side, you gain access to detailed risk scores (0.0-1.0) and reason codes that help fine-tune your security policies.

Key capabilities include:

• Risk-based authentication that adjusts security challenges based on user behavior
• Custom action tracking for different form types (login, purchase, signup)
• Advanced analytics to identify attack patterns and optimize protection

Before you start building, here are some requirements:

• reCAPTCHA Enterprise account (pricing varies by volume)
• Backend server (AWS Lambda, Netlify Functions, etc.)
• A developer who has experience in server-side programming
• API authentication setup

Implement server-side validation

Server-side validation means verifying reCAPTCHA tokens on your backend server rather than trusting client-side responses.

This prevents malicious users from bypassing security by disabling JavaScript or submitting fake tokens directly to your forms. The validation occurs after form submission but before processing the data.

To set this up, add an embed element to your form containing the reCAPTCHA v3 implementation (see reCAPTCHA v3 section above). Configure your form's custom action URL to point to your verification endpoint instead of Webflow's default form handler.

Build a complete verification system using reCAPTCHA's assessment API:

1. Generate tokens client-side: Use grecaptcha.enterprise.execute() to create tokens for each user action
2. Create assessments: Send tokens to the projects.assessments.create endpoint for risk analysis
3. Process risk scores: Implement business logic based on scores — allow high scores (>0.7), challenge medium scores (0.3-0.7), or block low scores (<0.3)

The assessment endpoint provides detailed risk signals including automation detection, credential stuffing indicators, and account takeover patterns.

Configure webhook automation

Configure webhook automation using three components:

1. Webflow form submission capture
2. Token extraction middleware
3. reCAPTCHA validation service

Form submissions trigger webhooks to your server, which extracts reCAPTCHA tokens from the payload and validates them before routing clean submissions to your destination systems.

Here’s how to set up Webflow webhooks and reCAPTCHA:

1. Set up form webhooks: submissions to your verification endpoint using the Webflow Data API: POST /sites/{site_id}/webhooks
2. Extract reCAPTCHA tokens: Parse the g-recaptcha-response field from webhook payloads in your server-side handler function
3. Validate and route: Use the siteverify endpoint to check tokens, then route valid submissions to your CRM or email system

This pattern enables advanced workflows like selective verification based on form type or user history.

Build multi-layer security

Multi-layer security creates overlapping defense mechanisms that work together to stop sophisticated attacks that might bypass a single protection method.

While reCAPTCHA provides excellent bot detection, combining it with complementary security measures creates a more robust defense against evolving threats like distributed attacks, account takeovers, and advanced persistent bots.

Here’s how to combine reCAPTCHA with additional security measures:

1. Implement rate limiting: Track submission frequency per IP using assessment metadata
2. Add behavioral analysis: Use the account defender API to detect compromised accounts
3. Enable MFA triggers: Require additional verification for suspicious scores using reCAPTCHA's multi-factor authentication features

What you can build

Integrating reCAPTCHA with Webflow enables sophisticated security implementations beyond basic spam prevention.

• Secure contact forms: Protect business inquiries from spam while maintaining accessibility—companies report a 95% reduction in fake submissions while preserving legitimate leads
• Lead generation forms: Ensure marketing budgets target real prospects by filtering bot traffic, improving lead quality by 40%, and reducing CRM cleanup time
• Authenticated signup flows: Integrate invisible reCAPTCHA v2 or v3 on registration forms, then use risk scores to adjust onboarding steps, for example, require email verification only for low-score submissions.‍
• Protected comment sections or user forums: Embed invisible reCAPTCHA to filter bot posts in real time, maintaining seamless user experience for genuine users while blocking spam automatically.