Como adicionar reCAPTCHA no Contact Form 7

Google criou um sistema de reCaptcha para validar se quem está fazendo aquela requisição, seja preenchendo um formulários, fazendo download ou quais quer outras coisas na internet é um ser humano ou não. O sistema é simplificado e moderno, deixando de lado aquelas letras e números que você mal consegue ver para resolver um captcha. Adicionar o reCaptcha no Contact Form 7 é simples e vou ensinar passo-a-passo, mas para você entender melhor, veja o comparativo entre os Captcha’s normais e o reCaptcha:

captcha versus recaptcha
Alguns exemplos de Captcha para validação, ao lado reCAPTCHA Google.

Para adicionar o reCaptcha no Contact Form 7 siga os passos a seguir:

1 – Instalar o plugin Contact Form 7

  • Entre no painel do seu WordPress;
  • Vá em Plugins > Adicionar Novo e procure por “Contact Form 7”;
  • Clique em “Instalar agora” e ative o plugin.
    Plugin Contact Form 7

 

2 – Pegar chave publica e privada do reCaptcha

  • Vá no site do Google reCaptcha;
  • Clique no botão “Get reCAPTCHA”;
    get recaptcha
  • Registre seu site, preencherndo os campos
    • Label: Um titulo para seu reCaptcha, somente para seu controle;
    • Domains: Todos os dominios que deseja adicionar o reCaptcha;
      registrar reCaptcha
  • Registre, deixe a janela aberta e vá para o próximo passo.

 

3 – Integrar o reCaptcha com o Contact Form 7

Dentro de seu painel WordPress:

  • Ir para contato> Integração
    contact form 7 integração
  • Digite chave local e a chave secreta gerados na segunda etapa;
    contact form 7 integração recaptcha

 

4 – Integrando o reCaptcha a um formulário

  • Vá em Form Contato > Formulários de Contato e adicione ou edite um formulário;
    formulario de contato
  • Adicione o reCaptcha, basta clicar para inserir no botão acima do formulário;
    inserir recaptcha contact form 7

 

5 – Adicionar seu formulário a uma pagina

  • Essa etapa é para quem ainda não tinha seu formulário inserido em uma pagina e o processo é simples. Copie o código do Formulário de contato;
    codigo contact form 7
  • Com o codigo copiado, vá em uma pagina e adicione;
    adicionar contact form 7 a uma pagina

 

Resultado final com o reCaptcha adicionado a um formulário:

recaptcha final

Corrigir erro reCAPTCHA Contact Form 7

Eu tive um pequeno problema ao adicionar o reCaptcha ao meu Contact Form 7, acontece que por algum conflito, o reCaptcha acabava ficando sem formatação e outros campos acabavam ficando sobre ele, como na foto:

erro recaptcha contact form 7

Para resolver isso, de forma simples, visto eu não ter conhecimento o suficiente para mexer em CSS, HTML e afins, adicionei parágrafos ao formulário de contato com o código HTML “&nbsp;” que é a tabulação em HTML. Visto o “<p></p> não funcionar para o que eu precisava. Meu formulário e contato ficou assim:

formulario de contato recaptcha

Note que eu inseri 4 vezes “&nbsp;” para ficar com o espaçamento adequado.

Dúvidas ou sugestões, comente.

[Total: 2    Média: 5/5]

Pedro Armindo

Compartilhando o que aprendi.

%d blogueiros gostam disto: