Friday, October 16, 2009

Customize ReCaptcha theme

ReCaptcha is a widely use Captcha generation web service which is owned by Google. Yesterday I had the opportunity to use ReCaptcha for one of my project. But there was a problem. Since ReCaptcha is generated to a certain style, width and height using a webservice request, it was hard to put it into the design of the form which I was trying to integrate ReCaptcha.
But finally I could solve the problem using some tricks. This is how I did it.
For using ReCaptcha, first you have to create an account ( account and service is free) in and generate a public key and a private key for accessing ReCaptcha web service. You can choose two option when generating those keys, default is generated keys can only be used in provided ( when generating keys) web site. Other one is you can use generated keys in any server and you have to select the checkbox saying some global key enabling ( I can't remember it) for using this second option.
Then download the ReCaptcha library. It contains recaptchalib.php files and an example page. What do you want is recaptchalib.php. To use recaptcha, add following php codes in to the top of your php page.

$publickey = "your_public_key"; // get this from the signup page
$privatekey = "your_private_key";// get this from the signup page

Since you are looking for custom theme for ReCaptcha, add this javascript code to head section of the your php page.

<script type= "text/javascript">

var RecaptchaOptions = {
theme: 'custom',
lang: 'en',
custom_theme_widget: 'recaptcha_widget'


Value of "custom_theme_widget" which is 'recaptcha_widget' in above code is the name of the div which your recaptcha gadget will put into.
Then add a div with the above mentioned id 'recaptcha_widget' in to the place where you need your recaptcha. All other recaptcha related divs will reside in this created div. Add another div named 'recaptcha_image' inside 'recaptcha_widget' for holding the recaptcha image. You also need to add a input text field named 'recaptcha_response_field' for typing the letters in the captcha image. There are lot of other things you can put as your requirements as a link for audio recaptcha, for error messages, for refreshing recaptcha etc, and I'm not going to put all those things in my example. In addition to that, you also have to put code for getting recaptcha with your publick key (two parts of code, if javascript is disabled, there is an iframe to include).

So this is the code I finally got as ReCaptcha widget,
<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 id="recaptcha_response_field" name="recaptcha_response_field" type="text">
<strong style="font-size: 10px;"><a href="javascript:void(0);">Get another CAPTCHA</a></strong>

<!--div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div><br />
<div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div><br /><br />
<div><a href="javascript:Recaptcha.showhelp()">Help</a><br />

<script type="text/javascript" src="<?php echo $publickey;?>&lang=en"></script>

<iframe src="<?php echo $publickey;?>&lang=en" height="200" 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'">


I commented out some fields I did not want to use in this code. After coding to this point, there was another problem came. That is the image generated by ReCaptcha is a standarad size of 300px X 57px. By adding a little css code, I could change the size of the recaptcha image as I wanted. I added following CSS code into the head section ( between head tags) of my php page.

<style type="text/css">
div#recaptcha_image > img{

This is the final output of the code.



Tech said...


For leveraging traffic from the internet, I have manually collected a list of quality blogs and sites with whom I am interested in getting associated.

I liked your Site/blog and i'm interested in having my blog's text link in your blog roll or Friends Section.

To process this link exchange please place my blog on your home page using the
below info

Title: Multithreaded TCP Proxy Tunnel


And send me your link info with confirmation of my link so that I could place
you link on my blog. We will make link back to you on our home page (PR 5).

I hope I will hear from you as soon as possible.

MaNJuLA said...

ok, that's great. I added you to the Tech Links section in my blog.

parveen said...

Sir i tried your code all things work well but size of image is not changing.
i tried to place style tag in head
but its 300px its not changing.
when i view page source then it shows style tag in head.but its not working. when i change the width using firebug then it appears ok
please help

Marcus said...

Works alright, but the "Get another CAPTCHA" link is not working. Seems like an id should be set somewhere, right?

Fratyr said...

pretty bad and messed example.
code is not enclosed in any mark or quotes, hard to read.
no good explanation on how to make your recaptcha smaller etc..
Please change :)

Ron Blaise said...

Seems as if you forgot "Recaptcha.reload();" to get the New Captcha Code.

andrew siddle said...

Nice job... i have been looking for good Captcha Code i think i found it.....

Eek said...

Yes the reload is broken, change this:

href="javascript:void(0);">Get another CAPTCHA

to this

href="javascript:Recaptcha.reload()">Get another CAPTCHA