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 correctamente reCAPTCHA 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 la apariencia 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 principal en cualquier lugar antes del elemento <form> donde aparece reCAPTCHA (esto no funcionará si se coloca 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 nombres de tema:

“red” (tema predeterminado)	'blanco'
"gafas negras"	"clean"

Temas personalizados

Los temas personalizados te permiten controlar exactamente cómo aparece la imagen de reCAPTCHA. (Aquí hay una demostración de los temas personalizados). Si deseas usar temas personalizados, primero debes establecer la propiedad del tema de RecaptchaOptions como "personalizada". Esto le indica a reCAPTCHA que no debe crear una interfaz de usuario propia. reCAPTCHA se basará en la presencia de elementos HTML con los siguientes IDs para mostrarle el CAPTCHA al usuario:

• Un elemento div vacío con el ID recaptcha_image. Aquí es donde se ubicará la imagen. El elemento div será de 300 x 57 píxeles.
• Una entrada de texto con ID y 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. Se debe colocar este elemento div de ID en el elemento custom_theme_widget, y el estilo del elemento div debe establecerse en display:none. Después de que el código de temas de reCAPTCHA se haya cargado por completo, el elemento div estará visible. Con este elemento, se evita que la página parpadee mientras se carga.

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

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

Luego, dentro del elemento <form> 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 de JavaScript de reCAPTCHA proporciona métodos que te permiten 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 de audio. A fin de crear una IU completa para reCAPTCHA, mostramos información diferente cuando el CAPTCHA está en diferentes estados. Por ejemplo, cuando el usuario ve un CAPTCHA de imagen, se muestra un vínculo para "Obtener un CAPTCHA de audio". Hay cuatro clases de CSS disponibles para crear una IU con estado:

Clase CSS	Visible cuando...
recaptcha_only_if_image	se muestra una imagen CAPTCHA
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 CAPTCHA.
• Debes proporcionar un botón visible que llame a la función de volver a cargar.
• Debes proporcionar un método para que los usuarios con discapacidad visual accedan a un CAPTCHA de audio.
• Debes proporcionar texto alternativo para cualquier imagen 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. Para usarlas, configura el parámetro lang de 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 strings en el código JavaScript de reCAPTCHA y configurar la variable “custom_translations” de RecaptchaOptions. Las cadenas que no definas se tomarán de la traducción predeterminada para tu idioma. Puedes usar esto para anular solo una parte de una traducción predeterminada (p.ej., si la traducción que elegimos no se ajusta a 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 italiana personalizada (coloca este código antes de llamar 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	“rojo” | “blanco” | “vidrio negro” | “limpio” | “personalizado”	“rojo”	Define qué tema usar para reCAPTCHA. Los temas rojo, blanco, negro y claros 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.
lang	Cualquier código de idioma compatible.	“es-419”	Qué lenguaje se usa en la interfaz para los temas predefinidos. Se admiten los siguientes idiomas: Lenguaje 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 strings 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 descubrir cómo usarlos.
índicedepestaña	cualquier número entero	0	Establece un tabindex para el cuadro de texto de reCAPTCHA. Si otros elementos del formulario usan un tabindex, debes configurarlo 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 el reCAPTCHA tenga un tema blanco y tenga tabindex 2:

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