How to Add Google Recaptcha to Webflow in 2025

Introduction

Adding Google reCAPTCHA to your Webflow forms is one of the easiest and most important steps you can take to secure your website against spam and automated abuse. Whether you’re building a simple contact form or a complex multi-step form, reCAPTCHA adds a critical layer of protection that filters out bots and ensures only real users are submitting your forms.

In this step-by-step guide, we’ll walk you through how to integrate Google reCAPTCHA v2 into your Webflow site, make it responsive for mobile devices, and even share a bonus tip for improving its appearance on smaller screens.

Why Use Google reCAPTCHA in Webflow?

Google reCAPTCHA is a free service that helps you determine whether an interaction is human or automated. It blocks malicious bots and spam attacks while providing a simple user experience, like checking a box that says “I’m not a robot.”

In Webflow, reCAPTCHA v2 is natively supported, allowing seamless integration without needing third-party tools or complicated workarounds.

Prerequisites

Before we start, make sure you:

• Have a working Webflow project with a form already added.
  
• Have a Google account to register your reCAPTCHA site key.
  
• Know your project’s live or staging domain.
  

Step 1: Add reCAPTCHA Element to Your Webflow Form

To begin, open your Webflow Designer and follow these steps:

1. Select the Form Block: Choose the form where you want to add reCAPTCHA.
   
2. Open the Elements Panel: Click the plus (+) icon on the left.
   
3. Scroll to the Form Section: At the bottom, you’ll find the reCAPTCHA component.
   
4. Drag and Drop: Drag the reCAPTCHA element into your form. You can place it anywhere inside the form block.

✅ Tip: You can style it slightly by giving it a class (e.g., .captcha) and adding margin or padding for spacing. For example, set a margin of 2rem to give it breathing room.

However, just adding it in Designer won’t enable it yet. You need to activate it in your Site Settings.

Step 2: Enable reCAPTCHA in Webflow Project Settings

Here’s how to enable reCAPTCHA inside your Webflow project:

1. Navigate to Project Settings from your dashboard.
   
2. Click on the Forms tab on the left.
   
3. Scroll down until you see the reCAPTCHA Settings section.
   
4. You’ll notice fields for a Site Key and a Secret Key — you’ll need to generate these from Google.
   

Let’s see how to get those keys.

Looking to build beautiful, secure websites—without writing a single line of backend code? Webflow lets you design, build, and launch with full creative control. If you haven’t joined yet, now’s the time to dive in:

👉 Join Webflow and try it for free — create responsive, custom websites with ease!

Step 3: Register for a New reCAPTCHA Key on Google

To generate your keys:

1. Go to the Google reCAPTCHA Admin Console.
   
2. Log in with your Google account.
   
3. Click “+ Create” or “Register a new site”.
   
4. Fill in the required details:
   
   • Label: Give it a name to help you recognize it later (e.g., Webflow Contact Form).
     
   • reCAPTCHA Type: Choose reCAPTCHA v2 → “I’m not a robot” Checkbox.
     
     • Note: Webflow currently only supports reCAPTCHA v2 Challenge.
       
   • Domains: Enter your site’s domain (e.g., www.yoursite.com or staging version like your-site.webflow.io).
     
   • Accept Terms of Service.
     
5. Click Submit.
   

After submitting, you’ll receive two keys:

• Site Key
  
• Secret Key
  

Want to embed high-quality videos into your Webflow site without slowing it down? Check out The Ultimate Guide to Webflow Video Hosting Using Vidzflow — a complete walkthrough on how to seamlessly host and manage videos using Vidzflow, tailor-made for Webflow users. Whether you’re showcasing tutorials, testimonials, or product demos, this guide has you covered.

Step 4: Add the Keys to Webflow

Once you’ve copied your Site Key and Secret Key, return to Webflow:

1. Go back to Project Settings → Forms.
   
2. Paste the Site Key in the relevant field.
   
3. Paste the Secret Key in the second field.
   
4. Enable the reCAPTCHA toggle.
   
5. Hit Save Changes at the top.
   
6. Publish your site.
   

Now your Webflow form is protected with Google reCAPTCHA!

Step 5: Test Your Form

After publishing your site:

1. Visit your site in a new tab.
   
2. Locate your form and try to submit it.
   
3. You should now see a reCAPTCHA checkbox: “I’m not a robot.”
   
4. Try submitting without checking the box — the form won’t go through. Only after verifying will the form submit.
   

That’s how you know it’s working perfectly!

Bonus Tip: Make reCAPTCHA Mobile-Friendly with “Compact” Mode

By default, Google’s reCAPTCHA component uses an auto-sized layout, which often overflows or gets cut off on small mobile screens, especially on devices like the iPhone SE or older Android models.

Here’s how to fix that:

1. Click on the reCAPTCHA element in Designer.
   
2. In the Settings panel, scroll to Custom Attributes.
   
3. Add the following attribute:
   
   • Name: data-size
     
   • Value: compact
     
4. Publish your site again.
   

Now when users access your site from small devices, the reCAPTCHA box will appear in a more compact, space-saving layout, improving usability and avoiding display issues.

Pro Tip: Use Custom Code to Auto-Switch Between Normal and Compact Modes

If you want to go one step further and automatically switch between normal and compact mode based on screen size, you can inject a small snippet of JavaScript:

Steps:

1. Add an Embed Component below the form.
   
2. Paste this code inside the embed block:
   

This code dynamically changes the reCAPTCHA layout depending on the screen width. Ideal for responsive design.

Troubleshooting Tips

Here are a few things to double-check if reCAPTCHA isn’t working:

• Make sure both the Site Key and Secret Key are correctly entered.
  
•  Ensure your domain name matches exactly what you registered on Google (no typos or extra characters).
  
• Always publish your site before testing; changes don’t reflect in preview mode.
  
•  If you updated reCAPTCHA settings, clear cache, or test in an incognito window.
  

We’re Here to Help

Struggling with implementing reCAPTCHA or optimizing your Webflow forms for performance and security?

At Axiabits, we specialize in building secure, interactive Webflow websites optimized for performance, accessibility, and spam protection.

From integrating advanced form features like reCAPTCHA to building dynamic CMS filters and search, our team has your back.

Book now and let’s get started!

Final Thoughts

Adding Google reCAPTCHA to your Webflow site in 2025 is a straightforward yet essential step to keeping your forms safe from spam and bot attacks. With just a few simple adjustments, you can ensure your form looks great and functions securely across all devices.

✅ Add the component
✅ Register and paste your site keys
✅ Test and make it mobile-friendly
✅ Add custom behavior for responsive views (optional but recommended)

Whether you’re building a portfolio site, an eCommerce store, or a lead generation landing page, don’t leave your forms unprotected.

Disclaimer 

This article features affiliate links, which indicates that if you click on any of the links and make a purchase, we may receive a small commission There’s no extra cost to you and it aids in supporting our blog, enabling us to keep delivering valuable content. We solely endorse products or services that we think will benefit our audience.

Frequently Asked Questions