How to Integrate hCaptcha With WPForms? Or How to Add hCaptcha in WPForms?

FTC: We receive compensation for purchases you made through our links at no extra cost to you, this will help us to keep our website running. You can read more from here. Note: The pricing and availability are accurate as of the time of publication but are subject to change in the future.

What is hCaptcha and What it can do?

hCaptcha is an alternative to Google’s reCAPTCHA human-based CAPTCHA provider widget on your websites or applications which helps your web and applications to defend or protect against bots, spam, and other automated tools. hCaptcha easy to use, it is available on the WordPress Plugins directory, so you can easily get it free.

In this guide, I will show you how to add hCaptcha to your website in two ways. In the first method, I’ll show you how to add hCaptcha in WPForms? And in the second method, I will add hCaptcha using a plugin.

Method 1: How to add hCaptcha in WPForms?

In the first method, I will show you how to add hCaptcha in WPForms using the WPForms plugin, but let me tell you first what is WPForms plugin? and What WPForms can do?

WPForms is a user-friendly easy to use drag and drop WordPress form builder plugin that allows you to easily create contact forms, email subscription forms, payment forms, and other types of online forms with just a few clicks without writing any code and without any technical knowledge. WPForms help you to create responsive and beautiful forms for your website is simply a few clicks.

“WPForms founded in 2016 by Syed Balkhi, he is the co-founder and CEO of WPForms, as well as he is found his WPBeginner.com website in 2006, where he builds WPBeginner.com website to provide useful WordPress tutorials and some tips and tricks for no-technical users. And today his website becomes one of the most popular in the WordPress tutorial lists.”

Recently, WPForms added a new hCaptcha integration to their newest version of WPForms. That means you can build your WPForms with another tight security with the help of new hCaptcha integration to WPForms.

Now you know what the WPForms plugin is and what it actually does. Now head over to how you can configure hCaptcha in WPForms.

In this method, you no need to add the hCaptcha plugin, you just need the WPForms plugin, which you can directly get from here, it’s free, or you can install it right from your WordPress admin area.

WPForms is also available in the Premium version which can provide some helpful Features & Addons and expanding your form-building capability and some extra tools, you can get WPForms Premium plans from here.

To install the free version of WPForms, Click on the “Add new”, and the type and search for the “WPForms” plugin, and then click the “Install Now” button, after that click on the “Activate” button. After it’s activated, it will show you the welcome screen, and you will also notice that there’s a new menu added to your WordPress admin area on the left.

Please avoid any other plugin by showing the name WPForms in different names. You must check the original plugin author when you search for “WPForms”, here you can see the original one with the original author.

Screenshot 2021 01 19 175322

Now click on the WPForms menu and select “All Forms”, or just click on the WPForms, and here you can create beautiful and responsive forms. Just click on the “Add New” button, here you will see this type of screen, which includes “Blank Form” this is where you can create your form from scratch, or you can go with ready-made forms, including “Simple Contact Form”, “Newsletter Signup Form”, and “Suggestion Form.”

You will see there are some premium features that have been a lock when you using WPForms free version, but you can unlock those features using the WPForms Premium version. You can see both images showing what the free version offers and what the WPForms Premium version offers.

Screenshot 2021 01 19 181249
You will see this options when you’re using Free version
WPForms Screenshot Add New Form
Here you will see some additional features when you’re using a WPForms Premium

From above, you can start with any given suggestion, here I will go with the “Simple Contact Form”. Just hover your mouse cursor to “Simple Contact Form”, and click on “Create a Simple Contact Form”, and it will start loading. After that, you will see this type of screen.

Screenshot 2021 01 19 182456

In the above image, you will notice some options available in Blue color which you can use in your form builder, and other options are available in Light Blue which is currently locked because this will need WPForms Premium version to unlock it, see the Premium Feature & Addons in the images below.

Screenshot 2021 01 19 182821
This Fancy Fields and Payment Fields will lock when you’re using free version
WPForms Screenshot Drag Drop Form Builder
You can unlock Fancy Fields and Payment Fields using WPForms Premium

If you want to go for free, then you can continue with me. Here, I will add another two more field i.e. “Numbers” and “Captcha”, you can customize for your needs like Name is required, you can see a small red star above the Name, as well as Email, you can also make the Number field compulsory to fill by the visitor with the same settings.

Here I have added the Numbers field and Captcha field. Remember: If you don’t configure CAPTCHA settings, it will be showing some type of message, don’t worry click ok and save your form. Want to exit, just click on the close button, and it will take you to the All Forms section.

Now click on the “WPForms Settings” under the WPForms menu. You will see this screen when you click on the settings menu. There you need to click on the “CAPTCHA” tab, see the image below.

Screenshot 2021 01 19 184548

After you click on the “CAPTCHA” tab, here you will see WPForms has already by default selected Google’s reCAPTCHA, you just need to select “hCaptcha”, when you click on hCaptcha you will notice that, you need to add some “Site Key” and “Secret Key”. Don’t worry, you can Sign up for hCaptcha for free from their official website, so you can get both Site Key and Secret Key from the hCaptcha website. I have actually provided how to sign up for hCaptcha, and how to get Site Key and Secret Key, you can follow these steps in the second method.

