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.
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
- Add Checkbox reCAPTCHA v2
- Add Invisible reCAPTCHA v2
- Why you probably don’t need Google reCAPTCHA
- Frequently Asked Questions
- Troubleshooting
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.
After logging in, you will have to click on the + (Plus) button to register a 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.
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.
Add reCAPTCHA v3 Field to your form
In Joomla administration environment click on Global Configuration -> Convert Forms and click on the "reCAPTCHA" tab.
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.
Next, go to the main administration menu: Components -> Convert Forms and then click on Forms.
And choose the form you want to edit.
Choose the tab "Add Field" and click on the reCAPTCHA field in the Advanced Fields category. Save your work.
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.
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.
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.
After logging in, you will have to click on the + (Plus) button to register a 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.
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.
Add Checkbox reCAPTCHA Field to your form
In Joomla administration environment click on Global Configuration -> Convert Forms and click on the "reCAPTCHA" tab.
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.
Next, go to the main administration menu: Components -> Convert Forms -> Forms.
And choose the form you want to edit.
Choose the tab "Add Field" and click on the reCAPTCHA field in the Advanced Fields category. Save your work.
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.
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:
Finally, after all the changes save your work. Your reCAPTCHA field is ready!
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.
After logging in, you will have to click on the + (Plus) button to register a 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.
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.
Add Invisible reCAPTCHA Field to your form
In Joomla administration environment click on Global Configuration -> Convert Forms and click on the "reCAPTCHA" tab.
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.
Next, go to the main administration menu: Components -> Convert Forms -> Forms.
And choose the form you want to edit.
Choose the tab "Add Field" and click on the reCAPTCHA field in the Advanced Fields category. Save your work.
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.
reCAPTCHA v2 Invisible comes with the Inline, Bottom Right and Bottom Left badges as you can see in the screenshot below:
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
Mootools breaks reCAPTCHA
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:
- For MooTools core: https://mootools.net/core
- For MooTools more: https://mootools.net/more
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.
