Add a reCAPTCHA element

Updated

Learn how to add a reCAPTCHA element to your forms.

reCAPTCHA is a free service from Google that can help protect form submissions from spam and abuse. The service aims to ensure that your site’s forms are only submitted by real users.

How to add a reCAPTCHA element to a form

You can add reCAPTCHA to your forms from the Add panel > Elements tab > Forms section. reCAPTCHA must be placed in a form element.

Important

reCAPTCHA won’t display on your published site until you enable reCAPTCHA validation in Site settings > Forms. This enables reCAPTCHA validation for all forms on your site — and forms without a reCAPTCHA element will fail to submit.

How to enable reCAPTCHA validation for a site

You can set up reCAPTCHA on your site by following these steps:

  1. Register your site and generate API keys
  2. Enable reCAPTCHA validation

Register your site and generate API keys

  1. Go to Google’s reCAPTCHA page
  2. Choose Challenge (v2) under reCAPTCHA type
  3. Choose the “I’m not a robot” Checkbox
  4. Add your site’s domain(s)
  5. Click Submit

Once you’ve registered your site, you’ll receive 2 API keys (a Site Key and a Secret Key). You’ll use these when enabling reCAPTCHA validation in the following step.

Note

Make sure to add any custom domains connected to your site (e.g., “example.com ”). You can also include your site’s staging subdomain (e.g., “yoursite.webflow.io”). It can take up to 30 minutes for Google to register your domains. Google automatically registers first-level subdomains for any custom domain you add (i.e., if you add example.com, Google also registers subdomain.example.com). Learn more about Google reCAPTCHA's domain name validation.

Important

Before enabling reCAPTCHA on your site, note that enabling reCAPTCHA will enforce validation for all forms on your site. Any forms that do not have a reCAPTCHA element will fail to submit. This change will go into effect immediately after you save your changes, whether you republish your site or not. Make sure to add a reCAPTCHA element to each of your forms before you enable reCAPTCHA.

Enable reCAPTCHA validation

To enable reCAPTCHA validation on your site:

  1. Go to Site settings > Forms > reCAPTCHA validation
  2. Paste the API keys from Google (the reCAPTCHA v2 Site Key and the reCAPTCHA v2 Secret Key) into the corresponding fields
  3. Toggle reCAPTCHA validation on
  4. Save your changes
  5. Publish your site

Important

Make sure to paste your reCAPTCHA v2 Site key and reCAPTCHA v2 Secret key into the appropriate fields to ensure site security.

We recommend you test submitting form(s) on your published site after enabling reCAPTCHA validation.

How to customize the reCAPTCHA

reCAPTCHA has limited styling capabilities, but you can customize with custom attributes. Note that styling applied with custom attributes will only appear on your published site — that is, styles applied with custom attributes won’t appear on the Designer canvas.

How to change the reCAPTCHA’s color theme

By default, the reCAPTCHA element has a light theme with a grey background and black text. You can switch it to a dark theme with a black background and white text. To add a dark theme:

  1. Select the reCAPTCHA element on the canvas
  2. Go to Element settings > Custom attributes
  3. Click the “plus” icon
  4. Type “data-theme” in the Name field
  5. Type “dark” in the Value field

How to change the size of the reCAPTCHA

The reCAPTCHA element has a default size. You can make it more compact by adding a custom attribute.

To make the reCAPTCHA more compact:

  1. Select the reCAPTCHA element on the canvas
  2. Go to Element settings > Custom attributes
  3. Click the “plus” icon
  4. Type “data-size” in the Name field
  5. Type “compact” in the Value field

FAQ and troubleshooting

I can’t see the reCAPTCHA element on my published site

Make sure you’ve enabled reCAPTCHA validation, added a reCAPTCHA element to your form(s), and republished your site.

Help! My reCAPTCHA element displays “Error: Invalid site key” or  “ERROR for site owner: Invalid site key”

The “Error: Invalid site key” warning appears when 1 or both API keys are incorrect in your Site settings. To fix the error:

  1. Go to your Google reCAPTCHA settings page
  2. Copy your API keys from Settings > reCAPTCHA keys

Then, back in Webflow:

  1. Go to Site settings > Forms > reCAPTCHA validation
  2. Paste the API keys (the reCAPTCHA v2 Site Key and the reCAPTCHA v2 Secret Key) in the corresponding fields
  3. Save your changes
  4. Publish your site
  5. Clear your cache, and test again

My reCAPTCHA element displays “ERROR for site owner: Invalid domain for site key”

The “ERROR for site owner: Invalid domain for site key” warning indicates that you haven’t registered the correct domain(s) for these reCAPTCHA keys. It also appears when you’ve removed the domain(s) registered for this reCAPTCHA. To fix the error:

  1. Add your domain(s) in your Google reCAPTCHA settings page
  2. Save the settings in your reCAPTCHA settings page
  3. Publish your site
  4. Clear your cache, and test again

Note

Pro tip:If clearing your cache doesn’t work, test in an incognito window. If the reCAPTCHA appears without an error, this will reset the cache for the reCAPTCHA setting. Now, the reCAPTCHA should function correctly in all browsing windows. If the key still doesn’t work, delete the API keys (the reCAPTCHA v2 Site Key and the reCAPTCHA v2 Secret Key) and generate new ones. Then, replace both keys in your Site settings. Please also note that the Site key and Secret key are case-sensitive.

My form can still be submitted, even if the reCAPTCHA element isn’t checked

If a custom form action (Get or Post) has been set in a form element’s settings, i.e., form submissions are being collected outside of Webflow, the native Webflow reCAPTCHA integration won’t function as expected. If you’re using a custom form action, you’ll need to integrate reCAPTCHA following Google's reCAPTCHA guide.

reCAPTCHA isn’t working on a site I exported from Webflow

The native Webflow reCAPTCHA integration won’t function on exported sites. If you intend to export your site, you’ll need to integrate reCAPTCHA in your forms following Google's reCAPTCHA guide. Also, check out how to collect form submissions on exported sites.

Related articles