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 reCAPTCHA est installé sur votre site, vous souhaiterez peut-être en modifier l'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 modifiant 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 sur votre page HTML principale avant l'élément <form> où reCAPTCHA apparaît (cela ne fonctionnera pas s'il est 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 noms de thème suivants:

"red" (thème par défaut) 'blanc'
'blackglass' "propre"

Thématisation personnalisée

La thématisation personnalisée vous permet de contrôler précisément l'apparence de l'image reCAPTCHA. (Voici une démonstration de la thématisation personnalisée.) Pour utiliser un thème personnalisé, vous devez d'abord définir la propriété de thème de RecaptchaOptions sur "custom". Cela indique à reCAPTCHA qu'il ne doit pas créer sa propre interface utilisateur. Pour afficher le CAPTCHA à l'utilisateur, le service s'appuie sur la présence d'éléments HTML associés aux ID suivants:

  • Élément div vide avec l'ID recaptcha_image. Il s'agit de l'emplacement de l'image réelle. L'élément div fait 300 x 57 pixels.
  • Entrée de texte dont l'ID et le nom sont tous deux définis sur recaptcha_response_field. C'est ici que l'utilisateur peut saisir sa réponse.
  • Éventuellement, un élément div contenant l'intégralité du widget reCAPTCHA. Cet ID div doit être placé dans custom_theme_widget et son style doit être défini sur display:none. Une fois le code de thématisation reCAPTCHA entièrement chargé, l'élément div devient visible. Cet élément évite de faire clignoter la page pendant son chargement.

Pour implémenter tout cela, commencez par placer le code suivant sur votre page HTML principale avant l'élément <form> où reCAPTCHA apparaît:

 <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 représentent simplement la méthode standard d'affichage de reCAPTCHA, comme 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 CAPTCHA, et la méthode switch_type bascule entre les CAPTCHA image et audio. Afin de créer une interface utilisateur complète pour reCAPTCHA, nous affichons différentes informations lorsque le CAPTCHA est dans différents états. Par exemple, lorsque l'utilisateur visualise un captcha d'image, un lien "Obtenir un captcha audio" s'affiche. Quatre classes CSS sont disponibles pour créer une UI avec état:

Classe CSS Visible lorsque...
recaptcha_only_if_image une image CAPTCHA est affichée
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

Bien que la thématisation vous offre de nombreuses options, vous devez respecter quelques règles de cohérence de l'interface utilisateur:

  • Vous devez indiquer que vous utilisez reCAPTCHA à côté 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 en tant que boutons dans le widget reCAPTCHA.

Internationalisation: changer la langue du widget

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

Traductions intégrées

reCAPTCHA intègre un certain nombre de traductions. Vous pouvez les utiliser en définissant le paramètre lang de RecaptchaOptions:

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

Traductions personnalisées

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

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

Voici un exemple concret 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" | "verre noir" | "propre" | "personnalisé"
'rouge'
Définit le thème à utiliser pour reCAPTCHA. Les thèmes rouge, blanc, verre noir et propre sont des thèmes prédéfinis pour lesquels reCAPTCHA fournit l'interface utilisateur. Avec le thème personnalisé, votre site contrôle entièrement l'apparence de reCAPTCHA.
lang
Tout code de langue compatible. 'fr'
Langue utilisée dans l'interface pour les thèmes prédéfinis. Les langues suivantes sont prises en charge:
langageCode
Anglaisen
Néerlandaisnl
Françaisfr
Allemandde
Portugaispt
Russeru
Espagnoles
Turctr
Si la langue de votre site n'est pas prise en charge, vous pouvez toujours utiliser un thème personnalisé pour intégrer reCAPTCHA dans votre langue.
custom_translations Un dictionnaire de traductions null Permet de spécifier des traductions personnalisées de chaînes reCAPTCHA.
custom_theme_widget Chaîne comportant l'ID d'un élément DOM null Si vous utilisez une thématisation personnalisée, il s'agit d'un élément div qui contient le widget. Reportez-vous à la section sur la thématisation personnalisée pour savoir comment l'utiliser.
index tab
tout entier
0
Définit un tabindex pour la zone de texte reCAPTCHA. Si d'autres éléments du formulaire utilisent un index de tabulation, ce paramètre doit être défini pour faciliter la navigation pour l'utilisateur.

Par exemple, avec cette balise de script, le reCAPTCHA est associé à un thème blanc et à l'index de tabulation 2:

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