Hosting / Forms

Google reCAPTCHA

reCAPTCHA embeds a CAPTCHA in your page preventing targeted and untargeted spam. CloudCannon does not send the email if the CAPTCHA fails to validate. reCAPTCHA requires additional configuration in the Site Settings.

To add reCAPTCHA to your site:

1. Sign up for an API key at https://developers.google.com/recaptcha/
2. Add the form element by following the instructions at the reCAPTCHA documentation.
3. Add the secret and key to Site Settings / Forms

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

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 ID
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:

 

<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:

<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>