Esta página foi traduzida pela API Cloud Translation.

Como personalizar a aparência do reCAPTCHA

Importante: não há mais suporte para a versão 1.0 da API reCAPTCHA. Faça upgrade para a versão 2.0. Saiba mais

Depois de instalar o reCAPTCHA no seu site, é recomendável mudar a aparência dele. Esta página explica: (1) como escolher um dos temas padrão do reCAPTCHA, (2) como personalizar totalmente a aparência do reCAPTCHA e (3) como internacionalizar o reCAPTCHA alterando o idioma do widget.

Temas padrão

Para que o widget reCAPTCHA exiba um tema diferente, primeiro é necessário adicionar o seguinte código na página HTML principal, em qualquer lugar antes do elemento <form> em que o reCAPTCHA aparece. Isso não vai funcionar se for 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, é necessário substituir 'theme_name' por um dos quatro nomes de tema abaixo:

"red" (tema padrão)	"branco"

"Black Glass"	"limpo"

Temas personalizados

Os temas personalizados permitem que você controle exatamente como a imagem do reCAPTCHA aparece. Confira uma demonstração dos temas personalizados. Para usar temas personalizados, primeiro defina a propriedade do tema do RecaptchaOptions como "custom". Isso informa ao reCAPTCHA que ele não precisa criar uma interface de 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. É onde a imagem real será colocada. O div será de 300 x 57 pixels.
Uma entrada de texto com ID e nome definidos como recaptcha_response_field. É aqui que o usuário pode digitar a resposta.
Opcionalmente, um div que contenha todo o widget reCAPTCHA. Esse div de ID precisa ser colocado no custom_theme_widget, e o estilo dele deve ser definido como display:none. Depois que o código de temas do reCAPTCHA for totalmente carregado, o div ficará visível. Esse elemento evita que a página pisque durante o carregamento.

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

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

Em seguida, dentro do elemento <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 explicada na introdução deste guia.

Veja o que acontece no código acima. O objeto JavaScript do reCAPTCHA fornece métodos que permitem mudar o estado do captcha. O método reload 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, exibimos informações diferentes quando o CAPTCHA está em estados distintos. Por exemplo, quando o usuário estiver visualizando um CAPTCHA de imagem, será exibido um link para "Receber um CAPTCHA de áudio". Quatro classes CSS estão disponíveis para você criar uma interface com estado:

Classe CSS	Visível quando...
`recaptcha_only_if_image`	uma imagem captcha está sendo exibida
`recaptcha_only_if_audio`	um CAPTCHA de áudio está sendo 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 os temas ofereçam muitas opções, você precisa seguir algumas regras de consistência da interface do usuário:

Você precisa declarar que está usando o reCAPTCHA perto do widget CAPTCHA.
É necessário fornecer um botão visível que chame a função de atualização.
Você deve fornecer uma maneira para que os usuários com deficiência visual acessem um captcha de áudio.
É necessário fornecer um 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. Para usá-los, defina 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 o seu. É necessário traduzir todas as strings no JavaScript do reCAPTCHA e definir a variável "custom_translations" do RecaptchaOptions. Todas as strings que você não definir serão extraídas da tradução padrão do seu idioma. Use esse atributo 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>

Este é um exemplo prático 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 seguintes campos podem ser definidos no dicionário RecaptchaOptions:

Tecla

Possíveis valores

Valor padrão

Significado

tema

"vermelho" | "branco" | "vidro preto" | "limpo" | "personalizado"

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

lang

Qualquer código de idioma compatível.

'pt-BR'

Qual idioma é usado na interface para os temas predefinidos. Há suporte para os seguintes idiomas:

linguagem	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 no seu idioma.

custom_translations

Um dicionário de traduções

null

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

custom_theme_widget

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

tabindex

qualquer número inteiro

Define um tabindex para a caixa de texto reCAPTCHA. Se outros elementos do formulário usarem um tabindex, ele precisará ser definido para que a navegação seja mais fácil para o usuário

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

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