Website Building » Squarespace » How Do I Turn on reCAPTCHA in Squarespace?

How Do I Turn on reCAPTCHA in Squarespace?

Last updated on December 12, 2022 @ 1:13 pm

If you’re using Squarespace, you may have noticed that there’s no built-in way to add a CAPTCHA to your forms. This can be a problem if you’re trying to prevent spam submissions, or if you just want to make sure that only real people are filling out your forms.

Fortunately, there is a way to add a CAPTCHA to your Squarespace forms using the Google reCAPTCHA service. Here’s how:

1. Go to the reCAPTCHA site and sign up for an account. You’ll need to provide a label for your site, your domain name, and choose whether you want to use reCAPTCHA v2 or v3.

2. Once you’ve registered your site, you’ll be given a pair of keys: a site key and a secret key. Copy these down somewhere safe, as you’ll need them in the next step.

3. Now go to your Squarespace account and open the site you want to add the CAPTCHA to.

Go to the Settings panel and click on Code Injection. Paste the following code into the Header field:

< script src="https://www.com/recaptcha/api.js" >

4. Save your changes and then go back to the Code Injection settings page. This time, paste the following code into the Footer field:

< script >  function onSubmit(token)
{document.getElementById("myForm").submit();   
} < /script >

5. Now go to the page where you want to add the CAPTCHA field and edit the page in Site Builder. Add a new Custom Form field and choose whether you want it to be a Single Line Text, Paragraph Text, or (Multiple Choice) Checkboxes.

For this example, we’ll use a Single Line Text. Once you’ve added the field, click on it and then click on the (..) icon in the toolbar.

(If you don’t see this icon, make sure that you’ve clicked on the field itself and not just the label.) In the pop-up window, scroll down until you see the “Inject custom <head>”) option and check it.

6. Paste this code into the <head> Injection:

PRO TIP: If you are not an experienced web developer, do not attempt to turn on reCAPTCHA in Squarespace. Doing so could break your website, and you may not be able to fix it without help from a professional.
< script src='https://www.js?render=your-site-key' >< /script >

(Replace “your-site-key” with your actual site key from Step 2.)

< script type='text/javascript' >
var onloadCallback = function() {       
grecaptcha.execute('your-site-key', {action: 'homepage'
}
.then(function(token) {
$('input[name=g-recaptcha-response]').val(token);
};</script>
Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.