Do you want to add hCaptcha to WordPress forms?
Adding a Captcha or creating a hCaptcha form helps you fight spammers and protect your website from hackers.
In this article, we’ll show you how to add hCaptcha to WordPress forms, so you can keep your site safe.
What Is hCaptcha?
hCaptcha is a popular reCAPTCHA alternative. It is a free anti-spam tool that protects sites from bots, spam, and website attacks.
The term hCaptcha is derived from the popular term “CAPTCHA.”
CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. The letter “H” in hCaptcha denoted humans.
If you’re concerned about your site’s privacy and looking for a reCAPTCHA alternative, hCaptcha might be the right tool for you.
Why Add hCaptcha to Your WordPress Forms?
Let’s see some reasons that might help you decide if the hCaptcha service is a good fit for your website or not:
- Setup Process: Creating and setting up hCaptcha account is super easy. We’ll see a complete hCaptcha sign-up process in our next step.
- Better Privacy: Some site owners are more concerned about their site and user’s privacy. If you’re worried that Google’s reCAPTCHA might use your data, hCaptcha will be a better option for you.
- More Effective: hCaptcha is proven to be more effective in stopping spam and bots. It offers several advanced features that can be used to save websites from being harmed by spam.
- Get Paid for CAPTCHAs: hCaptcha pays a small reward every time your visitors solve challenges on your forms.
- Freemium Service: hCaptcha includes both free and premium versions. The free version has plenty of features that you can use on your site forms; however, if you are looking for more advanced features such as custom challenges and time-based difficulty scheduling, you can go for the premium version.
How to Add hCaptcha to WordPress Forms?
Enabling captcha on WordPress forms requires prior knowledge of HTML, but the WPForms builder comes with in-built hCaptcha integration that allows you to add hCaptcha to your WordPress forms without writing a single line of code.
Here are the steps we’re going to work through:
So let’s get started!
Step 1: Install the WPForms Plugin
The first thing you’ll need to do is to install and activate the WPForms plugin. If you’re new to WordPress or facing any difficulty during the plugin installation process, you can check the step-by-step guide on how to install a WordPress plugin.
Step 2: Select hCaptcha Type In WPForms
Now the second step is to select the hCaptcha type from WPForms’ settings.
To select the type, go to your WordPress dashboard and click WPForms » Settings.
The WPForms settings page will open. Here you will see multiple tab options. Click CAPTCHA from the tabs across the top.
On the captcha page, you will see 2 popular captcha services, hCaptcha, and reCAPTCHA. You’ll need to click on the hCaptcha icon.
As soon as you click on the icon, you’ll see settings for hCaptcha on the bottom. Here you can see fields to add Site key and Secret Key to.
Step 3: Generate hCaptcha Keys
To enable hCaptcha, first, we need to generate keys in the hCaptcha account and connect it with WPForms.
Open the hCaptcha site in a new tab and keep WPForms open in another tab.
Now to create a hCaptcha account, click the Sign-Up button at the top.
To use the free plan, click the button under Add hCaptcha to your service (free).
The signing-up process is relatively easy. You can sign up directly with Github, Google accounts or submits custom details.
Once your account is created, you’ll be redirected to your hCaptcha account. Here click the New Site button at the top right.
This will open a new page where you need to fill a form and enter site details. The first section you’ll see on the page is the Add New Sitekey section. If you’d like, you can add a name to this specific site key by clicking the pencil icon. But, again, this is only for your reference and optional, it’s not mandatory to fill out.
Now the second section of the form is General Information. Here we need to add Hostnames, choose the difficulty level of the CAPTCHA, and set captchas filters based on audience interest.
Let’s discuss these 3 options in detail:
- Hostnames: Here, we need to add your site URL or domain name that you’ll be activating hCaptcha on.
Add your site domain and click Add new domain button.
- Captcha difficulty: This option allows you to set captcha difficulty levels within your forms. There are 4 levels Easy, Moderate, Difficult, and Always On; you can choose any level as per your requirements.
Let’s share some information around hCaptcha difficulty level options; this will help you decide what to choose for your website:
- Easy: This option validates the user by displaying standard “easy” challenges that can be easily solved within a few seconds.
- Moderate: This option displays a bit more difficult challenges compared to Easy. It’s a more secure option, helps to check if the user is human or bot.
- Difficult: This will display more difficult challenge types than Easy or Moderate, which take a little longer to solve.
- Always On: This option forces every user to solve a ‘difficult’ CAPTCHA before submitting a form. However, this option might affect your website’s user experience but is the most secure method.
- Filter captchas by audience interests: From this option. you can choose up to 3 different interests based on your website niche. This will filter out what type of content will be shown in your captchas. Let’s say you have a restaurant booking website, so you can choose the Food and drink option to filter your captchas.
Once you’ve configured all form’s settings, don’t forget to click the SAVE button on the upper right corner of the page.
This will redirect you to a site key’s settings page. Here you’ll find Captcha SiteKeys. Click the Settings button to view the site key.
Once you click the Settings button, you can see the Sitekey for your website under the Sitekey section, copy your entire site key.
Remember the WPForms tab we kept open? Next, we need to paste this key into WPForms.
Now copy the site key, open the WPForms tab and paste it into your WPForms settings under the Site Key setting.
The next option you’ll see is Secret Key. We need to copy the Secret Key from your hCaptcha account as well.
The secret key is located in the settings tab of your hCaptcha account, so we need to close the site key settings page. Close it by clicking on the Save button.
Now click the Settings tab. You’ll see your Secret Key at the top.
Copy your secret key and paste it into WPForms.
Once you’ve added your keys, you can also adjust other hCaptcha settings underneath. Let’s explain these settings in detail.
- Fail Message: From here, you can customize the message that is shown to your visitors if hCaptcha stops the form from being submitted.
- No-Conflict Mode: This option stops the conflicts if caused by any other plugin or theme. There might be times that your website’s other plugins or themes try to load CAPTCHA code. If this happens, there might be an error. You can check the No-Conflict Mode checkbox to force disable any conflicting hCaptcha code to prevent any error.
- Preview: This will show a preview of your hCaptcha on the front end. Once you’ve added both Site and Secret keys, click the Save button to see Preview of hCaptcha.
Note: If the things are not configured properly, this setting will show an error message, which means you should double-check if your keys are correctly entered into your settings.
Step 4: Create a Form
Now that we’re done with the settings, it’s time to enable hCaptcha on your form.
To do that, first, we need to create a new form using WPForms.
Go to WPForms » Add New to create a new form.
Here we’ll create a simple contact form.
On the setup screen, name your form and select the template you want to use. WPForms offers a number of pre-built form templates; you can choose any form template depending on your requirements and use it on your website.
We’ll choose the Simple Contact Form template.
Once you click the template, you can see a simple contact form template on the right and a drag and drop builder on the left. From this builder, you can add additional fields to your contact form.
A simple contact form includes all the basic form requirements, i.e., Name, Email, and Comment or Message.
Step 5: Add hCaptcha Block to Form
Now that we have our form ready, we just need to add the hCaptcha field.
On the left, look under the Standard Fields section and click on the hCaptcha field.
As soon as you click the hCaptcha field, a message will be displayed to confirm that you’ve turned on hCaptcha for this form. Click OK.
Now to confirm, you’ll see the hCaptcha logo on the top-right of your form.
Don’t worry; this logo is only displayed on the backend of the form and won’t show up on your published form. It is only to remind you that the hCaptcha is active on your form.
Click on the Save button to get everything settled.
Step 6: Test hCaptcha
The final step is to test to make sure that hCaptcha works properly with your contact form or not.
To test this out, open the contact form on your site’s front-end, fill your form entries and submit to check. For more details on how to test out your forms, please look at our complete testing checklist.
Note: Test the contact form in another browser or incognito window, where you haven’t logged in as an admin on your site.
Next Steps: Secure Your Online Forms
And you’re done! This is how you can help fight contact form spam with WPForms and hCaptcha without adding any code and HTML CSS. If you are looking for more ways to keep your online forms safe, do check out our article on 12 WordPress security tips and tricks for your online forms.
We hope this article helps you understand the complete process of enabling hCaptcha with WordPress forms. In a similar way, you can also add CAPTCHA in WordPress login and registration form using the WPForms builder.
You might also want to check out our post on how to create a file upload form in WordPress (easily).