Esta página foi traduzida pela API Cloud Translation.

Como personalizar a aparência do reCAPTCHA

Importante: a versão 1.0 da API reCAPTCHA não é mais compatível. Faça upgrade para a versão 2.0. Saiba mais

Depois de instalar o reCAPTCHA no seu site, recomendamos que você mude a aparência dele. Esta página explica: (1) como escolher um dos temas padrão do reCAPTCHA (2) como personalizar completamente a aparência do reCAPTCHA. e (3) como internacionalizar o reCAPTCHA mudando o idioma do widget.

Temas padrão

Para que o widget reCAPTCHA mostre um tema diferente, primeiro adicione o código abaixo à sua página HTML principal em qualquer lugar antes do elemento <form> em que o reCAPTCHA aparece. Isso não vai funcionar se colocado após o script principal em que o reCAPTCHA é invocado pela primeira vez:

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

Para usar um tema padrão, substitua 'theme_name' por um dos quatro temas abaixo. nomes:

"vermelho" (tema padrão)	'branco' [white]

"black Glass"	"limpo"

Temas personalizados

A aplicação de temas personalizados permite controlar exatamente como a imagem reCAPTCHA aparece. Confira uma demonstração de temas personalizados. Para usar temas personalizados, primeiro defina a propriedade de tema do RecaptchaOptions como "personalizado". Isso informa ao reCAPTCHA que ele não deve criar uma interface do usuário própria. O reCAPTCHA depende da presença de Elementos HTML com os seguintes IDs para exibir o CAPTCHA ao usuário:

Um div vazio com o ID recaptcha_image. É aqui que a imagem real será inserida. O div será de 300 x 57 pixels.
Uma entrada de texto com ID e nome definidos para recaptcha_response_field. É aqui que o usuário pode inserir a resposta.
Opcionalmente, um div que contenha todo o reCAPTCHA widget. Esse div de ID deve ser colocado em o custom_theme_widget e o estilo do div precisam ser definido como display:none. Após o código de tema do reCAPTCHA for totalmente carregado, o div ficará visível. Esse elemento evita que a página pisque enquanto é carregada.

Para implementar tudo isso, primeiro coloque o seguinte código na sua página HTML principal, em qualquer lugar, antes de <form> em que o reCAPTCHA aparece:

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

Em seguida, no <form> em que você quer que o reCAPTCHA apareça, coloque:

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

Observe que as últimas linhas são simplesmente a maneira padrão de exibir o reCAPTCHA, explicado na introdução deste guia.

Veja o que está acontecendo no código acima. O objeto JavaScript reCAPTCHA fornece métodos que permitem alterar o estado do CAPTCHA. O método recarregar exibe um novo desafio de CAPTCHA, e o método switch_type alterna entre CAPTCHAs de imagem e áudio. Para criar uma interface completa para o reCAPTCHA, exibir informações diferentes quando o CAPTCHA está em estados diferentes. Por exemplo, quando o usuário visualiza CAPTCHA de imagem, um link para "Obter um CAPTCHA de áudio" é exibido. Quatro classes CSS estão disponíveis para você criar um interface com estado:

Classe CSS	Visível quando...
`recaptcha_only_if_image`	um CAPTCHA de imagem é exibido
`recaptcha_only_if_audio`	um CAPTCHA de áudio é exibido
`recaptcha_only_if_incorrect_sol`	a solução anterior estava incorreta
`recaptcha_only_if_no_incorrect_sol`	a solução anterior não estava incorreta

Embora a aplicação de temas ofereça muitas opções, você precisa seguir algumas regras de consistência da interface do usuário:

Você precisa declarar que está usando o reCAPTCHA próximo ao widget CAPTCHA.
Você precisa oferecer um botão visível que chame a função de atualização.
Você precisa oferecer uma maneira de usuários com deficiência visual acessarem um CAPTCHA de áudio.
É necessário fornecer texto alternativo para todas as imagens usadas como botões no widget reCAPTCHA.

Internacionalização: como alterar o idioma do widget

Há duas maneiras de internacionalizar o widget reCAPTCHA:

Traduções integradas

O reCAPTCHA tem várias traduções integradas. Você pode usá-los definindo o parâmetro lang do RecaptchaOptions:

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

Traduções personalizadas

Se não houver uma tradução para seu idioma, você poderá criar a sua. Você precisa traduzir todas as strings JavaScript reCAPTCHA e defina "custom_translations" variável de RecaptchaOptions. As strings que você não definir serão extraídas da tradução padrão do seu idioma. Você pode usar isso para substituir apenas parte de uma tradução padrão (por exemplo, se a tradução escolhida não se encaixar na sua região). Exemplo:

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

Veja um exemplo funcional de uma tradução italiana personalizada (coloque este código antes de chamar o 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>

Referência do RecaptchaOptions

Os campos a seguir podem ser definidos no dicionário RecaptchaOptions:

Chave

Valores possíveis

Valor padrão

Significado

tema

'red' | 'white' | 'blackglass' | 'clean' | 'custom'

"vermelho"

Define qual tema usar para o reCAPTCHA. Os temas vermelho, branco, preto e limpo são temas predefinidos em que o reCAPTCHA fornece a interface do usuário. No tema personalizado, seu site tem controle total sobre a aparência do reCAPTCHA.

idioma

Qualquer código de idioma compatível.

"pt-BR"

Qual idioma é usado na interface das configurações predefinidas temas. Os seguintes idiomas são aceitos:

Idioma	Código
Inglês	en
Holandês	nl
Francês	fr
Alemão	de
Português	pt
Russo	ru
Espanhol	es
Turco	tr

Se o idioma do seu site não for compatível, use temas personalizados para colocar o reCAPTCHA nos seus idioma de destino.

custom_translations

Um dicionário de traduções

null

Use para especificar traduções personalizadas de strings reCAPTCHA.

custom_theme_widget

Uma string com o ID de um elemento DOM

null

Ao usar temas personalizados, esse é um elemento div que contém o widget. Consulte a seção de temas personalizados para saber como usar esse recurso.

tabindex

qualquer número inteiro

Define um tabindex para a caixa de texto reCAPTCHA. Se outros elementos no formulário usarem uma tabindex, isso deve ser definido para facilitar a navegação do usuário

Por exemplo, esta tag de script faz com que o reCAPTCHA tenha um tema branco e um tabindex 2:

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