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

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 3

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.