Personnaliser l'apparence de reCAPTCHA

Important: La version 1.0 de l'API reCAPTCHA n'est plus compatible. Veuillez passer à la version 2.0. En savoir plus

Une fois que vous avez installé reCAPTCHA sur votre site, vous pouvez modifier son apparence. Cette page explique: (1) comment choisir l'un des thèmes reCAPTCHA standards ; (2) comment personnaliser entièrement l'apparence de reCAPTCHA ; et (3) comment internationaliser reCAPTCHA en changeant la langue du widget.

Thèmes standards

Pour que le widget reCAPTCHA affiche un thème différent, vous devez d'abord ajouter le code suivant dans votre page HTML avant la balise <form> dans lequel reCAPTCHA apparaît (cela ne fonctionne pas si placé après le script principal où reCAPTCHA est appelé pour la première fois):

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

Pour utiliser un thème standard, vous devez remplacer 'theme_name' par l'un des quatre thèmes suivants noms:

'rouge' (thème par défaut)	'blanc'
"blackglass"	"Clean" (Nettoyer)

Thématisation personnalisée

Une thématisation personnalisée vous permet de contrôler exactement comment l'image reCAPTCHA s'affiche. Pour en savoir plus sur les thèmes personnalisés, cliquez ici. Pour utiliser thématisation personnalisée, vous devez d'abord définir la propriété de thème de RecaptchaOptions sur "custom". Ce indique à reCAPTCHA qu'il ne doit pas créer sa propre interface utilisateur. reCAPTCHA s'appuie sur la présence Éléments HTML avec les ID suivants pour présenter le CAPTCHA à l'utilisateur:

• Un élément div vide associé à l'ID recaptcha_image. C'est à ce niveau que l'image réelle sera placée. L'élément div fait 300 x 57 pixels.
• Saisie de texte dont l'ID et le nom sont tous deux définis sur recaptcha_response_field. C'est là que l'utilisateur peut saisissez sa réponse.
• Éventuellement, un tag div contenant l'intégralité du reCAPTCHA . Cet ID div doit être placé custom_theme_widget et le style de l'élément div doivent doit être définie sur display:none. Après le code de thématisation reCAPTCHA est entièrement chargé, il rendra le div visible. Cet élément évite ce qui fait clignoter la page pendant son chargement.

Pour mettre en œuvre tout cela, commencez par placer le code suivant dans votre page HTML principale avant la balise <form> où reCAPTCHA s'affiche:

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

Ensuite, dans l'élément <form> où vous souhaitez que reCAPTCHA s'affiche, placez :

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

Notez que les dernières lignes sont simplement la méthode standard pour afficher reCAPTCHA, expliqué dans l'introduction. de ce guide.

Voici ce qui se passe dans le code ci-dessus. L'objet JavaScript Recaptcha fournit des méthodes qui vous permettent de modifier l'état du CAPTCHA. La méthode reload affiche un nouveau test CAPTCHA. switch_type permet de basculer entre les CAPTCHA image et audio. Afin de créer une UI complète pour reCAPTCHA, afficher des informations différentes lorsque le CAPTCHA est dans différents états. Par exemple, lorsque l'utilisateur consulte un CAPTCHA image, un lien vers "Obtenir un CAPTCHA audio" s'affiche. Quatre classes CSS sont disponibles pour créer une UI avec état :

Classe CSS	Visible quand...
recaptcha_only_if_image	une image CAPTCHA s'affiche.
recaptcha_only_if_audio	un CAPTCHA audio s'affiche
recaptcha_only_if_incorrect_sol	la solution précédente était incorrecte
recaptcha_only_if_no_incorrect_sol	la solution précédente n'était pas incorrecte

Même si la thématisation vous offre de nombreuses options, vous devez respecter certaines règles de cohérence de l'interface utilisateur :

• Vous devez indiquer que vous utilisez reCAPTCHA à proximité du widget CAPTCHA.
• Vous devez fournir un bouton visible qui appelle la fonction d'actualisation.
• Vous devez permettre aux utilisateurs malvoyants d'accéder à un CAPTCHA audio.
• Vous devez fournir un texte alternatif pour toutes les images que vous utilisez comme boutons dans le widget reCAPTCHA.

Internationalisation: changement de la langue du widget

Il existe deux façons d'internationaliser le widget reCAPTCHA:

Traductions intégrées

reCAPTCHA propose un certain nombre de traductions intégrées. Pour les utiliser, définissez le paramètre "lang" RecaptchaOptions:

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

Traductions personnalisées

Si aucune traduction n'est disponible dans votre langue, vous pouvez en créer une. Vous devez traduire toutes les chaînes dans JavaScript reCAPTCHA et définir la valeur "custom_translations" de RecaptchaOptions. Toutes les chaînes que vous ne définissez pas seront extraites de la traduction par défaut de votre langue. Vous pouvez utiliser cette option pour remplacer uniquement une partie d'une traduction par défaut (par exemple, si la traduction que nous avons choisie ne convient pas à votre région). Exemple :

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

Voici un exemple pratique de traduction italienne personnalisée (placez ce code avant d'appeler 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>

Documentation de référence sur RecaptchaOptions

Les champs suivants peuvent être définis dans le dictionnaire RecaptchaOptions:

Clé	Valeurs possibles	Valeur par défaut :	Signification
thème	'rouge' | 'blanc' | "blackglass" (verre noir) | "Clean" (Nettoyer) | 'personnalisée'	'rouge'	Définit le thème à utiliser pour reCAPTCHA. Les thèmes rouge, blanc, noir et nettoyer sont des thèmes prédéfinis, où reCAPTCHA fournit l'interface utilisateur. Dans le thème personnalisé, votre site contrôle totalement l'apparence du reCAPTCHA.
langue	Tout code de langue compatible.	'fr'	La langue utilisée dans l'interface pour les valeurs prédéfinies thèmes. Les langues suivantes sont prises en charge: Langue Code Anglais en Néerlandais nl Français fr Allemand de Portugais pt Russe ru Espagnol es Turc tr Si la langue de votre site n'est pas compatible, vous pouvez toujours utiliser une thématisation personnalisée pour intégrer reCAPTCHA dans votre langue.
custom_translations	Un dictionnaire de traductions	null	Utilisez-le pour spécifier des traductions personnalisées de chaînes reCAPTCHA.
custom_theme_widget	Chaîne avec l'ID d'un élément DOM	null	Lorsque vous utilisez une thématisation personnalisée, il s'agit d'un élément div contenant le widget. Pour savoir comment l'utiliser, consultez la section sur la thématisation personnalisée.
tabindex	n'importe quel nombre entier	0	Définit un tabindex pour la zone de texte reCAPTCHA. Si d'autres éléments du formulaire utilisent un tabindex doit être défini afin de faciliter la navigation pour l'utilisateur.

Par exemple, cette balise de script attribue au reCAPTCHA un thème blanc et une tabulation 2:

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