Recaptcha - Personalizzazione modulo

Question

Qualcuno sa se il recaptcha può essere completamente personalizzato senza il frame predefinito. Ho bisogno che l'immagine del recaptcha sia solo una certa larghezza e anche il campo di input. Qualcuno l'ha già 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 per abbinare il 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à inserita nel recaptcha_image div, così si potrebbe limitare la sua larghezza usando i CSS in questo modo:

#recaptcha_image img { 
    width: 200px; 
} 

... ma tieni presente che ridimensionerà l'immagine più grande nel browser e potrebbe rendere illeggibile il captcha, quindi non lo consiglierei necessariamente. L'input recaptcha_response_field potrebbe anche essere in stile come preferisci.

Vedere la sezione "Aspetto e personalizzazione" sezione here per ulteriori esempi di ciò che è possibile (e dovrebbe) fare in un tema personalizzato.

Answer 2

È possibile creare un numero personalizzato theme che dovrebbe aiutarti con il campo di immissione, ma penso che tu non abbia fortuna con le dimensioni dell'immagine - è fissato a 300 x 57 (puoi ovviamente cambiare le dimensioni ma sarà risultato 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 la modifica delle dimensioni dell'immagine, quindi sembrerà tutto fuori luogo.

Answer 4

Tutto ciò che ho fatto è stato aggiornare gli stili reCAPTCHA.

Il seguente CSS modifica la larghezza e l'altezza dell'immagine e del contenitore. Le dimensioni sono originariamente definite da Google ma possono essere sovrascritte aggiungendo nuovi stili alla tua 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> 

Basta fare attenzione che quanto più piccola è l'immagine, tanto più difficile sarà la lettura da parte degli utenti.