The hCaptcha bot detection service is available on Formspree to protect your forms. hCaptcha is an alternative for Google reCAPTCHA with a focus on privacy, accessibility, and customization.
To get started, visit the hCaptcha dashboard. Add a site (or use an existing one) then add your domain. There are advanced features for enterprise and a few others available for free accounts. Configure as required and click Save.
Once you create it, you can see the list of available sites and the Site key just bellow the site name.
Copy the Site key. This key will be used to configure your HTML form code.
Now access your account settings page and copy your Account-level Secret. This key will be used to configure your form in the Formspree settings.
With both a Site Key and Secret in hand, visit the settings tab of your Formspree form, and make sure that CAPTCHA is enabled.
Click on Adjust settings and paste your Secret Key. Click Save.
The final step is to add hCaptcha to your form code. You must paste your Site key in a div component. In a standard form setup, you can add it like so:
<html>
<head>
<title>hCaptcha Demo</title>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
<form action="https://formspree.io/f/{your-form-id}" method="POST">
<input type="text" name="email" placeholder="Email" />
<div class="h-captcha" data-sitekey="{your-site-key}"></div>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Alternatively, you can use AJAX to submit your form. Check the example below to learn how to submit forms with jQuery using hCaptcha:
<html>
<head>
<title>hCaptcha Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
<form id="form" method="POST">
<input type="email" name="email" placeholder="email@example.com" />
<div class="h-captcha" data-sitekey="{your-site-key}"></div>
<br/>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
$("form").submit(function(e){
e.preventDefault();
var hcaptchaVal = $('textarea[name=h-captcha-response]').val();
$.ajax({
url: 'https://formspree.io/f/{your-form-id}',
type: "POST",
dataType: "json",
data: {"h-captcha-response": hcaptchaVal, "email": $("input[name='email']").val()},
success: function(data) {
console.log(data)
}
})
});
</script>
</body>
</html>
If you are developing locally, it is important to know that you can not run hCaptcha on apps hosted on local host (127.0.0.1). You will need to configure a host entry to circumvent this, or us an HTTP tunneling service like ngrok.