How to Integrate Google reCAPTCHA with Contact Forms in Joomla - JoomShaper

How to Integrate Google reCAPTCHA with Contact Forms in Joomla

26 September 2019
Hits 56,907
5 min read
How to Integrate Google reCAPTCHA with Contact Forms in Joomla

Google reCAPTCHA is an effective security solution that protects your Joomla website from unwanted form submissions. Be that spam comments or account registrations (mostly from bots). In this tutorial, we will learn how to use Google reCAPTCHA (regular and invisible) for both Joomla default contact form and in SP Page Builder Contact Form addon. 

Before we start, we need to know that Joomla 3+ has built-in support for two versions of Google reCAPTCHA:

  • CAPTCHA - reCAPTCHA
  • CAPTCHA - Invisible reCAPTCHA

So, let's see how to implement this useful functionality on your Joomla site. 

Getting reCAPTCHA API Keys

To use Google reCAPTCHA v2 (or Invisible reCAPTCHA v3) on your Joomla website, you must register your domain with the reCAPTCHA API and get the Site Key & Secret Key. The API key pair is unique to each domain and first-level subdomains that you specify. These are free to get if you already have an account with Google. Click here to get your own reCAPTCHA API keys.

Here is a screenshot of the new site registration page for Google reCAPTCHA (click on the images to enlarge).

How to Integrate Google reCAPTCHA with Contact Forms in Joomla

Figure: Registering a new site with Google reCAPTCHA.

You need two pieces of information from Google reCAPTCHA site:

  • Site key
  • Secret key

How to Integrate Google reCAPTCHA with Contact Forms in Joomla

Figure: Copying the API Keys for Google reCAPTCHA.

Copy the keys by clicking on their respective buttons. Without these keys, reCAPTCHA will not work even if it's enabled.

Common Steps to Follow for Joomla Default Form and SP Page Builder Contact Form

You need to configure the following settings if you wish to use reCAPTCHA on your Joomla website. Here, we will configure the settings for our unique Site Key and Secret Key.  

  • Visit the Joomla Control Panel and navigate to Extensions > Plugins
  • Search and find the reCaptcha plugins
  • Click your desired reCAPTCHA type, for regular CAPTCHA, choose CAPTCHA - reCAPTCHA and for Invisible CAPTCHA, choose CAPTCHA - Invisible reCAPTCHA 
  • For CAPTCHA - reCAPTCHA plugin, choose version 2.0 and insert the Site Key & Secret Key, then set the plugin status as "Enabled"
  • Hit "Save & Close" when you are done

How to Integrate Google reCAPTCHA with Contact Forms in Joomla

Figure: Configuring the Joomla reCaptcha plugin.

Or, to use the latest Invisible reCAPTCHA on your site:

  • Choose CAPTCHA - Invisible reCAPTCHA from Extensions > Plugins
  • Open CAPTCHA - Invisible reCAPTCHA by clicking on it and put the Site Key and Secret Key to their respective fields 
  • Choose the position for the badge, where you want the reCAPTCHA badge to show and set the plugin status "Enabled"
  • Hit "Save & Close" when you are done

How to Integrate Google reCAPTCHA with Contact Forms in Joomla

Figure: Configuring the Joomla Invisible reCaptcha plugin.

How to Use reCAPTCHA in Joomla Contact Form

Now that all the preparations have been made, we can choose where to use which types of reCAPTCHA. For using reCAPTCHA in the default Joomla contact form, we need to define it globally for the entire site. 

  • Go to System > Global Configuration > Site Settings
  • In the field named "Default Captcha" choose "CAPTCHA-reCAPTCHA" for regular reCAPTCHA
  • Or, choose "CAPTCHA - Invisible reCAPTCHA" for invisible reCAPTCHA
  • Save settings.

How to Integrate Google reCAPTCHA with Contact Forms in Joomla

Figure: Setting reCAPTCHA as the default captcha globally in Joomla.

How to Use reCAPTCHA in SP Page Builder Contact Form Addon

The Contact Form addon of SP Page Builder Pro has Google reCAPTCHA support to reduce the number of spams and other types of automated abuses. To improve your defense, Google reCAPTCHA support is added to the SP Page Builder Contact Form addon so that you can use it for better spam protection. Both of the captcha systems (regular and invisible reCAPTCHA) are available to use.

You can enable reCAPTCHA for the Contact Form addon very easily considering you already have SP Page Builder Pro installed on your Joomla site. Once you have configured the Site and Secret key in the reCAPTCHA plugins (as stated above), then follow the steps below:

  1. Open an SP Page Builder page in editing mode
  2. Drag and drop the Contact Form addon on your desired area
  3. Find the "CAPTCHA OPTIONS" area and enable it
  4. Now from the "Captcha Type" choose your desired captcha type 
  5. For regular captcha, choose "CAPTCHA - reCAPTCHA" or for invisible captcha choose "CAPTCHA - Invisible reCAPTCHA"
  6. Save changes when you are done

Have a look at the following screencast for better understanding. 

Figure: Setting reCAPTCHA or Invisible reCAPTCHA in SP Page Builder Contact Form addon.

After completing the above steps, if you don't see a reCAPTCHA box on the contact form frontend, it means that your template uses the old contact addon code. In most cases, you can safely take a backup and then delete the (bold) folder: templates\YOUR-TEMPLATE-NAME\sppagebuilder\addons\ajax_contact

