Tassos Marinos Developer of Joomla Extensions

How to add reCAPTCHA to your Form

Published in Convert Forms
Updated 19 Jan, 2024

Needless to say how important the safety of your website is. The service that is widely known and combines security with ease of use is reCAPTCHA. It is a free service of Google that protects your website from spam and abuse. 

convert forms recapatcha how it works

reCAPTCHA is easy to use, but it is hard to be managed by automated malicious software. Convert Forms extension includes reCAPTCHA v2 (checkbox and invisible), and reCAPTCHA v3; you can configure it with just a few steps.

Add reCAPTCHA v3

The reCAPTCHA v3 differs from the v2 Checkbox and v2 Invisible by running in the background and generating a score based on the user's interaction within your site. The higher the score, the more likely the user is human.

Generate reCAPTCHA Keys

To generate the required keys, you will have to log into your Google account by visiting the Admin Console: https://www.google.com/recaptcha/intro/v3.html

Click on the v3 Admin Console button.

convert forms new recapatcha

After logging in, you will have to click on the + (Plus) button to register a new site.

convert forms recaptcha register new site

After clicking the + (Plus) icon you will be redirected to add a new Site and after you fill in all fields, you will be able to copy your API keys.

convert forms recaptcha invisible register new site

Completing the following fields, you will have the required keys that you need to include in your website so that you can enable the service.

  • Set your Site's Name in the Label field
  • Choose the "reCAPTCHA v3" option from the reCAPTCHA type
  • Add your domain name
  • Accept the reCAPTCHA Terms of Service
  • Click on the SUBMIT button

Your keys are ready! The Site key and the Secret key are what you need.

convert forms invisible recaptcha keys

Add reCAPTCHA v3 Field to your form

In Joomla administration environment click on Global Configuration -> Convert Forms and click on the "reCAPTCHA" tab.

convert forms recaptcha configuration add keys

Locate the "reCAPTCHA v3" section and type both your "Site key" and "Secret key" in the respective fields using the corresponding keys that Google has provided you. 

convert forms recaptcha configuration v3 set keys

Next, go to the main administration menu: Components -> Convert Forms and then click on Forms.

convert forms select forms

And choose the form you want to edit.

convert forms select a form

Choose the tab "Add Field" and click on the reCAPTCHA field in the Advanced Fields category. Save your work.

convert forms select recaptcha v2 invisible field

Subsequently, select the v3 reCAPTCHA version, and more options about appearance are given where you can optionally choose the reCAPTCHA badge in the field options.

convert forms recaptcha v2 invisible field settings

reCAPTCHA v3 comes with the Inline, and Bottom Right badges as you can see in the screenshot below:

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

convert forms v3 badge

Finally, after all the changes save your work. Your reCAPTCHA v3 field is ready!

Add Checkbox reCAPTCHA v2

The "I'm not a robot" Checkbox requires the user to click a checkbox indicating the user is not a robot. This will either pass the user immediately (with No CAPTCHA) or challenge them to validate whether or not they are human.

Generate reCAPTCHA Keys

To generate the required keys, you will have to login into your Google account by visiting the Admin Console: https://www.google.com/recaptcha/intro/v3.html

Click on the v3 Admin Console button.

convert forms new recapatcha

After logging in, you will have to click on the + (Plus) button to register a new site.

convert forms recaptcha register new site

After clicking the + (Plus) icon you will be redirected to add a new Site and after you fill in all fields, you will be able to copy your API keys.

convert forms recaptcha checkbox register new site

Completing the following fields, you will have the required keys that you need to include in your website so that you can enable the service.

  • Set your Site's Name in the Label field
  • Choose the reCAPTCHA v2 "Im not a robot" Checkbox from the reCAPTCHA type
  • Add your domain name
  • Accept the reCAPTCHA Terms of Service
  • Click on the SUBMIT button

Your keys are ready! The Site key and the Secret key are what you need.

convert forms checkbox recaptcha keys

Add Checkbox reCAPTCHA Field to your form

In Joomla administration environment click on Global Configuration -> Convert Forms and click on the "reCAPTCHA" tab.

convert forms recaptcha configuration add keys

Locate the "Checkbox reCAPTCHA v2" section and type both your "Site key" and "Secret key" in the respective fields using the corresponding keys that Google has provided you. 

convert forms recaptcha configuration v3 set keys

Next, go to the main administration menu: Components -> Convert Forms -> Forms.

convert forms select forms

And choose the form you want to edit.

convert forms select a form

Choose the tab "Add Field" and click on the reCAPTCHA field in the Advanced Fields category. Save your work.

convert forms select recaptcha field

Subsequently, you can select the reCAPTCHA version, in our case, v2 Checkbox, and more options about appearance are given where you can optionally choose the reCAPTCHA theme and size in the respective field options.

