So, you have a website with a contact form, did you do anything to protect it from spams and abuses? If the answer is "no", then look no further, we have a solution for you.

If you don’t know how to create a contact form (without having to reload the page) check out this article (because we will be showing how to add reCAPTCHA to this form). Again, we’ll be expecting that you already have a contact form. 

Why Google reCAPTCHA

You might want to use a regular self-hosted CAPTCHA system, but it's better to use Google reCAPTCHA in many ways, why? Because it provides state of the art protection from spam & abuse. It's very easy to use, your users won’t feel irritated and it will save your site from spammers at the same time.

The Step by Step guideline:

  • Registering for Google reCAPTCHA
  • Adding reCAPTCHA JavaScript API to HTML
  • Adding a 'Site Key' to the HTML form
  • Adding a 'Secret Key' to the PHP file.

Step 1: Registering for Google reCAPTCHA

First, you need to go to Google reCAPTCHA panel. Click on the blue “Get reCAPTCHA” button on the top. Give a label to your project. Then select the type of reCAPTCHA you want to use. reCAPTCHA v2 has proven to be more successful and accepted by the developer community. So we will go with that. On the “Domain” field add the domains you want to have reCAPTCHA. Since we are doing it on localhost, we will put “localhost” here (you can put the domain name of your site). Now, accept the reCAPTCHA Terms of Service and click on “Register”.

Once you’ve done that, you’ll be redirected to a page showing your site key, secret key, client side and server side integration process. If not then go to Google reCAPTCHA panel and click on your project name. 

Step 2: Adding reCAPTCHA JavaScript API to HTML

Now, you need to paste the JavaScript API inside the header tag of your html page. Have a look at the picture below.

Now paste it inside the header tag.

<script src='https://www.google.com/recaptcha/api.js'></script>

Step 3: Adding the 'Site Key' to the HTML form

Next thing would be declaring a div for Google reCAPTCHA. We will add it to the bottom of our form, just above the submit button. Copy the div code from reCAPTCHA panel.

Step 4: Adding the 'Secret Key' to the PHP file.

The primary work is done, now you need to add your secret key to your PHP code.

Adding just the secret key won’t take care of the job, we need to add validation to this process. To save you from trouble we’ve provided our code here. Click on the download button below. 

DOWNLOAD SOURCE CODE 

Now you need to do two things. First, in the “index.html” file, put your site key inside the div. Then, in the “mail.php” file, put the secret key in $secretKey variable, and change the destination email of $mail_to variable. Please note, since we put localhost as our domain name unless you put the project files to your htdocs folder, the reCAPTCHA won’t work. 

Important Note: In order to use Google reCAPTCHA you need to have SSL security enabled to your website. 

I hope following this way will keep your site safe from spam and abuse. If you find any difficulties understanding this article, just comment below. Thanks for being with ThemeHunt. Happy Coding :)