- reCAPTCHA — what it means
- reCAPTCHA is a free Google service that blocks unauthorized access to contact forms, typically through the “I’m not a robot” checkbox.
Note: the steps and screens in this article are as of October 2021. (2026 update: names and placement may differ in the current Webflow and Google reCAPTCHA interfaces.)
The short version — reCAPTCHA setup in a nutshell
- Drop a reCAPTCHA element into your Webflow form, get a site key from Google reCAPTCHA (free), and register it under “Forms” in Project Settings (3 steps, about 15 minutes)
- Choose reCAPTCHA type “v2” (Webflow forms only accept a v2 key)
- The widget’s size can’t be changed directly, so wrap it in a parent Div block and set Scale to 0.7 on both axes to shrink it
Day 10 covers installing Google’s reCAPTCHA to tighten up security. First, a quick introduction to reCAPTCHA itself.
What is reCAPTCHA?
“☐ I’m not a robot.”
You’ve seen that line at least once, haven’t you? Sometimes it asks you to pick out photos, sometimes to answer a question — that mildly annoying “thing” is called reCAPTCHA.
Why install reCAPTCHA
You need it to block unauthorized access. Adding it to your contact form protects your website from bots that fire off junk messages.
Does it cost anything?
It’s a Google service and it’s free to install.
Is it easy to install?
This article walks through the whole thing from scratch, so yes.
Budget about 15 minutes.
Let’s get started.
Installing reCAPTCHA in Webflow
Here’s the sequence.
- [Step 1] Place it on the contact form
- [Step 2] Register with Google
- [Step 3] Connect Webflow and Google
Three steps, that’s all. Let’s knock it out.
[Step 1] Place it on the contact form
Webflow ships with a ready-made “reCAPTCHA” element. Start by dropping it into your contact form.
- Select the contact form
- Place it above the submit button
Done. That was quick.
[Step 2] Register with Google
(2026 update: Google’s reCAPTCHA registration screen may look different in the current interface.)
To actually use it you have to connect it to Google, so open “Project Settings” and head to the settings screen.
Under “Forms”, scroll down to reCAPTCHA. Click the area circled in red in the screenshot to open Google’s reCAPTCHA registration page.
✓Register on the Google page
Fill in each field to finish the initial setup.
Here’s each field, top to bottom.
- ① Label Give it a name so you can tell at a glance which site this reCAPTCHA belongs to later.
- ② reCAPTCHA type You can pick v3 or v2 — choose “v2” here. The reason: Webflow forms only take a v2 key. v3 could probably be wired up too, but start with v2.
- ③ Domains Enter the domain of the site where you want reCAPTCHA.
Submit the form and it’s created.
[Step 3] Connect Webflow and Google
Once registration goes through, the screen changes and your site key appears. Register that site key in Webflow’s settings screen and reCAPTCHA setup is finished.
Before saving, switch “Enable reCAPTCHA” to “Yes”.
When you hit save…
You get a warning along the lines of “Do all your contact forms have reCAPTCHA? You’ll want that.” Since we added reCAPTCHA to the contact form symbol first, we’re fine.
Resizing reCAPTCHA in Webflow
With reCAPTCHA installed, let’s build out the responsive design for the contact page.
Check the portrait breakpoint
At the portrait size, reCAPTCHA overflows the container, so it needs adjusting. The catch is that reCAPTCHA can’t be resized directly.
The workaround is to create a new Div block, make it the parent, and put reCAPTCHA inside it.
- Create a Div block · class name “reCAPTCHA wrap”
- Put reCAPTCHA inside it
- Select reCAPTCHA wrap · click the “…” next to 2D & 3D transforms · image ① below appears · following image ①, set the content origin to “top left” · click “+” · set Scale to 0.7 vertically and horizontally
reCAPTCHA now renders smaller. It still pokes out slightly at the very smallest breakpoint, but I decided nobody browses this site on a Nintendo device and left it as is.
And even if someone did, it would still just about work.
Wrapping up
Day 10 taught us how to install reCAPTCHA. This time we probably spent more minutes inside Webflow’s settings than in the Designer.
It’s a little disappointing that Webflow’s built-in reCAPTCHA only shows English. In practice it’s a non-issue: once the site is live, the widget switches language based on the visitor’s own settings.
Next time we’ll cover how to handle SEO in Webflow. You can even set the image that shows when someone shares your page on X or Instagram.
See you next time — nice work today.
FAQ
Does adding reCAPTCHA to Webflow cost anything?
No. reCAPTCHA is a Google service and free to install. We recommend adding it to your contact form as a defense against unauthorized access.
Should I choose v2 or v3 for Webflow’s reCAPTCHA?
Choose v2, because Webflow forms only accept a v2 key. v3 could probably be wired up as well, but start with v2.
What are the steps to install reCAPTCHA in Webflow?
Three steps. ① Place Webflow’s reCAPTCHA element above the submit button on your contact form, ② set the label, type and domain on Google’s reCAPTCHA registration page, ③ register the resulting site key in Webflow’s settings screen to connect the two. Budget about 15 minutes.
Can I change the size of reCAPTCHA?
Not directly. Create a new Div block, make it the parent, put reCAPTCHA inside it, and set Scale to 0.7 vertically and horizontally to render it smaller.
Does Webflow’s reCAPTCHA stay in English?
Inside Webflow it only shows English, but once the site is live the widget switches language based on the visitor’s own settings, so it isn’t a problem.
