Como utilizar o ReCaptcha em seu site nos formulários de contato?

O serviço reCAPTCHA é um sistema de caixa de diálogo para usuário originalmente desenvolvido na Universidade Carnegie Mellon, principal campus de Pittsburgh. É baseado na interface do CAPTCHA, que pede para usuários digitarem palavras distorcidas exibidas na tela, para ajudar a digitalizar o texto de livros, enquanto protege sites de robôs tentando acessar áreas restritas.

Hoje em dia um dos problemas em nosso site é aquele acumulo de SPAM que recebemos através de nossos formulários, são muitos robos trabalhando para encher nossa caixa de e-mail pensando nisso alguns desenvolvedores criaram um metodo para verificar se quem está enviando é um robo ou não, existe varios métodos nem sempre é fácil de instalar um NoCaptcha ou um ReCaptcha por isso criei mais uma videoaula com essa super dica para você.

Não deixe de compartilhar com seus contatos essa super dica, se você gostar deixe seu “joinha” isso nós ajuda muito, então vamos para mais um tutorial.

Obtendo o ReCaptcha

Passo 1

Primeiro, precisamos obter a chave da API, para isso, vá até o site: https://www.google.com/recaptcha/admin. Para acessar a página você precisa efetuar login com sua conta do Google.  Será pedido que você registre seu site, então dê um nome para que você possa identificá-lo por exemplo “Meu site de video aulas” logo apois você precisa informar para qual dominio vai funcionar a API como por exemplo “jonathanmoreira.com.br”

reCaptcha, como instalar em meu site

Passo 2

Com isso feito, você verá a chave do seu site e a chave secreta de parceiro:

Site key

Passo 3

Precisamos importar a biblioteca javaScript que o Google disponibiliza, essa biblioteca é que faz o ReCaptcha funcionar em seu site.

script

Passo 4

Agora precisamos incluir em nosso código uma div que o Google disponibiliza para que seja apresentado o ReCaptcha, você poderá adicionar em qualquer parte dentro da sua tag form

 

codigo

Nota: o atributo data-sitekey deverá conter o valor da sua chave, não o valor desse exemplo.

Há outros atributos que você pode adicionar para customizar o visual e a funcionalidade do seu ReCaptcha. Por exemplo, adicionando o atributo data-theme="dark" a esse elemento div, retornará uma versão escura do ReCaptcha, que talvez combine melhor com a sua interface:

modo dark do ReCaptcha

 

Passo 5

Para integrar com nosso PHP basta seguir o código abaixo

codigo reCaptcha

Assista o vídeo produzido pelo pessoal da JM Comunicação – Tutoriais:

Não se esqueça de alterar a chave para a que você criou.

 

Via: JM Criação de Sites BH

One comment on “Como utilizar o ReCaptcha em seu site nos formulários de contato?
  1. Pingback: Como validar formulários em websites com ReCaptcha | Blog Henrique Guimarães

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *