Pular para o conteúdo

Como inserir Google reCAPTCHA em formulários e na tela de login do WordPress

Paulo Felipe
Por Paulo Felipe,
Front-end na Nano Incub.
Publicado em 27 de agosto de 2018

Salve salve Incuber, beleza? Aqui é o Paulo Felipe com mais um tutorial para WordPress com o objetivo de te ajudar a evoluir cada vez mais seus conhecimentos na ferramenta.

O reCAPTCHA é um recurso para proteger o seu site dos boots que ficam tentando acessar suas informações sem sua permissão e também que ficam enviando spans para o seu site. O Google desenvolveu seu próprio reCAPTCHA e que na minha opinião é o mais seguro e eficiente, além de ser muito simples de utilizar.

Nesse post você aprenderá a gerar a chave (key) do Google reCAPTCHA e inseri-lo no Contact Form 7 e na tela de login do WordPress.

Como gerar Google reCAPTCHA Key

Para deixar o processo mais completo eu criei um breve vídeo para mostrar como gerar o google reCAPTCHA key.

Primeiramente é necessário criar uma conta no www.google.com/recaptcha com uma conta do gmail.
– Clique em My reCaptcha no canto superior da tela;
– Coloque o e-mail e senha do seu e-mail;

Configurando o domínio do seu site para receber o Google reCaptcha

– Preencha os campos seguindo o exemplo da imagem abaixo;
– O domínio deve ser inserido sem o http//www. ou seja somente o domínio.com.br sem / no final;

Cadastrando o seu domínio do Google reCAPTCHA

Pegar a chave gerada pelo google reCAPTCHA

A próxima tela irá mostrar a chave gerada pelo Google e também algumas maneiras de você inserir o reCAPTCHA em seu site através do código.
Para ficar mais sussa vamos utilizar um plugin simples para funcionar nosso reCAPTCHA sem precisar mexer no código, assim vamos utilizar somente o site key e a secret key.
Deixe a tela Google reCAPTCHA aberta, pois utilizaremos ela em breve.

Pegar chave do Google para reCAPTCHA

Agora que você gerou a sua chave, vamos aprender como utilizá-la em seu site.

Como inserir Google reCAPTCHA na tela de login do WordPress.

Para deixar o processo mais completo eu criei um breve vídeo para mostrar como inserir o reCAPTCHA na tela de login do WordPress.

Para fazer esse processo iremos utilizar o plugin “Google Captcha (reCAPTCHA) by BestWebSoft” que em minha opinião é o melhor, ou pelo menos o mais utilizado, tendo hoje mais de 100K de instalações ativas.
Instale e ative o plugin no seu WordPress.

Google reCAPTCHA Best Web Soft

Depois de ativar clique no novo item do menu que foi criado pelo plugin:

Menu Google Captcha

Preencha os campos conforme mostrado na imagem abaixo:

Configurações para inserir reCAPTCHA na tela de login do WordPress
No card do WordPress default, marque em quais formulários de login e registro você deseja colocar o reCAPTCHA, o mais importante para esse tutorial é o Login form.

Você pode expandir o card de External Plugins e instalar o plugin da Bestwebsoft para contact form 7, eu particularmente prefiro instalar o plugin de reCAPTCHA do próprio CF7 que será o próximo processo.
*É apenas uma questão de gosto, fique a vontade para escolher entre usar o plugin da Bestwebsoft para CF7 ou continue comigo para ver como utilizar o plugin feito pela equipe do CF7.

Se você passar pelas opções contidas nessa tela, verá que é possível esconder o reCAPTCHA para usuários específicos, mudar o tema e colocar uma mensagem customizada para Whitelist Notivication.
Agora é só salvar as alterações.

Faça o logout no seu site e veja se deu tudo certo.

ReCAPTCHA na tela de login do WordPress

Maravilha, agora se você quiser inserir o reCAPTCHA no CF7 é só continuar aqui comigo.

Como inserir reCAPTCHA no Contact Form 7 (CF7)

Para deixar o processo mais completo eu criei um breve vídeo para mostrar como inserir o reCAPTCHA no Contact form 7.

Vou levar em consideração que você já seguiu o processo de gerar sua Key no Google reCAPTCHA e que já tenha o CF7 instalado no seu WordPress.

Vá no menu Contato e clique em Integração e depois clique em Configurar chaves

Configurar reCAPTCHA no Contact Form 7

Insira o Site key, a Secret key e salve.

Agora vá nas configurações do seu formulário e insira o shortcode do CF7 para reCAPTCHA, salve e teste para ver o resultado.

Inserindo shortcode para reCAPTCHA no Contact Form 7

Depois disso é só ir até a página do seu site que tenha um formulário e ver o resultado:

reCAPTCHA em formulários de contato

É isso ai Incuber, espero que esse post tenha ajudado a esclarecer suas dúvidas sobre Inserir google reCAPTCHA no WordPress, caso você tenha ficado alguma dúvida, se você tiver alguma sugestão ou opinião, deixe ai nos comentários, pois sua participação é o que nos move a produzir conteúdos cada vez mais elaborados e assertivos.

Um abraço e até o próximo post!

Compartilhe esse post

Deixe o seu comentário, dúvida ou sugestão de novos tutoriais