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:
- Sign up for an API key at https://developers.google.com/recaptcha/
- Add the form element by following the instructions at the reCAPTCHA documentation.
- 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:
- Add your form to the HTML
- Include the reCAPTCHA script tag with your Site ID
- 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:
<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>