hCaptcha

hCaptcha is the privacy friendly alternative to Google reCaptcha. Used by Cloudflare, Shopify & more..

hCaptcha checkbox

hcaptcha solve problem

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.

Remember hCaptcha's captcha mostly feels a bit difficult for users to solve. In that case, you can either use hCaptcha Paid Plan or use alternatives like hidden honeypot (less secure) or reCaptcha / Cloudflare Turnstile Captcha method (Pro).

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.

Add Client Side Validation as shown below to prevent form submission without checking the hCaptcha field.

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 hCoptcha 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-3ba471098be2as 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