Insert a reCAPTCHA field

reCAPTCHA is an available service from Google that can aid in shielding form submissions from spam and misuse. The service is designed to make sure that only genuine users are submitting forms on your site. Discover more about utilizing reCAPTCHA in forms.

In this instructional session, you will grasp:

1. Ways to include reCAPTCHA to forms
2. Methods to activate reCAPTCHA verification for a site
3. Techniques for tailoring the reCAPTCHA

Crucial: reCAPTCHA will not operate when you’ve designated a custom form action to compile your form submissions.

Crucial: Webflow forms utilizing reCAPTCHA won’t work on exported sites. Should you plan to export your site, you’ll have to connect reCAPTCHA in your forms in accordance with Google’s reCAPTCHA guide. Additionally, be informed about how to gather form submissions on exported sites.

Ways to include reCAPTCHA to forms

You can affix reCAPTCHA to your forms from the Add panel > Elements section > Forms area. reCAPTCHA elements must be inserted into a form.

Crucial: reCAPTCHA will not show up on your live site until you empower validation in Site settings > Forms section. It’s important to realize that this will enable reCAPTCHA validation across all forms on your site, hence make sure to include a reCAPTCHA element in all of your forms.

Helpful hint: reCAPTCHA automatically detects the language of the site visitor and exhibits the widget in that language.

Methods to activate reCAPTCHA verification for a site

You can configure reCAPTCHA on your site by following these steps:

1. Register your site and produce API keys
2. Turn on reCAPTCHA verification

Register your site and produce API keys

1. Head to Google’s reCAPTCHA page
2. Select the reCAPTCHA type: reCAPTCHA v2
3. Pick the “I’m not a robot” Checkbox

Afterwards, register all domains linked to your site by inputting them under Domains. Once registered, you’ll be given 2 API keys (a Site Key and a Secret Key) in your reCAPTCHA settings. These keys will be used when activating reCAPTCHA verification in the next step.

Note: Ensure to add any custom domains you’re employing (e.g., “example.com”). You can also incorporate “example.webflow.io” (substituting “example” with your subdomain) if you’re using the subdomain for publishing, staging, or testing. Subdomains for a custom domain are automatically registered. This means registration for “example.com” also registers “subdomain.example.com.” Read more about Google reCAPTCHA’s domain name authentication.

Crucial: Registering domains may take up to 30 minutes to become effective.

Turn on reCAPTCHA verification

Crucial:Prior to enabling reCAPTCHA on your site, remember that enabling reCAPTCHA will enforce validation for all forms on your site. Any forms lacking a reCAPTCHA element will be unsuccessful in submission. This adjustment will take place instantly after you click Save (step 4 below), regardless of republishing your site or not. Ensure to add a reCAPTCHA element to each of your forms before activating reCAPTCHA.

To switch on reCAPTCHA verification on your site:

1. Navigate to Site settings > Forms section > reCAPTCHA validation
2. Insert the API keys from Google (the reCAPTCHA v2Site Key and the reCAPTCHA v2 Secret Key) — into the relevant fields
3. Activate reCAPTCHA verification
4. Save your adjustments
5. Publish your site

Crucial: For protection and proper functionality, ensure not to paste the Secret Key in the Site Key field.

Note: If you prefer to continue designing, or you’re not prepared to enable reCAPTCHA for all forms on your live site, you can return to Site settings to activate it later.

We recommend verifying that the form operates correctly on your published site after adding a reCAPTCHA field.

Frequently Asked Questions and resolution

If you face issues with reCAPTCHA, here are potential problems, alerts, error messages, and how you can troubleshoot them.

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

Ensure you’ve activated reCAPTCHA verification, included a reCAPTCHA element in a form, and republished your site.

your webpage

Helpful hint: If clearing your cache doesn’t resolve the issue, try testing in an incognito window. If the reCAPTCHA displays correctly without any errors, this action should refresh the cache for the reCAPTCHA configuration. By now, the reCAPTCHA should operate as expected in all browsing sessions. If the issue persists, delete the API keys (the reCAPTCHA v2 Site Key and the reCAPTCHA v2 Secret Key) and generate new ones. Afterwards, update both keys in your Site settings. Keep in mind that the Site key and Secret key are case-sensitive.

How to personalize the reCAPTCHA

Though reCAPTCHA offers limited customization options, you can personalize it using custom attributes. Please be aware that styles applied via custom attributes will only reflect on your live site.

Modifying the reCAPTCHA’s color scheme

By default, the reCAPTCHA component comes in a light theme with a grey background and black text. You have the option to switch it to a dark theme featuring a black background with white text. To enable the dark theme:

1. Choose the reCAPTCHA component on the canvas
2. Navigate to Element settings > Custom attributes
3. Click on the “plus” icon
4. Enter “data-theme” in the Name field
5. Input “dark” in the Value field

Changing the reCAPTCHA’s dimensions

The reCAPTCHA element comes with a predefined size. You can make it more compressed by adding a custom attribute.

To reduce the size of the reCAPTCHA component:

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