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>
Configuration Options
You can provide all options provided by hCaptcha by default. You need to append the option with data-*
attribute. See example below
<div class="h-captcha"
data-captcha="true"
data-lang="de"
data-theme="dark"
data-onload="myFunction"
data-render="explicit"
data-size="compact"
></div>
For more configuration options, visit: https://docs.hcaptcha.com/configuration
Activate hCaptcha to your form
Once everything's setup you need to activate hCaptcha on your form to make it mandatory on each form submissions. For that, submit the form by checking the checkbox once and send the form. Now your hCaptcha will be activated.
Client Side Validation
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>
Manual Setup
If you want to load hCaptcha directly instead of using web3forms proxy, make sure you use the following sitekey for free plans. You can set your own site key and secret key on all paid plans,
// hCaptcha Site Key for Web3Forms
data-sitekey="50b2fe65-b00b-4b9e-ad62-3ba471098be2"
Full Code
<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.
Usage with React / Next.js
To use hCaptcha with React or Next.js, please follow the instructions below.
First, install the @hcaptcha/react-hcaptcha package from NPM.
npm install @hcaptcha/react-hcaptcha --save
# or
pnpm add @hcaptcha/react-hcaptcha
Then, add the <HCaptcha/> component inside the form.
Make sure you are using 50b2fe65-b00b-4b9e-ad62-3ba471098be2
as the sitekey
for free plans. Also make sure reCaptchaCompat
is false.
You can use a custom site key if you are on a Paid plan.
import { useForm } from "react-hook-form";
import HCaptcha from '@hcaptcha/react-hcaptcha';
export default function ContactForm() {
const { register, handleSubmit, setValue } = useForm();
const onHCaptchaChange = (token) => {
setValue("h-captcha-response", token);
};
const onSubmit = async (data) => {
console.log(data);
await fetch("https://api.web3forms.com/submit", {
method: "POST",
body: data
}).then((res) => res.json());
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* // other form fields */}
<HCaptcha
sitekey="50b2fe65-b00b-4b9e-ad62-3ba471098be2"
reCaptchaCompat={false}
onVerify={onHCaptchaChange}
/>
</form>
)}
That's it.
Make sure you have enabled hcaptcha
as the Block Spam option in the settings. Login to your dashboard to change it if not enabled already.
Other implementations
You can see the following guide for more examples. Just make sure you are using the correct sitekey
as mentioned above.
https://www.npmjs.com/package/@hcaptcha/react-hcaptcha
Last updated
Was this helpful?