Web Development Blog

Web Development » Snippets, Tutorials » Customising reCAPTCHA Theme

23 Jul, 2009

Customising reCAPTCHA Theme    

I have been using reCAPTCHA a lot lately, but the default UI is not very intuitive nor pretty. Thanks to reCAPTCHA Wiki, I found out that you can customise the look and feel of reCAPTCHA using theme option. See below for my sample code.

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

<div id="recaptcha_container">
    <label for="recaptcha_response_field">Enter the two words below:</label>
    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" class="text" />
    <div id="recaptcha_image"></div>
    <p>Choose captcha format: <a href="javascript:Recaptcha.switch_type('image');">Image</a> or <a href="javascript:Recaptcha.switch_type('audio');">Audio</a> </p>
    <input type="button" id="recaptcha_reload_btn" value="Get new words" onclick="Recaptcha.reload();" />
</div>

<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=INSERT_KEY_HERE">
</script>

<noscript>
    <iframe src="http://api.recaptcha.net/noscript?k=INSERT_KEY_HERE"> 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>

Found this article useful? Share it with your friends:

Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.

Your name:   Your email:  

Other similar posts that you might be interested in:

• Creating a Contact Form in jQuery Mobile and PHP
• Clear default text in input boxes on click with jQuery
• Code to embed Google Map and Street View
• Store login information in cookie using jQuery
• Check username availability using AJAX and jQuery
• A new type of search engine in town – WolframAlpha
• Fieldset and Legend bug in IE8

11 Responses to “Customising reCAPTCHA Theme”

1. chris says:

   August 6, 2009 at 7:39 pm

   fantastic. worked perfect.
2. Paulo Gomes says:

   September 1, 2009 at 6:41 am

   Great and working with reCatpcha cakephp helper :)
3. Reed says:

   March 17, 2010 at 5:10 am

   Thanks – it works great!
4. Drew says:

   March 25, 2010 at 2:00 am

   Thanks very much for this.
5. Scott says:

   June 24, 2010 at 5:42 am

   Works Great, Thanks!
   One question though, If I wanted to change the size of the recaptcha box, how would one go about doing so.
6. eisabai says:

   June 24, 2010 at 10:27 am

   Hi Scott, you won’t be able to change the size of recaptcha image, but you can change the size of the input field via CSS.
7. scott says:

   June 30, 2010 at 6:01 am

   I actually figured out a way of doing it via CSS.

   Like everything else this took hours of researching and some tweaking. I figured I would share to pay back to all of those that have helped me when I’m stumped.

   Simple add this to your stylesheet:

   #recaptcha_image img { width: 276px; }

   Obviously you can change the width to whatever you want.

   ~cheers~
8. eisabai says:

   June 30, 2010 at 10:28 am

   Thanks for sharing, scott.
9. scott says:

   July 22, 2010 at 6:16 am

   hmmmmm, just the other day reCaptcha stopped working?

   Where the words are suppose to display it is now showing:

   Input error: Invalid referer

   Any ideas?
10. scott says:

    July 22, 2010 at 6:57 am

    I fixed the problem, not to sure what caused it. But simply setting up new API code and changing on necessary pages solved the issue….
11. Satyadeep says:

    November 7, 2010 at 7:24 am

    Hello, this tip was very useful.
    Its working fine on Firefox and Chrome, but on IE 6 in Win XP, it is saying errors on the page and then the captcha is not displayed.

    Any solution??