Saturday, March 12, 2011

Make reCAPTCHA Smaller

I don't recommend this solution BUT if it's your only option he's how to make reCAPTCHA smaller.

First you'll need to use a custom theme. Add the following before the form element:

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

Next add the HTML for the custom widget where you want it to show up inside the form.

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


 <script type="text/javascript"
   <iframe src=""
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   <input type="hidden" name="recaptcha_response_field"

This is standard code from the reCAPTCHA documentation up to this point. The trick I used to make the img and div tags smaller is to set the width in CSS with the !important flag. Add this CSS to your page.

    #recaptcha_image img 
        width: 200px !important;
        cursor: pointer;
    #recaptcha_image img:hover
        position: absolute;
        width: 300px !important;
        display: block;

This will make the reCAPTCHA fit in a space a little over 200px wide. I've added an img:hover style to make the image full size when the mouse rolls over it. The :hover style doesn't work on older browsers though so the next step would be to use jQuery to make the image bigger on hover or click. I'll leave that up to you to figure out. ;)