How to install Google’s noCaptcha reCaptcha

24 Oct How to install Google’s noCaptcha reCaptcha

If you are using a CMS like WordPress there are many contact form plugins in which you may only need to enter the keys to activate.  The beginning of this post will show you how to create the required keys.  The second part is aimed at more experienced web developers who are experienced in web programming languages including php, html, and javascript.

To install the noCaptcha reCaptcha you first need to create your keys.  Go to Google’s reCaptcha manager by clicking here.  Sign in to your Google account and you will be taken to Google’s reCaptcha page.  If you don’t have a Google account you will need to create one.

recapt

In the upper right corner of the page there will be a blue button called ‘Get reCAPTCHA’ click on it.


formcaptcha

On this page is a form with the heading ‘Register a new site”.  Fill this form in with the label and domain name for the site you want to add a reCaptcha to.  The label is used for your personal identification purposes. If you have multiple sites you will want to make this something identifiable.  I suggest using a combination of the domain name and what the reCaptcha is used for, ex. domain.com:contact. Since you can assign multiple domains to the same key pair you may want to call it something else that identifies the group of domains more clearly.

When you submit this form you will be brought to a page that contains your keys.  There are two keys provided. The keys shown here are development keys provided by Google for testing purposes. They will always produce a ‘no CAPTCHA’.

Secret key: Keep to yourself and do not put on your website.
                        ex. 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

Site key:      Put on your site and is served to users.
                         ex. 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI  

Setting up the reCaptcha on your website is a two step process.  There is client side code that you will add to your page and there is server side code that you will need to implement.  We will  create a javascript file and a php file that with handle our ajax request to check the reCAPTCHA and process the entered form data.

Client Side:

For the client side there are two code snippets that you must add.  Before the closing </head> tag you will need to add:

The second code snippet must be added at the end of the near the end of the form where you want the reCaptcha field to display, but before the </form> tag.

Here they are together on a very simple form.  Keep in mind that the data-sitekey value is the Site key you got from Google. The one shown here is Google’s development key.

As this form sits there is no connection between the reCAPTCHA and the form being submitted. To make this happen we are going to have to add a few more lines of code.  First we will add jQuery to the page linked from googles CDN.

Now it is time to create the javascript file.  My file is called submit.js.  Because it allows the webpage to load faster we will also include this file on our form page in the footer like this:

We are going to use ajax to make the form submission. In this file we do a lot of things.  The first thing we do is attach a click event to the submit button on the form (line 3). By adding e.preventDefault() we stop the submit button from actually submitting the form (line 4) .  Instead we are going to use ajax to submit the form data (line 9).

I have utilized jQuery’s .serializeArray() but am using it inside the function serializeFormJSON() (line 5). By utilizing this jQuery plugin our form data is passed in an easily usable array. We simply add this code to the bottom of the submit.js file. Here is the code:

Next we will have to create the process.php file.  This file is where were I am sending the ajax request (line 9). Before we move on, lets take a look at the completed submit.js:

Server Side:

The process.php file contains the Secret key obtained from Google.  It takes the ajax post value for g-recaptcha-response field and the Secret key and sends them to Google. I am using the php function get_file_contents() to get this done.  Lines 8 through 11 and lines 18 through 34 are a simple mail script.  You should enter how you want your contact form processed here. You can save the data to the database as well as send mail.  Anything you want to have happen now that the form reCAPTCHA response has passed.

 

2 Comments
  • Anonymous
    Posted at 12:55h, 25 September

    cool

  • Ayujisujit
    Posted at 07:48h, 18 November

    domperidone breast feeding jack newman domperidone can a pregnant woman take cough medicine

Post A Comment