After you successfully sign up and receive your hCaptcha Site Key and Secret Key, then you are now ready to go. Just enter your hCaptcha Site Key and Secret Key in the WPForms CAPTCHA settings, and click the save button. Just follow this image, it will look like this.

Screenshot 2021 01 19 191120

After you save your settings successfully, now return to WPForms “All Forms” section, and you’ll see here recently edited forms, which we have earlier discussed above. Just click on “edit”, it will take you to the WPForms forms editor section.

In my case I already have added the “Numbers field” in the form, now I just need to add “CAPTCHA”. Now click on the “hCaptcha” field in the “Standard Field” section in the WPForms editor, and you will see this type of pop-up message, that means hCaptcha has been enabled for your form, click ok on the pop-up message, and click on the Save button to save your updated form.

Now, you can publish this form anywhere within your post or pages by simply adding that form shortcode, or you can add this recently created form by using a short method like Block, when your writing anything in your post or pages and want to add form, just use this short tip: (/WPForms, and select the WPForms Block), you can see these below images:

Screenshot 2021 01 19 193146

After that, you will see this type of WPForms Block in your editor area, which will ask you to select your form name. From here, you need to select your form name, in my case I have a “Simple Contact Form”, which looks like this:

Screenshot 2021 01 19 193630

After selecting your form name, you will see another type of screen.

Screenshot 2021 01 19 194111
Before you preview or publish this hCaptcha enable WPForms

Now I know what you are thinking, why hCaptcha doesn’t show in the editor area, right? In your editor area, I mean your backend you don’t see the hCaptcha in the editor area, but it has already lived in the front end page because you already have configured hCaptcha in “WPForms settings”.

You can now see how WPForms and hCaptcha look like in the front end. In my case, I use preview mode, and I also recommended you to use preview mode before you publish anything, so anything goes wrong you can make some necessary changes, and once again preview it and publish it. So, check out how WPForms and hCaptcha look like in the front end, I mean when you preview or publishing it.

Screenshot 2021 01 19 195242
After you preview or publish this hCaptcha enable WPForms

Method 2: Add hCaptcha using a plugin

First, log in to your WordPress Admin area, then go to the plugins section or you can hover your mouse cursor on plugins and click on “Add New”. Then search for the “hCaptcha” plugin, here what it looks like in the image down below.

Please avoid any other plugin by showing the name hCaptcha in different names. You must check the original plugin author when you search for “hCaptcha”, here you can see the original one with the original author.

Once you found the hCaptcha plugin, then click on the Install Now button, and activate it. Once it’s activated it will be redirected to you in the plugins section.

Screenshot 2021 01 19 160020

As soon as you click on the hCaptcha settings button it will ask you to enter the site key and secret key, which you currently don’t have, just head over to hCaptcha.com, and sign up, it’s free. Make sure you must select the following option before you sign up.

Screenshot 2021 01 19 161224

You can sign up in three different ways using Github login credentials, or Google login credentials, or if you want to use both options then you can go with a third way, which will ask you to enter your email address. Just enter your email address and country, and then fill the captcha box, which is also powered by hCaptcha, and then click on the submit button. Once you submit your information, then it will directly open the hCaptcha dashboard for you automatically. Where you can see your Site Key, and Secret Key, as well as installation steps for different installations. It will look like this.

Screenshot 2021 01 19 162131
Your hCaptcha Dashboard

Then you need to add a new site in the hCaptcha dashboard, by clicking the “New Site” button on the top right corner, after you click on the “New Site” button, here you can add your website. Please note that you must only your domain name, not a full URL address, I mean you just need to enter a domain name like this: yourdomain.com, please do not enter like this: . Once you fill your domain successfully just click on the “Add new domain” button and click the save button on the top right corner.

Once you save your hCaptcha settings, then you need hCaptcha Site Key and Secret Key. You can easily find it in your hCaptcha Site Key and Secret Key right in your hCaptcha dashboard, just head over to the sites tab in the hCaptcha dashboard, there you will get hCaptcha Site Key, just copy and return to your WordPress Admin area and open hCaptcha setting, here you have to enter that Site Key, after that you need hCaptcha Secret Key, just go to the Settings tab in the hCaptcha dashboard from there you need to copy that Secret Key and paste it in hCaptcha Settings in WordPress Admin area.

If you don’t want to login hCaptcha website again and again to access your Site Key and Secret Key, just copy both hCaptcha Site Key and Secret Key and save it on your local computer or anywhere else where you can keep it secure.

After that, you can select a bunch of features where you can enable and disable the hCaptcha box on those things. In my case, I just tick on the “Enable hCaptcha on Jetpack Contact Form”.

For testing, you need to create any blank Page or Post, for just testing purposes. In my case, I will select Page. Here, I just create a new page and add a new registration form (this feature available in Jetpack, so here I will use one of those Jetpack features here), only for example purposes, but you can enable some extra features from hCaptcha settings.

When you correctly configured your hCaptcha settings, you can now see how it looks like in the backend and front end.

Screenshot 2021 01 19 170712
Screenshot 2021 01 19 171415

FTC: We receive compensation for purchases you made through our links at no extra cost to you, this will help us to keep our website running. You can read more from here. Note: The pricing and availability are accurate as of the time of publication but are subject to change in the future.

Join Our Weekly Newsletter

Enter your email address below to subscribe to our newsletter