convert forms recaptcha field settings

reCAPTCHA v2 Checkbox comes with the Light and Dark themes and in a Normal and Compact size as you can see in the screenshot below:

convert forms recaptcha themes

Finally, after all the changes save your work. Your reCAPTCHA field is ready!

To improve performance and avoid duplicate script calls, Convert Forms, relies on the Joomla reCAPTCHA plugin scripts to render the reCAPTCHA widget.

Add Invisible reCAPTCHA v2

The invisible reCAPTCHA does not require the user to click on a checkbox, instead it may display a challenge to the user if it detects any spam behavior when a user submits your form.

Generate reCAPTCHA Keys

To generate the required keys, you will have to login into your Google account by visiting the Admin Console: https://www.google.com/recaptcha/intro/v3.html

Click on the v3 Admin Console button.

convert forms new recapatcha

After logging in, you will have to click on the + (Plus) button to register a new site.

convert forms recaptcha register new site

After clicking the + (Plus) icon you will be redirected to add a new Site and after you fill in all fields, you will be able to copy your API keys.

convert forms recaptcha invisible register new site

Completing the following fields, you will have the required keys that you need to include in your website so that you can enable the service.

  • Set your Site's Name in the Label field
  • Choose the reCAPTCHA v2 Invisible reCAPTCHA badge from the reCAPTCHA type
  • Add your domain name
  • Accept the reCAPTCHA Terms of Service
  • Click on the SUBMIT button

Your keys are ready! The Site key and the Secret key are what you need.

convert forms invisible recaptcha keys

Add Invisible reCAPTCHA Field to your form

In Joomla administration environment click on Global Configuration -> Convert Forms and click on the "reCAPTCHA" tab.

convert forms recaptcha configuration add keys

Locate the "reCAPTCHA v3" section and type both your "Site key" and "Secret key" in the respective fields using the corresponding keys that Google has provided you. 

convert forms recaptcha configuration v2 invisible set keys

Next, go to the main administration menu: Components -> Convert Forms -> Forms.

convert forms select forms

And choose the form you want to edit.

convert forms select a form

Choose the tab "Add Field" and click on the reCAPTCHA field in the Advanced Fields category. Save your work.

convert forms select recaptcha v2 invisible field

Subsequently, select the v2 Invisible reCAPTCHA version, and more options about appearance are given where you can optionally choose the reCAPTCHA badge in the field options.

convert forms recaptcha v2 invisible field settings

reCAPTCHA v2 Invisible comes with the Inline, Bottom Right and Bottom Left badges as you can see in the screenshot below:

convert forms recaptcha invisible badges

Finally, after all the changes save your work. Your reCAPTCHA Invisible field is ready!

Why you probably don’t need Google reCAPTCHA

Without you having to do a thing, Convert Forms is already protecting your forms from spam submissions. A honeypot field is automatically added to each form by default. It's designed to catch spammers in the same way an actual pot of honey would catch flies. It's just a hidden field placed into every form and it's purpose is to make form submission fail if anything is entered into it.

Read more here: Native Convert Forms Anti-spam Protection with Honeypot

Tips:

  • Don’t forget to store your keys.
  • Different versions of reCAPTCHA have different keys.

Frequently Asked Questions

Does this require the Joomla plugins "CAPTCHA - reCAPTCHA" or "CAPTCHA - Invisible reCAPTCHA" to be enabled?

Convert Forms reCAPTCHA fields do not require the Joomla core reCAPTCHA plugins to be enabled and configured.

Troubleshooting

Mootools breaks reCAPTCHA

If you're using Joomla 3, and reCAPTCHA v3, you probably see the error message "Couldn't validate submission. No score found." when your form is submitted. If you're using the reCAPTCHA v2 checkbox, it probably keeps spinning after checking it. You may find a similar behavior with reCAPTCHA v2 invisible.

All these issues are probably caused by an outdated Mootools library, called by a 3rd-party extension/plugin/module, conflicting with Google reCAPTCHA. You may ask, if your site has been using this library for a long time, why did this issue start now? Well, Google may have changed something in Google reCAPTCHA, which may have resulted in this issue.

To confirm that Mootools cause this, go to this URL: https://site.com/media/system/js/mootools-core.js. Replace site.com with your domain name. If the file exists, Mootools is installed, and it's most probably the culprit, as you should be running an outdated version such as 1.4.5.

How to resolve this issue

First of all, keep a backup of the following files:

  • /media/system/js/mootools-core.js
  • /media/system/js/mootools-more.js

Then, download the latest version of MooTools from here:

Finally, ensure the downloaded files have the same name as the existing ones and replace them with those in the directory /media/system/js/.

Your forms's reCAPTCHA field should now function properly.