reCAPTCHA embeds a CAPTCHA in your page to help prevent spam. reCAPTCHA requires additional configuration in the Site Settings.
To add reCAPTCHA to your site:
- In your organisation settings, under Hosting > Forms either create a new inbox or select manage on an existing inbox
- Select reCAPTCHA as your captcha provider.
- Sign up for an API key at https://developers.google.com/recaptcha/
- Enter your secret as your captcha secret key, and your site key as your captcha site key.
- Add reCAPTCHA to that form by following the instructions in the reCAPTCHA documentation
Once configured, any form submissions that fails 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:
- Add your form to the HTML
- Include the reCAPTCHA script tag with your Site Key
- Add JavaScript to catch form submissions
- Generate the recaptcha token
- Add token to a new input named
g-recaptcha-response - 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>