hCaptcha
hCaptcha is a CAPTCHA service that provides website owners with a reliable method to prevent spam, abuse, and malicious activities. hCaptcha provides a user-friendly experience and a wide range of features to enhance the security of your website, making it both easy to use and effective in safeguarding against threats.
To integrate Google hCaptcha into your form endpoint, follow these steps:
Step 1 - Get Sitekey and Secret key
To begin, obtain an API key from hCaptcha Dashboard by clicking here (opens in a new tab), you can login with your Google Account.
- Log into the hCaptcha Dashboard, create a new site and choose hCaptcha and add your domains.
- After adding your website and clicking the "Save" button, get your hCaptcha Sitekey.
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>
Example
<html>
<html lang="en">
<head>
<title>FormZillion - hCaptcha Spam Protection</title>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
<form action="https://app.formzillion.com/f/your-form-id" method="post">
<h1 class="text-3xl text-center font-bold">Formzillion HTML Form Example</h1>
<label for="exampleInputEmail1">Email address</label>
<input id="exampleInputEmail1" type="email" name="email" placeholder="Enter email" required="" />
<label for="exampleInputName">Name</label>
<input id="exampleInputName" type="text" name="name" placeholder="Enter your name" required="" />
<div class="h-captcha" data-sitekey="YOUR_SITE_KEY"></div>
<button type="submit" id="submit-btn">Send</button>
</form>
</body>
</html>
Step 4 - Setup hCaptcha Spam Protection for your Form
In order to add your Secret Key follow the below steps:
- Login to your Formzillion App (opens in a new tab).
- Select your particular form to which the spam protection need to be enabled.
- Navigate to form's settings, select Spam Filtering in the sidebar. Select the Google hCaptcha from the dropdown and add a secret key.
- Paste the secret key into the Google hCaptcha secret key field.
Your form is now protected by hCaptcha.
To stop using hCaptcha, change your Spam Protection to none.
Info: hCaptcha is available on Standard, Premium and Agency plans. (opens in a new tab)