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