Responsive ReCAPTCHA – This Should Be Easy!

On my newest project my client wanted a ReCAPTCHA field tied to his contact form to limit spam. Because his site was coded responsively, the standard ReCAPTCHA wouldn’t be suitable for our needs. I thought this would be a quick fix, though the directions to interface with the ReCAPTCHA API were somewhat obtuse at first.

UPDATE: Google introduced ReCAPTCHA v2 in the time since this article was originally released. I am currently working on a new article to address the new way to display it responsively.

For the purposes of this article I’m going to assume you have already signed up for ReCAPTCHA and added the domain you’re working with to your sites.

In a rush? Skip down to the code section for a quick rundown or just download the files!

Without further ado, responsive ReCAPTCHA here we come!

What Is ReCAPTCHA?

Simply, ReCAPTCHA is Google’s implementation of the CAPTCHA system. The CAPTCHA system presents the end user with distorted text in the form of an image the user must input in order to verify they are indeed a human being.

ReCAPTCHA not only protects your site, but Google Books uses it to help digitize it’s ever growing library. That’s right, ReCAPTCHA does double duty in protecting your inbox and helping humanity build a digital library. Not too bad considering the price.

What’s Wrong with the Default ReCAPTCHA?

There are many things wrong with the default ReCAPTCHA. Its’ layout is table based, its’ skins are ugly and seldom fit with custom designs, and it doesn’t always work properly on mobile in its default configuration!

I’m as surprised as anyone that Google is still using this code, but I’m sure with the web moving more towards mobile each day we will see a new draft soon. In the meanwhile Google provides us the ReCAPTCHA API, and with a little clever coding we can coax responsive behavior out of this excellent little spam filtering script! Responsive ReCAPTCHA here we come!

Responsive ReCAPTCHA – HTML & Javascript

In order for us to display a custom theme for responsive ReCAPTCHA, we have to place the following code before our form element where the responsive ReCAPTCHA resides.

Responsive ReCAPTCHA – Before the Form Element


<script type="text/javascript">
    var RecaptchaOptions = {
    theme : 'custom',
    custom_theme_widget: 'recaptcha_widget'
    };
</script>

Let’s take a quick look at the code above. By setting the “theme: 'custom'” option, we are letting ReCAPTCHA know we will be handling the user interface for ReCAPTCHA input. The custom_theme_widget option allows us to give an id for the div that wraps the responsive ReCAPTCHA form code. To keep things simple I used the default id provided by the ReCAPTCHA API. Though it’s optional to have a wrapper, I prefer it.

Responsive ReCAPTCHA – Inside the Form Element


<div id="recaptcha_widget" style="display:none">

    <div id="recaptcha_image"></div>
    <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again<br /></div>

    <label for="recaptcha_response_field" class="recaptcha_only_if_image">Enter the words above:<br /></label>
    <label for="recaptcha_response_field" class="recaptcha_only_if_audio">Enter the numbers you hear:<br /></label>

    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

    <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
    <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
    <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

    <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>
    <div>Proudly using <a href="http://www.google.com/recaptcha" target="_blank">Google ReCAPTCHA</a></div>
</div>

<script type="text/javascript"
        src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
</script>
<noscript>
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key" height="300" width="500" frameborder="0"></iframe><br />
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>

Above is the code we place within the form where we want the actual ReCAPTCHA and response field to display. Nothing too fancy, but let’s go through it line by line anyhow to get a better sense of what will be happening for our responsive ReCAPTCHA.

Remember to change your_public_key in the code above to your ReCAPTCHA public key!

Responsive ReCAPTCHA – Breaking Down the Form Code

First let’s inspect our wrapper div that holds the entire ReCAPTCHA code.

<div id="recaptcha_widget" style="display:none">

Though it is optional, It helps keep your code clean and can be used for styling purposes. Feel free to change the id if you like, but make sure the custom_theme_widget in the script before the form is set to the same id you choose. The API demands a style="display: none;". Once the ReCAPTCHA contents are fully loaded the script will change the style to display. This is done to avoid page flicker.

<div id="recaptcha_image"></div>

Next, we have the div that actually hods the ReCAPTCHA image or audio. The id recaptcha_image is mandatory as that is what the script is looking for when it pulls a ReCAPTCHA from the database. The name is a little misleading, as it can hold an audio ReCAPTCHA or an image depending on user selection, but whatever they are using, the “puzzle” will appear here.

 <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again<br /></div>
<label for="recaptcha_response_field" class="recaptcha_only_if_image">Enter the words above:<br /></label>
<label for="recaptcha_response_field" class="recaptcha_only_if_audio">Enter the numbers you hear:<br /></label>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

Above we have our validation text if the user gives the wrong input, as well as the optional label for recaptcha_response_field depending on whether it’s an audio or visual ReCAPTCHA. This is followed by our response input box, where the user actually types the ReCAPTCHA code.

<div><a>Get another CAPTCHA</a></div>
<div class="recaptcha_only_if_image"><a>Get an audio CAPTCHA</a></div>
<div class="recaptcha_only_if_audio"><a>Get an image CAPTCHA</a></div>
<div><a>Help</a></div>
<div>Proudly using <a href="http://www.google.com/recaptcha" target="_blank">Google ReCAPTCHA</a></div>

We wrap our ReCAPTCHA buttons in a div. These buttons allow the user to get a new CAPTCHA, switch to an audio or image CAPTCHA depending on what is currently being shown, and a help button to explain how ReCAPTCHA works. These are all tied to their respective JavaScript functions.

ReCAPTCHA rules say we must state we are using ReCAPTCHA.

<script src="http://www.google.com/recaptcha/api/challenge?k=your_public_key" type="text/javascript">// <![CDATA[

// ]]></script><noscript>
    <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"     height="300" width="500" frameborder="0"></iframe>
    <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
    <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
</noscript>

Finally, we run a script from the ReCAPTCHA servers validated with our public key. If JavaScript is turned off a default ReCAPTCHA is displayed.

Responsive ReCAPTCHA – CSS

Now the fun stuff, our responsive CSS! For the purposes of the demo I have forced the max width of the form to 460 pixels if the view-port is larger than 480px, as stretching the recaptcha_challenge_image too wide can make it virtually illegible. Since the ReCAPTCHA is displayed in an iframe, we have to force our responsive styles with the !important declaration otherwise they will not be applied.

 <style>
        /* Make reCAPTCHA image responsive (override inline/embedded styles). */
        div#recaptcha_widget{width:100% !important;}
        form{width: 100%;}
        @media(min-width: 481px){
            form{
                min-width: 460px;
                max-width: 460px;
                margin: 0 auto;
            }
        }
        input, textarea{width :100%;}
        div#recaptcha_image{width:100% !important;height:auto !important;}
        div#recaptcha_image > img{width:100% !important;}
    </style>

Responsive ReCAPTCHA – Finalize Your Form

And there you have it, you should now have the backbone of a responsive ReCAPTCHA being displayed with div elements instead of tables. Simply add some more CSS styling to the code provided above to fit into your design and you’re off to the races!

ReCAPTCHA is a phenomenal tool for helping us limit spam on our websites and in our inboxes. Responsive ReCAPTCHA is virtually mandatory these days with more and more mobile devices being used as a primary browsing tool. Stop using the ugly table based ReCAPTCHA today! Responsive ReCAPTCHa is the way of the future – and the present!

One thought on “Responsive ReCAPTCHA – This Should Be Easy!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*