Personaliza el aspecto de reCAPTCHA

Importante: Ya no se admite la versión 1.0 de la API de reCAPTCHA. Actualiza a la versión 2.0. Más información

Una vez que hayas instalado reCAPTCHA correctamente en tu sitio, te recomendamos que cambies su apariencia. En esta página, se explica lo siguiente: (1) cómo elegir uno de los temas estándar de reCAPTCHA, (2) cómo personalizar por completo el aspecto de reCAPTCHA y (3) cómo internacionalizar reCAPTCHA cambiando el idioma del widget.

Temas estándar

Para que el widget de reCAPTCHA muestre un tema diferente, primero debes agregar el siguiente código en tu página HTML en cualquier lugar antes de la etiqueta <form> en el que aparece reCAPTCHA (esto no funcionará si colocado después de la secuencia de comandos principal en la que se invoca por primera vez reCAPTCHA):

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

Para usar un tema estándar, debes reemplazar 'theme_name' por uno de los siguientes cuatro temas nombres:

'roja' (tema predeterminado)	'white'
'blackglass'	"limpiar"

Temas personalizados

Los temas personalizados te permiten controlar exactamente cómo aparece la imagen de reCAPTCHA. (Aquí puedes ver una demostración de los temas personalizados). Para poder utilizar temas personalizados, primero debes establecer la propiedad del tema de RecaptchaOptions como "custom". Esta le indica a reCAPTCHA que no debe crear una interfaz de usuario propia. reCAPTCHA dependerá de la presencia Elementos HTML con los siguientes ID para mostrarle el CAPTCHA al usuario:

• Un elemento div vacío con el ID recaptcha_image. Aquí es donde se colocará la imagen real. El elemento div será de 300 x 57 píxeles.
• Una entrada de texto con el ID y el nombre establecidos en recaptcha_response_field Aquí es donde el usuario puede ingresar su respuesta.
• De manera opcional, un div que contiene todo el widget de reCAPTCHA. Este ID de división debe colocarse en custom_theme_widget, y el estilo del elemento div debe establecerse en display:none. Después del código de temas de reCAPTCHA se haya cargado por completo, el div será visible. Este elemento evita y hace que la página parpadee mientras se carga.

Para implementar todo esto, primero coloca el siguiente código en la página HTML principal, en cualquier lugar antes de la etiqueta <form> en el que aparece reCAPTCHA:

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

Luego, dentro de la etiqueta <form> elemento en el que deseas que aparezca reCAPTCHA, coloca lo siguiente:

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

Ten en cuenta que las últimas líneas son simplemente la forma estándar de mostrar reCAPTCHA que se explica en la introducción de esta guía.

Esto es lo que sucede en el código anterior. El objeto JavaScript de reCAPTCHA proporciona métodos que te permiten hacer lo siguiente: cambiar el estado del CAPTCHA. El método reload muestra un nuevo desafío de CAPTCHA, y el método switch_type alterna entre CAPTCHA de imagen y audio. Para crear una IU completa para reCAPTCHA, mostrar información diferente cuando el CAPTCHA se encuentre en diferentes estados. Por ejemplo, cuando el usuario ve un CAPTCHA de imagen, un vínculo para "Obtener un CAPTCHA de audio" . Hay cuatro clases de CSS disponibles para crear una IU con estado:

Clase de CSS	Visible cuando...
recaptcha_only_if_image	se muestra un CAPTCHA de imagen
recaptcha_only_if_audio	se muestra un CAPTCHA de audio
recaptcha_only_if_incorrect_sol	la solución anterior era incorrecta
recaptcha_only_if_no_incorrect_sol	la solución anterior no era incorrecta

Si bien los temas te brindan muchas opciones, debes seguir algunas reglas de coherencia de la interfaz de usuario:

• Debes indicar que estás usando reCAPTCHA cerca del widget de CAPTCHA.
• Debes proporcionar un botón visible que llame a la función para volver a cargar.
• Debes proporcionar una forma para que los usuarios con discapacidad visual accedan a un CAPTCHA de audio.
• Debes proporcionar texto alternativo para todas las imágenes que uses como botones en el widget de reCAPTCHA.

Internacionalización: Cómo cambiar el idioma de un widget

Existen dos maneras de internacionalizar el widget de reCAPTCHA:

Traducciones integradas

reCAPTCHA tiene varias traducciones integradas. Puedes utilizarlas estableciendo el parámetro lang de la etiqueta RecaptchaOptions

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

Traducciones personalizadas

Si no hay una traducción para tu idioma, puedes crear una propia. Debes traducir todas las cadenas de el código JavaScript de reCAPTCHA y establece la política “custom_translations” de RecaptchaOptions. Las cadenas que no configures se tomarán de la traducción predeterminada de tu idioma. Puedes utilizar esta opción para anular solo una parte de una traducción predeterminada (por ejemplo, si la traducción que elegimos no coincide adecuados para tu región). Por ejemplo:

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

Este es un ejemplo funcional de una traducción al italiano personalizada (coloca este código antes de que llames a 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>

Referencia de RecaptchaOptions

Los siguientes campos se pueden configurar en el diccionario RecaptchaOptions:

Clave	Valores posibles	Valor predeterminado:	Significado
tema	'roja' | 'blanco' | "vidrio negro" | "limpiar" | 'personalizado'	“rojo”	Define qué tema usar para reCAPTCHA. Los temas rojo, blanco, negro y claro son temas predefinidos en los que reCAPTCHA proporciona la interfaz de usuario. En el tema personalizado, Tu sitio tiene control total sobre la apariencia de reCAPTCHA.
idioma	Cualquier código de idioma admitido.	'es-419'	Es el idioma que se usa en la interfaz para los temas predefinidos. Se admiten los siguientes idiomas: Idioma Código Inglés en Neerlandés nl Francés fr Alemán de Portugués pt Ruso ru Español es Turco tr Si el idioma de tu sitio no es compatible, puedes usar temas personalizados para incluir reCAPTCHA en tu idioma.
custom_translations	Un diccionario de traducciones	null	Úsalo para especificar traducciones personalizadas de cadenas de reCAPTCHA.
custom_theme_widget	Una cadena con el ID de un elemento del DOM	null	Cuando se usan temas personalizados, este es un elemento div que contiene el widget. Consulta la sección de temas personalizados para ver cómo usarlos.
tabindex	cualquier número entero	0	Establece un tabindex para el cuadro de texto de reCAPTCHA. Si otros elementos del formulario usan una tabindex, se debe configurar de modo que la navegación sea más fácil para el usuario.

A modo de ejemplo, esta etiqueta de secuencia de comandos hace que reCAPTCHA tenga un tema blanco y un tabindex 2:

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