hCaptcha
hCaptcha is the privacy friendly alternative to Google reCaptcha. Used by Cloudflare, Shopify & more..
Web3Forms provides zero-config integration with hCaptcha. You don't need to setup your own keys or register with them. Just use the following code and add a script. You're done.
Step 1: Add a <div> inside your form
<form>
...
<! -- Step 1: Add this line -->
<div class="h-captcha" data-captcha="true"></div>
...
</form>
Step 2: Add the script before the closing of </body>
<! -- Step 2: Add the Web3Forms script -->
<script src="https://web3forms.com/client/script.js" async defer></script>
<form action="https://api.web3forms.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<input type="text" name="name" required>
<input type="email" name="email" required>
<textarea name="message" required></textarea>
<! -- Step 1: Add this line -->
<div class="h-captcha" data-captcha="true"></div>
<button type="submit">Submit Form</button>
</form>
<! -- Step 2: Add the script -->
<script src="https://web3forms.com/client/script.js" async defer></script>
If you add just two lines to your contact form, you will get a working hCaptcha to protect your form.
Use this snippet if you are using the HTML form-embedded method without Javascript to check whether the hCaptcha is filled or not.
Add this code block just above the closing of </body> and make sure
YOUR_FORM_ID is updated with your form id. <script>
const form = document.getElementById('YOUR_FORM_ID');
form.addEventListener('submit', function(e) {
const hCaptcha = form.querySelector('textarea[name=h-captcha-response]').value;
if (!hCaptcha) {
e.preventDefault();
alert("Please fill out captcha field")
return
}
});
</script>
Last modified 8mo ago