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.\ \ --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.web3forms.com/getting-started/customizations/spam-protection/hcaptcha.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.