Benjawi.

Google reCAPTCHA has become on of the most popular CAPTCHA's on the web and rightly so with it's seemingly unlimited choice of words along with an option to choose another or to hear the words spoken if you need any help reading it. But there's something even better about Google reCAPTCHA that, ever people don't know about or just ignore for various reasons, and that is that you can style it. There are 4 variants at the moment, but you also have the option to completely customise it yourself down to every detail bar how the words are displayed for you to type in.

If you want to make reCAPTCHA display a different theme to the standard, all you have to do is add the following code in your main HTML page anywhere before the <form> element where your reCAPTCHA appears. If this you place this after the main script where reCAPTCHA is invoked then this simply will not work. Just replace 'theme_name' with either 'red' (the default), 'white', 'blackglass' or 'clean'.

 <script type="text/javascript">
var RecaptchaOptions = {
    theme : 'theme_name'
};
</script>

And what do these results give you? Well, a reCAPTCHA that could suit your site better than the default red one.

'red' default theme	'white' theme
'blackglass' theme	'clean' theme

As well as the above three extra themes to go along with the default red, you can also make your own custom theme which is absolutely brilliant as you get a working CAPTCHA that can suit the style of your site and can also look unique. And Google are cool enough to let you know how you can do this. 

You can view a default custom reCAPTCHA here, all you need to do is style it yourself through CSS. In order to make use of this custom theming you must set the 'theme_name' above to 'custom' as this tells the reCAPTCHA that it doesn't need to use a user interface of it's own. Instead it will reply on the presence of HTML elements to display the CAPTCHA. 

• recaptcha_image is an empty div ID where the actual image will be placed. The div will be 300x57 pixels.
• recaptcha_response_field is a text input ID where the user will enter their answer.
• Optionally, you can use a div which contains the entire reCAPTCHA widget. This ID should be placed into the custom_theme_widget and the style of the div should be set to display:none. After the reCAPTCHA theming code has fully loaded, it will make the div visible. This element avoids making the page flicker while it loads.

As before, you need to add the below code anywhere in your HTML before the <form> element where the reCAPTCHA begins.

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

 

Then, inside the <form> element where you want reCAPTCHA to appear, place the below code:

 <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</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <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>

<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>

Notice that you have an recaptcha_only_if_image & recaptcha_only_if_audio. One of these are loaded depending on which option the user chooses to have the CAPTHCA read to them, either visibly or verbally. All of the classes are nicely labeled up for you so that you know what they do, just don't rename them else the code that Google pulls in won't recognise it and your reCAPTCHA won't function as it should.

Please take note though that while theming does give you many options, you need to follow some user interface consistency rules:

• You must state that you are using reCAPTCHA near the CAPTCHA widget.
• You must provide a visible button that calls the reload function.
• You must provide a way for visually impaired users to access an audio CAPTCHA.
• You must provide alt text for any images that you use as buttons in the reCAPTCHA widget.