How to add Google’s “No CAPTCHA reCAPTCHA” to Your Website

It is an easy assumption to think that most people are building websites in WordPress and have access to thousands of plugins but this statement is not necessarily true.  I know, I know, 30% of websites are powered by WordPress and out of the sites that are using CMS in general, 75% are using WordPress.  But what happens when you still support an older HTML website or a CMS that is not as powerful, robust, or supported as our beloved WordPress?  How will you install CAPTCHA?  In this article, I will show you a quick way to set up the now standard and lovely Google no CAPTCHA reCAPTCHA script.

What is CAPTCHA?

CAPTCHA is that really annoying thing that is on about 1/4 of the websites we visit each day located near the submit button for a form.  The CAPTCHA requires you to type what you see in a box or add two numbers together and type the result.  Most people are frustrated by this technology while others understand the value (to cut down on spam).

So, what is the no CAPTCHA reCAPTCHA?  In 2014, Googles own developers came up with an even better solution to help cut down on the frustration and hatred toward the CAPTCHA.  You will recognize this as the “are you a robot” message that you are starting to see more and more on websites.  By checking the box, you have taken a ‘human’ action (thought process) and are therefore not a bot (robot).

To setup your own reCAPTCHA, it is pretty painless.

How to set up reCAPTCHA

STEP 1:

You will need an API key to talk to the Google API.  To create an API key for your domain, go here –  https://www.google.com/recaptcha/admin   Login using your Google account (if you have more than one, you probably want to use the same one that you use for GA to be consistent) and then add your domain.   At the top of this page you will see “Your reCAPTCHA sites”.  Below this list is a form to add your domain to the list.

STEP 2:

You will not be provided with your SITE KEY and your SECRET KEY.  Log and save these to a safe area.

STEP 3:

There are two snippets of code that you will use to make this function work.  The first snippet should go directly before the </head> code on the page that you have a login or form on where you will be using the reCAPTCHA.

The second snippet should go in your code directly above the submit button for your form.

Save.  You will now see the reCAPTCHA in all of its beautiful glory positioned above the submit button.

 

By adding reCAPTCHA to your site, you have saved yourself a ton of time!  You will not have to sift through piles of spam mail that come through your site and it may even protect you against bots attempting to login or attack your website if used on a login form.