# Spam Filtering with hCaptcha

hCaptcha is a CAPTCHA provider that offers a wide range of CAPTCHA types to protect your website from spam and abuse. It is easy to use and offers a variety of features to make your website more secure.

Here are the steps to integrate hCaptcha to your form.

# Step 1 - Get Sitekey and Secret key

First, you need to grab an API keys from hCaptcha Dashboard by clicking here (opens new window).

After logging into the hCaptcha Dashboard, create a new site and choose hCaptcha and add your domains.

hcaptcha creating new site

TIP

if you'd like to test your form on localhost, make sure you use the loopback address (127.0.0.1)

After adding your website and clicking the "Save" button, get your hCaptcha Sitekey:

hcaptcha sitekey

After adding your website and clicking the "Save" button, get your hCaptcha Sitekey:

hcaptcha secret key

# Step 2 - Add hCaptcha Library

Add hCaptcha library into your <head> tags.

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

# Step 3 - Add hCaptcha Checkbox Element

Add empty hCaptcha <div> into your form. Make sure you add hCaptcha sitekey you get in previous step.

<div class="h-captcha" data-sitekey="Add sitekey you get previous step"></div>

# Step 4 - Setup Secret Key

This step is where we use the "Secret Key". In order to add your Secret Key;

  • Select the form endpoint that you wish to integrate hCaptcha
  • Heead over to Automation section of the selected form endpoint.
  • Select "Add reCaptcha" automation and paste it under the "hCaptcha Secret Key" section and click "Complete"
  • Finally click "Save" on top to save your automation.
connect hcaptcha with getform.io

Here is a working example Codepen for HTML Form with hCaptcha:

See the Pen hCaptcha HTML form example with file upload by Getform (@getform) on CodePen.

← Spam Filtering with Honeypot →