Questa pagina è stata tradotta dall'API Cloud Translation.

Personalizzazione dell'aspetto di reCAPTCHA

Importante: la versione 1.0 dell'API reCAPTCHA non è più supportata, esegui l'upgrade alla versione 2.0. Scopri di più

Dopo aver installato correttamente reCAPTCHA sul tuo sito, potresti voler modificare l'aspetto. Questa pagina spiega: (1) come scegliere uno dei temi reCAPTCHA standard; (2) come personalizzare completamente l'aspetto di reCAPTCHA; e (3) come internazionalizzare reCAPTCHA modificando la lingua del widget.

Temi standard

Per fare in modo che il widget reCAPTCHA mostri un tema diverso, devi prima aggiungere il seguente codice nella tua pagina HTML principale in qualsiasi punto prima dell'elemento <form> in cui viene visualizzato reCAPTCHA (questa operazione non funziona se viene inserito dopo lo script principale in cui viene richiamato reCAPTCHA):

 <script type="text/javascript">
 var RecaptchaOptions = {
    theme : 'theme_name'
 };
 </script>

Per utilizzare un tema standard, devi sostituire 'theme_name' con uno dei seguenti quattro nomi di tema:

"red" (tema predefinito)	'bianco'

"blackglass"	"pulito"

Temi personalizzati

I temi personalizzati consentono di controllare esattamente come apparirà l'immagine reCAPTCHA. Qui puoi vedere una demo dei temi personalizzati. Per utilizzare i temi personalizzati, devi prima impostare la proprietà del tema di RecaptchaOptions su "custom". Questo indica a reCAPTCHA che non deve creare un'interfaccia utente propria. reCAPTCHA si baserà sulla presenza di elementi HTML con i seguenti ID per mostrare il CAPTCHA all'utente:

Un div vuoto con ID recaptcha_image. È qui che verrà posizionata l'immagine effettiva. Il tag div sarà di 300 x 57 pixel.
Un input di testo con ID e nome entrambi impostati su recaptcha_response_field. Qui l'utente può inserire la risposta.
Facoltativamente, un div che contiene l'intero widget reCAPTCHA. Questo div ID deve essere inserito all'interno dell'elemento custom_theme_widget e lo stile del div deve essere impostato su display:none. Una volta caricato completamente il codice dei temi reCAPTCHA, il div sarà visibile. Questo elemento evita lo sfarfallio della pagina durante il caricamento.

Per implementare tutto questo, devi prima inserire il seguente codice nella tua pagina HTML principale in qualsiasi punto prima dell'elemento <form> dove appare reCAPTCHA:

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

Quindi, all'interno dell'elemento <form> in cui vuoi che venga visualizzato reCAPTCHA, inserisci:

 <div id="recaptcha_widget" style="display:none">

   <div id="recaptcha_image"></div>
   <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

   <span class="recaptcha_only_if_image">Enter the words above:</span>
   <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

   <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

   <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
   <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
   <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

   <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

 </div>

 <script type="text/javascript"
    src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
 </script>
 <noscript>
   <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
        height="300" width="500" frameborder="0"></iframe><br>
   <textarea name="recaptcha_challenge_field" rows="3" cols="40">
   </textarea>
   <input type="hidden" name="recaptcha_response_field"
        value="manual_challenge">
 </noscript>

Tieni presente che le ultime righe sono semplicemente il modo standard per visualizzare reCAPTCHA descritto nell'introduzione di questa guida.

Ecco cosa succede nel codice riportato sopra. L'oggetto JavaScript reCAPTCHA fornisce metodi che consentono di modificare lo stato del CAPTCHA. Il metodo reload mostra un nuovo test CAPTCHA, mentre il metodo switch_type alterna CAPTCHA con immagini e audio. Per creare un'interfaccia utente completa per reCAPTCHA, mostriamo informazioni diverse quando il CAPTCHA è in stati diversi. Ad esempio, quando l'utente visualizza un CAPTCHA immagine, viene mostrato un link "Ottieni un CAPTCHA audio". Sono disponibili quattro classi CSS per creare un'interfaccia utente stateful:

Classe CSS	Visibile quando...
`recaptcha_only_if_image`	viene visualizzata un'immagine CAPTCHA
`recaptcha_only_if_audio`	viene visualizzato un CAPTCHA audio
`recaptcha_only_if_incorrect_sol`	la soluzione precedente non era corretta
`recaptcha_only_if_no_incorrect_sol`	la soluzione precedente non era errata

