We introduced Google reCAPTCHA v3 to prevent your form from being used as a mechanism to deliver spam. Version 3 is the latest invisible reCAPTCHA technology from Google. Your users shouldn't need to click any boxes or pass any tests. Instead the script observes their browsing behavior to ensure it appears human-like.
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"></script>
<script>
function onSubmit() {
document.getElementById("myForm").submit()
}
</script>
</head>
<body>
<form id="myForm" action="https://formspree.io/f/{form_id}" method="POST">
<input name="email" type="email">
<button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key"
data-callback='onSubmit' data-action='submit'>Submit</button>
</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 below to learn how to 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>