Recaptcha - Form Customization

Question

Does anyone know if recaptcha can be fully customize without the default frame. I need the recaptcha image to only be a certain width as well as the input field. Has anyone done this before with success.

Answer 1

You can specify custom markup using the 'custom' theme option by including something like this on your page:

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

You then create a div on the page to match the custom_theme_widget id like this:

<div id="recaptcha_widget">
    <div id="recaptcha_image"></div>
    <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />
</div>

The image will be inserted into the recaptcha_image div, so you could limit its width using CSS like this:

#recaptcha_image img {
    width: 200px;
}

...but keep in mind that it will resize the larger image in the browser and may cause the captcha to become unreadable, so I wouldn't necessarily recommend that. The recaptcha_response_field input could also be styled however you like.

See the "Look and Feel Customization" section here for more examples of what you can (and should) do in a custom theme.

Answer 2

You can create a custom theme that should help you with the input field, but I think you're out of luck with the image size - it's fixed at 300 x 57 (you can of course change the dimensions but that will result in an even more distorted, and quite possibly completely unreadable, image)

Answer 3

http://risingofsilversurfer.blogspot.com/2009/10/customize-recaptcha-theme.html

this works for firefox, though not sure about other browsers, if you need it to work in ie6 i don't think it accepts css image size changing, so it'll look all out of place.

Answer 4

All I did was update the reCAPTCHA styles.

The following CSS changes the width and height of the image and container. The dimensions are originally defined by Google but can be overwritten by adding new styles to your page.

<style type="text/css">
#recaptcha_image img{
    height:46px;
    width:230px;
    margin: 0px;
    padding: 0px;
}
#recaptcha_container {
    margin: 0px;
    padding: 0px;
    width: 230px;
}
</style>

Just beware that the smaller the image, the harder it will be for users to read.