Web Development Blog

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>

Other similiar posts that you might be interested in:

• 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
• 10 Website Optimisation Tips for Web 2.0 Websites