Sebbene offrano molte opzioni, devi seguire alcune regole di coerenza dell'interfaccia utente:

Devi indicare che stai utilizzando reCAPTCHA accanto al widget CAPTCHA.
Devi fornire un pulsante visibile che richiami la funzione di ricaricamento.
Devi fornire agli utenti con disabilità visiva un modo per accedere a un CAPTCHA audio.
Devi fornire un testo alternativo per tutte le immagini che utilizzi come pulsanti nel widget reCAPTCHA.

Internazionalizzazione: modifica della lingua del widget

Esistono due modi per internazionalizzare il widget reCAPTCHA:

Traduzioni integrate

reCAPTCHA ha diverse traduzioni integrate. Puoi utilizzarle impostando il parametro lingua dell'elemento RecaptchaOptions:

<script type="text/javascript">
var RecaptchaOptions = {
   lang : 'fr',
};
</script>

Traduzioni personalizzate

Se non è disponibile una traduzione per la tua lingua, puoi crearne una personalizzata. Devi tradurre tutte le stringhe nel JavaScript di reCAPTCHA e impostare la variabile "custom_translations" di reCAPTCHAOptions. Tutte le stringhe che non imposti verranno recuperate dalla traduzione predefinita per la tua lingua. Puoi utilizzarlo per sostituire solo una parte di una traduzione predefinita (ad esempio, se la traduzione scelta non rispetta la tua area geografica). Ad esempio:

<script type= "text/javascript">
var RecaptchaOptions = {
   custom_translations : { instructions_visual : "This is my text:" }
};
</script>

Ecco un esempio funzionante di traduzione italiana personalizzata (inserisci questo codice prima di chiamare reCAPTCHA):

<script type="text/javascript">
        var RecaptchaOptions = {
                custom_translations : {
                        instructions_visual : "Scrivi le due parole:",
                        instructions_audio : "Trascrivi ci\u00f2 che senti:",
                        play_again : "Riascolta la traccia audio",
                        cant_hear_this : "Scarica la traccia in formato MP3",
                        visual_challenge : "Modalit\u00e0 visiva",
                        audio_challenge : "Modalit\u00e0 auditiva",
                        refresh_btn : "Chiedi due nuove parole",
                        help_btn : "Aiuto",
                        incorrect_try_again : "Scorretto. Riprova.",
                },
                lang : 'it', // Unavailable while writing this code (just for audio challenge)
                theme : 'red' // Make sure there is no trailing ',' at the end of the RecaptchaOptions dictionary
        };
</script>

Riferimento reCAPTCHAOptions

I seguenti campi possono essere impostati nel dizionario reCAPTCHAOptions:

Chiave

Valori possibili

Valore predefinito

Significato

tema

'rosso' | 'bianco' | 'blackglass' | 'pulito' | 'personalizzato'

'rosso'

Definisce il tema da utilizzare per reCAPTCHA. I temi rosso, bianco, blackglass e pulito sono temi predefiniti in cui reCAPTCHA fornisce l'interfaccia utente. Nel tema personalizzato, il tuo sito ha il controllo completo dell'aspetto di reCAPTCHA.

lang

Qualsiasi codice lingua supportato.

'it'

La lingua utilizzata nell'interfaccia per i temi predefiniti. Sono supportate le seguenti lingue:

linguaggio	Codice
Inglese	inglese
Olandese	nl
Francese	fr
Tedesco	de
Portoghese	pt
Russo	ru
Spagnolo	es
Turco	tr

Se la lingua del tuo sito non è supportata, puoi sempre utilizzare i temi personalizzati per inserire reCAPTCHA nella tua lingua.

custom_translations

Un dizionario di traduzioni

null

Utilizzalo per specificare traduzioni personalizzate delle stringhe reCAPTCHA.

custom_theme_widget

Una stringa con l'ID di un elemento DOM

null

Quando utilizzi i temi personalizzati, si tratta di un elemento div che contiene il widget. Per informazioni su come utilizzare questa funzionalità, consulta la sezione relativa ai temi personalizzati.

indice tabulazione

qualsiasi numero intero

Imposta un tabindex per la casella di testo reCAPTCHA. Se altri elementi del modulo utilizzano un indice Tab, questo deve essere impostato in modo che la navigazione sia più facile per l'utente.

Ad esempio, questo tag script imposta un tema bianco e un indice tabulato per il reCAPTCHA 2:

<script>
var RecaptchaOptions = {
   theme : 'white',
   tabindex : 2
};
</script>