hCaptcha

Available on all plans. See pricing.

hCaptcha is a privacy-first CAPTCHA provider: it doesn’t share data with Google, making it a common choice for teams with strict data residency or privacy requirements. It presents a short visual challenge to the user (typically an image selection puzzle) before the form can be submitted.

Keep in mind that hCaptcha adds visible friction to your form. That’s the trade-off: the challenge is harder for bots to automate, but real users have to complete it too. For high-value forms under active attack, that friction is usually worth it. For low-risk forms, Cloudflare Turnstile or TorchWarden alone may be enough.

How it works

When a visitor completes the hCaptcha challenge and submits your form, hCaptcha’s JavaScript injects a token into the form as h-captcha-response. Formtorch receives that token alongside the submission and verifies it with hCaptcha’s API before storing anything. If the token is missing or the verification fails, the submission is rejected with a 400 error. You don’t write any verification code yourself.

Prerequisites

An hCaptcha account (free tier available at hcaptcha.com )
A Formtorch form to attach hCaptcha to

Setup

Create a site in the hCaptcha dashboard

Give the site a label (for your own reference), then enter the domain where your form lives, for example yoursite.com. Leave the difficulty setting on Auto unless you have a specific reason to change it.

Click Save. hCaptcha will generate a Site Key (displayed as “Sitekey” in the hCaptcha dashboard) for this entry.

Copy your site key and secret key

Your Site Key is shown in the sites list next to the entry you just created. Click it to open the site settings and find the full key.

Your Secret Key is account-wide, not per-site. Find it under Settings → API Keys in the hCaptcha dashboard. If you forget your Secret Key, you can rotate it by creating a new one, though hCaptcha limits rotations to 3 times per day.

Before continuing, copy this secret and store it safely. You won’t be able to see it again.

Never put your secret key in your HTML, JavaScript, or anywhere a visitor could read it. It belongs only in your Formtorch form settings.

Enable hCaptcha in Formtorch

Open your form in the Formtorch dashboard , go to All Forms → Settings → CAPTCHA, and toggle CAPTCHA on. Select hCaptcha from the provider list.

Paste your Site Key into the Site Key field and your Secret Key into the Secret Key field. Click Save.

hCaptcha needs a script tag to load the library and a div where the challenge widget renders. Add the script tag once in your page <head> or just before </body>. Place the widget div inside your <form>, right before the submit button.

HTML

contact.html


<!-- In your <head> -->
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
 
<!-- Inside your <form> -->
 
<form action="https://formtorch.com/f/YOUR_FORM_ID" method="POST">
  <label>
    Name
    <input type="text" name="name" required />
  </label>
 
<label>
  Email
  <input type="email" name="email" required />
</label>
 
<label>
  Message
  <textarea name="message" required></textarea>
</label>
 
  <!-- hCaptcha widget — renders the challenge here -->
 
<div class="h-captcha" data-sitekey="YOUR_SITE_KEY"></div>
 
  <button type="submit">Send message</button>
</form>

React

ContactForm.tsx


"use client";
 
import { useEffect } from "react";
 
export default function ContactForm() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://js.hcaptcha.com/1/api.js";
    script.async = true;
    script.defer = true;
    document.head.appendChild(script);
    return () => {
      document.head.removeChild(script);
    };
  }, []);
 
return (
 
<form action="https://formtorch.com/f/YOUR_FORM_ID" method="POST">
<input type="text" name="name" placeholder="Name" required />
<input type="email" name="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required />
 
      {/* hCaptcha injects h-captcha-response automatically on challenge complete */}
      <div className="h-captcha" data-sitekey="YOUR_SITE_KEY" />
 
      <button type="submit">Send message</button>
    </form>
 
);
}

Next.js

app/contact/page.tsx


import Script from "next/script";
 
export default function ContactPage() {
  return (
    <>
      <Script
        src="https://js.hcaptcha.com/1/api.js"
        strategy="lazyOnload"
      />
 
      <form action="https://formtorch.com/f/YOUR_FORM_ID" method="POST">
        <input type="text" name="name" placeholder="Name" required />
        <input type="email" name="email" placeholder="Email" required />
        <textarea name="message" placeholder="Message" required />
 
        {/* hCaptcha widget */}
        <div className="h-captcha" data-sitekey="YOUR_SITE_KEY" />
 
        <button type="submit">Send message</button>
      </form>
    </>
  );
}

Replace YOUR_SITE_KEY with the site key from Step 2, and YOUR_FORM_ID with your Formtorch form ID.

The hCaptcha widget renders a challenge box in your form. Once the visitor completes it, hCaptcha injects a hidden h-captcha-response field. Formtorch reads and verifies that field when the form is submitted.

Test the integration

Submit your form after completing the hCaptcha challenge. Open the Submissions tab in your Formtorch dashboard . You should see the submission listed there.

That’s it. hCaptcha is protecting your form.

hCaptcha supports a few visual options via data-* attributes on the widget div.


<div
  class="h-captcha"
  data-sitekey="YOUR_SITE_KEY"
  data-theme="dark"
  data-size="compact"
></div>

Attribute	Values	Default
`data-theme`	`light`, `dark`	`light`
`data-size`	`normal`, `compact`	`normal`

Use compact when space is tight (for example, inside a narrow sidebar form). Use dark to match a dark-themed site.

Troubleshooting

Submissions are rejected with a 400 error

The most common cause is the visitor submitting the form before completing the challenge, or the token expiring (tokens are valid for about 2 minutes). Make sure the submit button is only enabled after the challenge is solved, or instruct users to complete the puzzle before clicking submit.

Confirm the hCaptcha script is loading correctly by checking your browser console for errors from js.hcaptcha.com. Also verify that data-sitekey on the widget div matches your Site Key, not your Secret Key. The two look similar but are different values.

Free tier verification limits

hCaptcha’s free tier is sufficient for most forms, but it does have a monthly verification limit. If you’re running a high-traffic form, check hCaptcha’s pricing to confirm the free tier covers your volume.

Testing on localhost

hCaptcha provides dedicated test keys that always pass verification: use site key 10000000-ffff-ffff-ffff-000000000001 and secret key 0x0000000000000000000000000000000000000000 during local development so you’re not spending real verifications. Swap in your production keys before deploying.