Reducing spam by adding Google reCAPTCHA

Last modified: November 1st, 2023

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

reCAPTCHA embeds a CAPTCHA in your page to help prevent spam. reCAPTCHA requires additional configuration in the Site Settings.

Gif of Google ReCAPTCHA succesfully verifying

To add reCAPTCHA to your site:

  1. In your organisation settings, under Hosting > Forms either create a new inbox or select manage on an existing inbox
  2. Select reCAPTCHA as your captcha provider.
  3. Sign up for an API key at https://developers.google.com/recaptcha/
  4. Enter your secret as your captcha secret key, and your site key as your captcha site key.

Once configured, any form submissions that fails to validate will return a 401 error page.

Screenshot of form-submission failure screen

reCAPTCHA v3#

Additional JavaScript is required to use reCAPTCHA v3 with CloudCannon forms. This is to add the required input named g-recaptcha-response before submitting. An example of how to set this up is:

  1. Add your form to the HTML
  2. Include the reCAPTCHA script tag with your Site Key
  3. Add JavaScript to catch form submissions
  4. Generate the recaptcha token
  5. Add token to a new input named g-recaptcha-response
  6. Resubmit the form

HTML Form:

contact.html
copied
<form method="post" id="my-form" action="/contact-success">
  <label for="email_address">Email Address</label>
  <input id="email_address" type="text" name="email">

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <input type="hidden" name="_to" value="{{ site.data.company.contact_email_address }}">
  <input type="text" name="_gotcha" style="display: none;">

  <input type="submit" value="Send Message">
</form>

JavaScript:

contact.html
copied
<script src="https://www.google.com/recaptcha/api.js?render=SITE_ID"></script>
<script>
  var submitted = false;
  var tokenCreated = false;
  var formEl = document.getElementById('my-form');

  formEl.addEventListener("submit", function (event) {

    // Check if the recaptcha exists
    if (!tokenCreated) {

      // Prevent submission
      event.preventDefault();

      // Prevent more than one submission
      if (!submitted) {
        submitted = true;
        // needs for recaptacha ready
        grecaptcha.ready(function() {
          // do request for recaptcha token
          // response is promise with passed token
          grecaptcha.execute('SITE_ID', {action: 'create_comment'}).then(function (token) {
            // add token to form
            var input = document.createElement("input");
            input.type = "hidden";
            input.name = "g-recaptcha-response";
            input.value = token;
            formEl.appendChild(input);

            // resubmit the form
            tokenCreated = true;
            formEl.submit();
          });
        });
      }
    }
  });
</script>

Related Articles

Related links

Open in a new tab