inside your form** ```html ``` **Step 2: Add the script before the closing of \** ```html ``` ### Configuration Options You can provide all options provided by hCaptcha by default. You need to append the option with `data-*` attribute. See example below ```markup

``` For more configuration options, visit: ### 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, visit the dashboard: [https://app.webforms.com](https://app.webforms.com/) and click on your form and then enable hCaptcha as your preferred captcha {% hint style="info" %} Add Client Side Validation as shown below to prevent form submission without checking the hCaptcha field. {% endhint %} ### 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 \ and make sure `YOUR_FORM_ID` is updated with your form id. ```html ``` ### 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, ```javascript // hCaptcha Site Key for Web3Forms data-sitekey="50b2fe65-b00b-4b9e-ad62-3ba471098be2" ``` ### Full Code ```html ``` 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 ](https://www.npmjs.com/package/@hcaptcha/react-hcaptcha)package from NPM. ```bash npm install @hcaptcha/react-hcaptcha --save # or pnpm add @hcaptcha/react-hcaptcha ``` Then, add the \ 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.\ \