facebook twitter instagram youtube linkedin thumbs-up thumbs-down arrow-right progress locked success play pause

How do I add reCAPTCHA to my contact forms?

This feature is only available on the latest framework version. You can check your site’s framework version and upgrade to the latest by following the steps in this tutorial.

Step 1. Register your domain name with Google reCAPTCHA

Go to this site and click the “Admin Console” button from the top right. You will be prompted to login to a Google account to continue. Once you are logged in, you can proceed with registering your domain:

  1. Add a label
  2. Select reCAPTCHA v2 from the reCAPTCHA type section
  3. Under the dropdown, select option 1, “I’m not a robot” Checkbox
  4. Add your domain name and twentyoverten.com to the list of accepted domain names

Note: If you have multiple domain names attached to your Twenty Over Ten account, you will need to add all of these domain names here. Click the + button beside the domains line to add more domain names.

Step 2. Accept terms of service and continue

Scroll down to accept the reCAPTCHA terms of service and then click “submit” to continue.

Step 3. Save secret and site key information

On the next page you will see two codes, one for your domain’s site key and one for your domain’s secret key. Make copies of these codes or keep this page open while proceeding to the next steps.

Step 4. Log into your Twenty Over Ten account and set up the Google reCAPTCHA integration

Once you’re logged into your account, click the Site Settings button and then open the Integrations panel.

Hover your mouse over the Google reCAPTCHA integration option and click the “setup” button that appears on hover.

Enter your site and secret keys from Step 3 into the relevant sections. Click “save.”

Step 5. Add new contact forms to replace existing ones

The reCAPTCHA field will not automatically appear on your existing contact forms. This means that you will need to delete your existing contact forms and replace them.

Note: If you have custom contact forms, please refer to this article here.

Otherwise, start by navigating to the pages on your site that currently have contact forms. Delete the contact form by clicking on it and then clicking the “delete contact form” button in the top right of the form.

Then, click where your contact form was previously. The editor toolbar will pop open on click. Click the “insert contact form” button and select between the full or minimal contact forms options.

You will then see that your newly added form contains a placeholder for the reCAPTCHA integration on your staging site.

Step 6. Save your changes and test your updated contact forms

Once you’ve saved your changes, you will want to test your new forms to ensure the reCAPTCHA field is working properly. To do this, copy your build URL by clicking the “Copy Build URL” button from your website preview window:

Then, log out of your Twenty Over Ten account and paste the URL into your browser bar and navigate to the page(s) with your updated forms. You should see the Google reCAPTCHA field. Test your form to ensure submissions are not sent unless the reCAPTCHA box is checked.

Please note: When testing forms, be sure to use real data. False, or spammy data may result in your test submissions being filtered out.

Step 7. Publish to your live site and test again.

Once you’ve checked your forms are working properly on your Build URL, you can publish your changes. Any time you make a change to your contact forms, it is very important that you test them after publishing them to your live site as well. Follow the same procedure from the previous step to check the forms on your connected domain names.

Was this article helpful?
2 of 3 found this helpful
You already voted on this article!