How to integrate Google reCAPTCHA with Joomla Contact Form

Google reCAPTCHA is a free service that protects your Joomla websites from spam and abuse. This tutorial is designed to guide you how to use Google reCAPTCHA (regular and invisible) for both Joomla built-in contact form and JSN PageBuilder 4 contact form element.

Before we start, we need to know that Google reCaptcha was added to Joomla since version 2.5. Till now, Joomla has supported two versions of Google reCAPTCHA:

• CAPTCHA - reCAPTCHA.
• CAPTCHA - Invisible reCAPTCHA (starting from Joomla version 3+).

So, let's start off with the easy step first.

Getting Google reCAPTCHA API Key

To use Google reCAPTCHA (reCAPTCHA v2 or invisible) on your Joomla website, the first thing you must do is to register your domain with Google reCAPTCHA and get Site key & Secret key. Since Google reCAPTCHA is a free server, you can totally get these if you have an account with Google. Click here to get your reCAPTCHA API key pair.

Below is the screenshot of the "Register a new site" step.

You will need to obtain two API keys:

• Site key.
• Secret key.

Set up Google reCAPTCHA for Joomla default contact form and JSN PageBuilder 4 contact form element

Following these common steps to integrate Google ReCaptCha on your Joomla Site.

• Log into your Website's Administrator and navigate to Extensions → Plugins.
• Search and find the reCaptcha plugins.
• Choose one of the reCAPTCHA types: CAPTCHA - reCAPTCHA or CAPTCHA - Invisible reCAPTCHA.

For CAPTCHA - reCAPTCHA

•  Choose version 2.0.
• Copy and paste the Site and Secret keys provided by Google reCAPTCHA.
• Set Status to Enabled.
• Click "Save & Close" when you are done.

For CAPTCHA - Invisible reCAPTCHA

• Copy and paste the Site and Secret keys provided by Google reCAPTCHA.
• Set Status to Enabled.
• Click "Save & Close" when you are done.
  

How to use Google reCaptcha in Joomla Contact Form and JSN PageBuilder 4 contact form element

For Joomla Contact Form

Now all the settings have been configured, it is time to use Google reCaptcha in Joomla Contact Form.

• Go to System → Global Configuration → Site tab.
• In the field named, Default Captcha, select CAPTCHA - reCAPTCHA or CAPTCHA - Invisible reCAPTCHA.
  
• Click on "Save & Close" button to save your changes.

• Next, navigate to Components → Contacts → Options → Form tab.
• Set the named field Allow Captcha on Contact to Use Global…
• Click "Save and Close" when you are done.

For JSN PageBuilder 4 Contact Form element

The Contact Form element of JSN PageBuilder 4 has Google reCaptcha support to prevent your Joomla form from unexpected form submissions.

It is so easy to enable Google reCaptcha for the Contact Form element. Once you have configured two API keys for Google reCaptcha plugins (regular or invisible as stated above), then follow these steps.

1. Open a built-in JSN PageBuilder 4 page in editing mode.
2. Drag & Drop the Contact Form element on your desired area.
3. Find the "Enable CaptCha" field and enable it.
4. At the named field "CaptCha Type", choose the type you desire.
5. Save changes when you are done.

Have a look at the following screenshots for better understanding.

After configuring the form correctly, Google reCaptcha with the form you have just configured should show up.

Conclusion

I hope that after reading this blog post, you can set up Google reCaptcha v2 and Invisible on your joomla site yourself. If you have any question regarding the contact form (Joomla form or JSN PageBuilder 4 form element), please free feel to leave your comments here.

TRY JSN PAGEBUIDLER 4 FOR FREE