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).

Figure: Registering a new site with Google reCAPTCHA.

You need two pieces of information from Google reCAPTCHA site:

• Site key
• Secret key

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

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

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.

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. 

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.