Snippets, Tutorials

Customising reCAPTCHA Theme

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

11 thoughts on “Customising reCAPTCHA Theme

  1. Thanks – it works great!

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

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

  4. 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~

  5. Thanks for sharing, scott.

  6. 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?

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

  8. 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??

Comments are closed.

Twitter
LinkedIn
YouTube
Instagram