Tassos Marinos Tassos Marinos Joomla Extensions

How to add reCAPTCHA to your Form

Published in Convert Forms
Updated 24 Sep, 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 CAPTCHA plugins to be enabled?

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

Why we did not rely on Joomla CAPTCHA plugins

While Joomla offers CAPTCHA plugins, we took a different approach to Convert Forms. We developed custom CAPTCHA integrations to ensure the best possible user experience and maintain complete control over form security.

Here's why building our own CAPTCHAs benefits you:

  • Faster Bug Fixes: Encountering a CAPTCHA issue? We can address it swiftly without relying on external developers or Joomla updates. This minimizes downtime and frustration for your users.
  • Optimized Performance: Our custom CAPTCHAs are built specifically for Convert Forms, leading to smoother operation than generic Joomla plugins.
  • Clear Ownership: If a CAPTCHA-related issue arises, you can be confident we take full responsibility for a swift resolution. Unlike relying on third-party plugins, where troubleshooting can be cumbersome, and finger-pointing can occur.

Troubleshooting

How to fix the "Please validate" error

When you see this error, it means that the form was submitted, but reCAPTCHA didn't get the chance to verify the user initially. In this case, you can re-try again or reload the page and re-try.

How to fix the "Couldn't validate submission. Invalid score." error

This error occurs only when using reCAPTCHA v3. The user score (automatically determined by reCAPTCHA v3 based on user interaction) doesn't pass the score threshold set within your reCAPTCHA v3 field settings. This means that reCAPTCHA thinks the user is a bot and they must try again later.

How to fix the "Couldn't validate submission. No score found" error

To resolve this particular error message, we need to ensure that both the reCAPTCHA v3 field as well as your reCAPTCHA v3 admin console is properly set up.

Whitelist your domain on your reCAPTCHA v3 settings

Within your Google reCAPTCHA admin console, in the reCAPTCHA v3 set of keys, you must whitelist your domain name. This helps Google identify your site and validate the reCAPTCHA field you've placed in your forms.

Set up your reCAPTCHA v3 settings

You must properly set up your reCAPTCHA v3 keys within Convert Forms. Click here to read more. 

Other reasons

While your form may throw this error, we've seen that it works for other users, so your issue may be related to your local environment. Google reCAPTCHA v3 validates the user based on their interaction on your site. We've seen a lot of false positives where Google may not allow a perfectly normal user who interacts with their site to submit their forms. Eventually, this error should go away.

Joomla 3

If you're using Joomla 3, and reCAPTCHA v3, you've probably seen 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 caused by an outdated Mootools library bundled with Joomla 3, 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.

To confirm this, simply do a search for version:"1.4.5," and it should find one match. That confirms that MooTools is the culprit.

How to resolve this issue

Method #1: Download the Mootools Enabler/Disabler extension

Once you install this extension, you can edit the respective plugin and disable the MooTools assets.

Method #2: Manually update the assets

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.