We introduced Google reCAPTCHA v3 to prevent your form from being used as a mechanism to deliver spam. With version 3 your users will never be interrupted to check images as the version 2. The reCATPCHA v3 returns a score for each submission based on your website traffic. With more traffic, more assertive your reCAPTCHA v3 will be.
To get started, visit the reCAPTCHA admin console. Create a new key (or use an existing one) and select a v3 reCAPTCHA. Add your domain and then click Submit. You'll be presented with a site key and a secret key.
Now visit the settings tab of your Formspree form, and make sure that reCAPTCHA is enabled. You can now paste the secret key from the reCAPTCHA console here.
The final step is to add the reCAPTCHA v3 site key to your own site. In a standard form setup, you can add it like so:
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js?render={your-site-key}"></script>
<script>
grecaptcha.ready(function () {
grecaptcha.execute('{your-site-key}', {action: 'submit'}).then(function (token) {
console.info("got token: " + token);
document.getElementById('g-recaptcha-response').value = token;
});
});
</script>
</head>
<body>
<form action="https://formspree.io/f/{your-form-id}" method="POST">
<input name="email" type="email">
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
<input type="submit" class="btn btn-primary" value="submit"/>
</form>
</body>
<html>If you'd like to do something different, the Google reCAPTCHA v3 documentation provides a thorough explanation for different ways to implement the reCAPTCHA. If you use your own field, we will look for a field titled g-recaptcha-response (the default name of the field) so please don't overwrite it to a different name!
Alternatively, you can use AJAX to submit your form. Check the example above to how submit forms with jQuery using reCAPTCHA v3.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render={your-site-key}"></script>
</head>
<body>
<button onclick="captcha()" class="btn btn-primary">click me</button>
<script>
function captcha() {
grecaptcha.ready(function() {
grecaptcha.execute('{your-site-key}', {action: 'submit'}).then(function(token) {
$.ajax({
url: "https://formspree.io/f/{your-form-id}",
method: "POST",
dataType: "json",
data: {
email: "test@email.com",
message: "Hello world!",
"g-recaptcha-response": token
},
success: () => {
alert("Done!")
},
error: (err) => {
alert("Something wrong!", err)
}
});
});
});
}
</script>
<html>