Personalizzazione Form - Recaptcha

Question

Qualcuno sa se recaptcha possibile personalizzare completamente senza la cornice di default. Ho bisogno l'immagine recaptcha essere solo una certa larghezza, nonché il campo di immissione. Qualcuno ha fatto prima con successo.

Answer 1

È possibile specificare markup personalizzato utilizzando l'opzione tema 'personalizzato' includendo qualcosa di simile nella tua pagina:

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

È quindi creare un div sulla pagina in modo che corrisponda alla custom_theme_widget id in questo modo:

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

L'immagine verrà inserito nel div recaptcha_image, così si potrebbe limitare la sua larghezza usando i CSS in questo modo:

#recaptcha_image img {
    width: 200px;
}

... ma di tenere presente che si ridimensiona l'immagine più grande nel browser e può causare il captcha di diventare illeggibile, quindi non necessariamente raccomandare che. L'ingresso recaptcha_response_field potrebbe anche essere designato come più vi piace.

Vedere la "look and feel di personalizzazione" sezione qui per ulteriori esempi di ciò che si può fare (e dovrebbe) in un tema personalizzato.

Answer 2

È possibile creare un tema personalizzato che dovrebbe aiutare con il campo di immissione, ma penso che tu sei fuori di fortuna con la dimensione dell'immagine - è fissato a 300 x 57 (si può ovviamente modificare le dimensioni, ma che si tradurrà in un ancora più distorta, e molto probabilmente completamente illeggibile, immagine)

Answer 3

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

questo funziona per Firefox, anche se non sono sicuro di altri browser, se ne avete bisogno di lavorare in IE6 non credo che accetta immagine css cambio formato, in modo da sembrerà tutto fuori luogo.

Answer 4

Tutto quello che ho fatto è stato di aggiornamento degli stili reCAPTCHA.

Il seguente CSS cambia la larghezza e l'altezza dell'immagine e del contenitore. Le dimensioni sono originariamente definite da Google, ma possono essere sovrascritti con l'aggiunta di nuovi stili per la vostra pagina.

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

Fate attenzione che la più piccola l'immagine, più difficile sarà per gli utenti di leggere.