Recaptcha - Formulário de Customização

Question

Alguém sabe se recaptcha pode ser personalizar totalmente sem a moldura padrão. Eu preciso da imagem recaptcha ser apenas uma determinada largura, bem como o campo de entrada. Alguém já fez isso antes com sucesso.

Answer 1

Você pode especificar marcação usando a opção tema 'personalizado', incluindo algo como isto na sua página personalizada:

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

Você, então, criar um div na página para coincidir com o ID de custom_theme_widget assim:

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

A imagem será inserido no div recaptcha_image, assim que você poderia limitar sua largura usando CSS como este:

#recaptcha_image img {
    width: 200px;
}

... mas tenha em mente que ele irá redimensionar a imagem ampliada no navegador e pode fazer com que o captcha para se tornar ilegível, então eu não seria necessariamente recomendo isso. A entrada recaptcha_response_field também pode ser denominado como quiser.

Veja a seção "Aparência e Personalização" aqui para mais exemplos do que você pode (e deve) fazer em um tema personalizado.

Answer 2

Você pode criar um personalizado tema que devem ajudá-lo com o campo de entrada, mas acho que você está sem sorte com o tamanho da imagem - é fixado em 300 x 57 (você pode, naturalmente, alterar as dimensões, mas que irá resultar em uma distorção ainda mais, e possivelmente completamente ilegível, imagem)

Answer 3

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

Isso funciona para firefox, embora não tenho certeza sobre outros navegadores, se você precisar dele para trabalhar no IE6 eu não acho que ele aceita o tamanho da imagem css mudando, por isso vai olhar tudo fora do lugar.

Answer 4

Tudo o que fiz foi atualizar os estilos reCAPTCHA.

A seguir CSS muda a largura e altura da imagem e do recipiente. As dimensões são originalmente definidos pelo Google, mas pode ser substituído pela adição de novos estilos para sua página.

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

Só cuidado que quanto menor a imagem, o mais difícil será para os usuários a ler.