If you choose invisible reCAPTCHA for your website, you'll see a reCAPTCHA sign on your website (on the area you assigned during the plugin setup). The final output will look like the following. 

How to Integrate Google reCAPTCHA with Contact Forms in Joomla

Figure: Google reCAPTCHA in a contact form using SP Page Builder Contact Form addon.

Anti-Spam CAPTCHA in SP Page Builder

In SP Page Builder 3 you can use:

  • Google reCAPTCHA, or
  • Built-in Captcha

Which is better? It's not so easy to answer. We all know that Google reCAPTCHA is much more complicated, but there are also voices that it's breakable. On the other hand, built-in Captcha allows you to use your imagination for creating questions and their answers. You do not have to use simple math 3+4. Instead use questions related to the website topic, nature or real-life experience.

After configuring the settings correctly, you should be able to see reCAPTCHA at the areas of the website where the relevant form will appear. If you have any question about setting up the contact form (SP Page Builder addon based or the Joomla default one), feel free to leave a comment!

Experience SP Page Builder   Get SP Page Builder Pro

Note: This post was originally published on May 30, 2017. It has been updated on September 26, 2019, to include the latest technological changes.

Comments (15)

skidoo
skidoo
This comment was minimized by the moderator on the site

Not working with Joomla 3.8.2 and latest SP Page Builder version 3.0.3 and template REVIBE version 1.8.
In frontend editor the captcha box doesn't show up. I've tried to delete the ajax_contact folder but it messes up entirely with the page (multiple error due to missing files).

Paul Frankowski
Paul Frankowski    skidoo
This comment was minimized by the moderator on the site

We will check it, in meantime use Words CAPTCHA, you don't have to use 3+4 , just use words instead.

skidoo
skidoo    Paul Frankowski
This comment was minimized by the moderator on the site

you mean something like "what is the capital of Zimbabwe?"

Paul Frankowski
Paul Frankowski    skidoo
This comment was minimized by the moderator on the site

yes, exactly.

skidoo
skidoo    Paul Frankowski
This comment was minimized by the moderator on the site

btw Paul, would you be so kind as to have a quick look at this issue i've posted yesterday, i know support is technically closed weekends but the matter was honestly handled quite poorly by Rifat Wahid Alif and he left me not only without an answer but his solution messed up my front page with multiple bugs in site.php and on top of it he did a typo which even corrected still induces error messages.

I would be forever grateful if you could have a quick look at this matter which concerns THUMB SLIDER. My deadline to deliver this website to my client was by the end of this weekend and now...

btw Paul, would you be so kind as to have a quick look at this issue i've posted yesterday, i know support is technically closed weekends but the matter was honestly handled quite poorly by Rifat Wahid Alif and he left me not only without an answer but his solution messed up my front page with multiple bugs in site.php and on top of it he did a typo which even corrected still induces error messages.

I would be forever grateful if you could have a quick look at this matter which concerns THUMB SLIDER. My deadline to deliver this website to my client was by the end of this weekend and now i'm stuck

Many thanks in advance!

Read More
Paul Frankowski
Paul Frankowski    skidoo
This comment was minimized by the moderator on the site

Sorry, but your question request PHP knowledge. Only PHP developer can help you.

skidoo
skidoo    Paul Frankowski
This comment was minimized by the moderator on the site

i see. thanks anyway!

T
tristian
This comment was minimized by the moderator on the site

fantastic advice, it worked well for our site, thanks a lot!

Paul Frankowski
Paul Frankowski    tristian
This comment was minimized by the moderator on the site

Now you can make another step to happiness, order a membership.

R
Robert
This comment was minimized by the moderator on the site

Unfortunately it will be a problem it you want to use multiple forms on one page with recaptcha...

Paul Frankowski
Paul Frankowski    Robert
This comment was minimized by the moderator on the site

Yes, this part should be fixed soon. It's caused by Google policy, so small hack code is required.
Hopefully, on 2nd form you can use classic word captcha and ask about anything not only 2+3.

M
Manege
This comment was minimized by the moderator on the site

Hi!
I was effected too on 2 of my websites. Day by day I found 1 or 2 spam regsitrations.
No captcha/reCaptcha was able to detect spam regsitrations.

Searching for a solution I found a plugin called "OSpamAnot" which makes a nice trick.
It adds a hidden field to any form.
No real user can see it and of course no real user fills this field with data. But bots do. When the plugin finds data in this particular field it can be sure that it was not filled by a human.

I am rnning this plugin now for a couple of days and NOT ANY spam regsitrations.

Maybe this helps somebody!
Peter

J
joomleb
This comment was minimized by the moderator on the site

Hi guys,
be careful, you reversed the CAPTCHA versions:
To use Google reCAPTCHA v3 (or Invisible reCAPTCHA v2)

A
Andrew
This comment was minimized by the moderator on the site

Hey paul the article is really helpful but can you suggest any extension for google's invisible recaptcha V3.

Thanks in advance.

Paul Frankowski
Paul Frankowski    Andrew
This comment was minimized by the moderator on the site

First, it would be nice to get Joomla official plugin for it.
I agree that v3 is better than v2, I will talk with developers in next days

There are no comments posted here yet

Sign up for our newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.