Skip to content

hCaptcha Setup

hCAPTCHA is a free, privacy-focused alternative to Google's reCAPTCHA that protects your forms from automated spam and abuse while respecting user privacy. Basin fully supports hCAPTCHA with both visible and invisible modes.

The easiest way to implement hCAPTCHA is using BasinJS, our JavaScript helper library. BasinJS handles all the setup automatically for any of our supported CAPTCHA solutions.

To use BasinJS, follow the steps outlined in our BasinJS Documentation.

About hCAPTCHA

hCAPTCHA is designed to be a privacy-first alternative to other CAPTCHA solutions, offering:

  • Privacy Protection: Doesn't track users across websites
  • Accessibility: Better support for users with disabilities
  • Performance: Lightweight and fast-loading
  • Transparency: Open about their data practices

For more information, visit hCAPTCHA's website.

Manual hCAPTCHA Setup (Advanced)

Important: Use Basin's Site Key

You must use Basin's hCAPTCHA site key. Other site keys will NOT work.

Basin hCAPTCHA Site Key: 

7fe715a1-151f-4c63-b497-bd971974df05

Step 1: Add hCAPTCHA Script

Add the hCAPTCHA script tag to your page's <head> section, outside of your form code:

<script src="https://js.hcaptcha.com/1/api.js" async defer></script>

Script Placement

Do not place the script tag inside your form div, as this will prevent hCAPTCHA from initializing properly.

Step 2: Add hCAPTCHA Widget to Form

Insert the hCAPTCHA div within your form using Basin's site key:

<form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="Your Message" required></textarea>

    <!-- hCAPTCHA widget -->
    <div class="h-captcha" data-sitekey="7fe715a1-151f-4c63-b497-bd971974df05"></div>

    <button type="submit">Submit</button>
</form>

Step 3: Enable hCAPTCHA in Basin Dashboard

  1. Go to your form's settings: Form → Settings → Spam
  2. Enable "Require Valid hCAPTCHA response"
  3. Save your settings

This ensures all form submissions must be accompanied by a successful hCAPTCHA verification.

Invisible hCAPTCHA Setup (Optional)

For a seamless user experience without visible verification widgets, you can implement invisible hCAPTCHA:

<script>
  function onSubmit(token) {
    document.getElementById("invisible-hcaptcha-form").submit();
  }
</script>

<form id="invisible-hcaptcha-form" accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>
    <textarea name="message" placeholder="Your Message" required></textarea>

    <button class="h-captcha" 
            data-sitekey="7fe715a1-151f-4c63-b497-bd971974df05" 
            data-callback='onSubmit' 
            data-badge="inline">
        Submit
    </button>
</form>

Advanced Configuration Options

hCAPTCHA offers several configuration options you can add to your widget:

Theme Options

<div class="h-captcha" 
     data-sitekey="7fe715a1-151f-4c63-b497-bd971974df05"
     data-theme="dark">
</div>

Size Options

<div class="h-captcha" 
     data-sitekey="7fe715a1-151f-4c63-b497-bd971974df05"
     data-size="compact">
</div>

Language Options

<div class="h-captcha" 
     data-sitekey="7fe715a1-151f-4c63-b497-bd971974df05"
     data-hl="es">
</div>

Complete Example

Here's a complete working example with proper form structure:

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form with hCAPTCHA</title>
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
    <form accept-charset="UTF-8" action="https://usebasin.com/f/YOUR_FORM_ID" method="POST">
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>

        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>

        <div>
            <label for="message">Message:</label>
            <textarea id="message" name="message" required></textarea>
        </div>

        <!-- hCAPTCHA widget -->
        <div class="h-captcha" data-sitekey="7fe715a1-151f-4c63-b497-bd971974df05"></div>

        <button type="submit">Send Message</button>
    </form>
</body>
</html>

Best Practices

  1. User Experience: hCAPTCHA is designed to be less intrusive than other solutions while maintaining security

  2. Accessibility: hCAPTCHA provides better accessibility features for users with disabilities

  3. Performance: The lightweight nature of hCAPTCHA makes it ideal for performance-sensitive sites

  4. Privacy: Choose hCAPTCHA when user privacy is a priority for your organization

Troubleshooting

Common Issues

  • hCAPTCHA not loading:
  • Verify the script is placed in the <head> section
  • Check that you're using Basin's site key exactly as provided

  • Ensure the script is not placed inside form tags

  • Form submissions not working:

  • Confirm hCAPTCHA is enabled in your Basin dashboard

  • Verify the site key matches exactly: 7fe715a1-151f-4c63-b497-bd971974df05

  • Widget not displaying:

  • Check browser console for JavaScript errors
  • Ensure the hCAPTCHA script loads before the widget initialization

Testing Your Implementation

  1. Submit your form with the hCAPTCHA completed
  2. Try submitting without completing the hCAPTCHA (should be blocked)
  3. Check your Basin dashboard to confirm submissions are being processed correctly

Comparison with Other Solutions

hCAPTCHA is an excellent choice when: - User privacy is a priority - You want a lightweight, performant solution - Accessibility compliance is important - You prefer transparent data practices

For a detailed comparison of all CAPTCHA solutions supported by Basin, see our Comparison Table.

Support

For additional help with hCAPTCHA implementation, contact Basin support.