Formulário de contato seguro com reCAPTCHA

Para ter um formulário de contato seguro e que você pode customizar é muito fácil. Disponibilizamos aqui um para download e vamos te ensinar a configurar!

Isso mesmo, esse formulário não vai precisar ficar editando códigos! Você só vai precisar fazer algumas poucas alterações e utilizar a vontade.

SEGURANÇA

O sistema diferencial de segurança desse formulário é o CAPTCHA. Sistema do Google que tem prevenção contra bots de SPAM e que ajudam muito.

Para isso você vai precisar se cadastrar no Google Captcha para pegar um código privado e um público. Esses códigos serão colocados em lugar específico que mostraremos em foto.

Na Wikipedia vemos o que é Captcha:

“CAPTCHAs são utilizados para impedir que softwares automatizados executem ações que degradam a qualidade do serviço de um sistema dado, devido à despesa do abuso ou do recurso. Embora CAPTCHAs sejam utilizados mais frequentemente como uma resposta a proteção de interesses comerciais, a noção que existem para parar somente spammers é um erro, ou uma simples redução.”

DOWNLOAD

Antes de explicarmos faça seu download aqui: DOWNLOAD

Esse formulário está completo e original, você precisa trocar cada informação conforme vou passar.

O FORMULÁRIO

 

Formulário de contato seguro

Este é o formulário de contato que vamos utilizar. Claramente as alterações visuais você terá que adaptar da forma que desejar.

EDITANDO O CÓDIGO

Para o formulário ser funcional precisamos editar algumas partes do código. Calma que não é difícil!

Antes de tudo, envie todos os arquivos para a pasta do seu site onde é o contato. Feito isso vamos a edição.

O primeiro arquivo que deve ser editado é o index.html (em caso de colocar na mesma pasta do site, altere o nome desse arquivo para contato.html) que você pode alterar os textos e fazer seus ajustes.

O segundo arquivo a ser editado é o contato.php onde faremos as seguintes alterações:

formulário

Na linha 6 onde está a variável $from você pode trocar o nome Demonstração por qualquer outro que você deseja, como SITE e o e-mail você coloca o seu e-mail de envio.

Já na linha 7 onde está a variável $sendTo você pode trocar Spam pelo nome do seu site e trocar o e-mail para o seu e-mail que receberá os contatos do site.

Na linha 12 onde está esse código, precisaremos criar uma conta recaptcha e gerar o código.

Para alterar essa linha, vá a este SITE e  clique em Get reCAPTCHA. Lá você irá para um painel de admin onde poderá registrar o seu site.

Formulário - reCaptcha

Preenchido fica assim (substitua por suas informações):
Formulário - reCaptcha exemploClique em Register.

Formulário recaptcha - codigo

Agora iremos copiar o código para colar lá em contato.php, na linha 12 você copia o código da imagem SITE SECRET e cola:

Formulário recaptcha - secret

Salve tudo.

Agora você está apto manter contato de qualidade e seguro para seus leitores e clientes.

Tudo será enviado sempre ao e-mail escolhido. Título antes do e-mail faz toda a diferença e sempre você vai ter separado conforme escolheu.

 

Deseja testar o formulário? Clica aqui

Quer estudar mais sobre reCaptcha? Clica aqui

 

CÓDIGO MASTIGADO (Formulário de Contato em HTML + PHP)

Formulário de contato

Que tal criarmos um formulário de contato em html + php e fazermos tudo de forma que possamos entender com perfeição?




Para o formulário de contato em html + php profissional e sem problemas utilizamos aqui html e php para criar e enviar email diretamente do site.

Então, vou ver se consigo ajudar aos iniciantes em “webdesign e desenvolvimento” a fazer um formulário de contato, mas a forma será diferente do normal para podermos entender 100% do código com a lógica dele. 🙂

Então vamos lá, vou primeiro colocar o código html e depois explicarei passo-a-passo.

ANTES DE QUALQUER COISA, CLIQUE AQUI E ME AJUDE POR FAVOR, BASTA CLICAR E VER O ANUNCIO ABRIR TOTALMENTE E FECHAR.

 

 

O nosso formulário enviará e fará tudo basicamente como a imagem abaixo.

função que envia email

função que envia email



gogogogo entender o código então, porém,  os códigos:

 

e outros não irei te ensinar porque isso ai é básico do html, nosso html mastigado de hoje é sobre o FORMULÁRIO, ok? 😛

CODIGO 01:

Bom, iniciando a parada do nome FORM NAME ai estamos (eu e você desenvolvedores :O) dizendo assim pro navegador (Firefox, Chrome, etc…) :

Mano, tu agora abre na tela do cara que ta abrindo o site ai um formulário e o nome do formulário é “form1”, tá ligado?“.

Ai logo em seguida vem METHOD=”POST”, ou seja:
Agora  navegador, a método de trabalho que enviaremos para o servidor é post, porque é uma comunicação mais segura entre o cara que navega e o servidor, porque ai quando você ler o “action” você vai saber o que fazer. Beleza?“. Em seguida vem o dito “action”, que no nosso casso o comando do action é ENVIAR.PHP, ou seja, quando o cara clicar nos botões pra frente ai ele vai ler lá no servidor o arquivo enviar.php.

Concluindo esse comando nosso formulario tem um nome, o método dele trabalhar/comunicar e por final que ação ele vai executar.

Agora vamos à outra parte do código:

Bom, traduzindo o nome INPUT nós temos uma ENTRADA, ou seja:

Seu formulário, desenha na tela do cara ai uma caixinha de entrada de dados (caixa de entrada de dados é onde tu digita algo)!“, ai vem a opção NAME, cara é meio óbvio que a gente segue a regra do outro, a caixa de entrada ai tem que ter um nome não é? sendo assim ela pode ser identificada, já o TYPE dela foi definido com TEXT (TEXTO em português) sendo assim, estamos falando para o navegador: “No desenho que você vai fazer para a caixinha de entrada de dados vai ser do tipo TEXTO, que pode ser digitado qualquer tipo de texto..daaaah!“.

Teremos em seguida antes de fechar aquele código html o codigo ID (IDENTIFICAÇÃO), seria como dizer assim para o navegador:
Moço, olha eu aqui outra vez incomodando, mas faz um grande favor ai pra mim, gere um ID para a caixa de entrada de dados ai para sempre ser identificada em outro código tá?”  (ps: essa ID pode ser numeral, texto, etc. a gente costuma usar nome e tal para poder ser facil de identificar, afinal iremos precisar dela em outro código não acha?).

Concluindo essa parte nós aprendemos que após definirmos o desenho do formulário a gente mandou desenhar uma caixa de entrada de dados onde induziriamos o carinha da frente do monitor a introduzir o nome dele no formulário, que esse formulário tem um nome e uma identificação. Ai surge a dúvida cruel, como “induziremos” o cara a digitar o nome dele?
Vou mostrar no código html lá que antes do código que estudamos do INPUT tem

então na tela do carinha vai desenhar antes da caixa de texto um parágrafo novo com NOME: impresso na tela e logo do lado a caixa de entrada de dados.

Logo iremos montar o seguinte na tela seguindo a mesma lógica da caixa de entrada de dados NOME:

O negocio encima ai induz o cara a colocar o texto EMAIL e tudo segue a lógica dos primeiros dados.

Prosseguindo no código:

Mesma conversa do NOME e EMAIL, ai tu coloca ASSUNTO porque isso induzirá o cidadão a colocar tudo conforme manda o script (viu como nós desenvolvedores somos fortes e influenciadores?)

Agora vamos a mais um passo interessante, a caixa onde o “carinha” irá digitar o que ele tem para falar para a gente. blah

Note que logo depois de MENSAGEM: tem a tag html <br> (estude essa tag AQUI). ela manda criar um novo paragrafo basicamente.

Ai falamos pro navegador: “Desenha na tela do cara ai uma área de texto onde será digitado o que o cara quizer, o nome dessa área de texto é MENSAGEM.”.

WRAP=”VIRTUAL” é que ele vai “QUEBRAR LINHAS” (passar para a nova linha) sem precisar de código html, ou seja, não adianta digitar códigos html de nova linha e tal que as variáveis serão ignoradas.

ID segue a mesma lógica dos outros.

Até agora desenhamos as caixas de entrada de dados, informamos a elas que elas tem identificação, informamos tambem ao navegador que ele induza as pessoas as fazerem o que queremos para recebermos o contato final do cara.

Surgiu outra dúvida cruel… O carinha preencheu todos os dados que induzimos ele, agora o que ele faz?

Vamos induzir ele a clicar em um botão chamado ENVIAR? hehehehe

Lógica do código:

Desenhe na tela ai uma entrada de dados do tipo SUBMIT (ENVIA DADOS, ou seja, ela é uma caixa de dados que não pode ser alterada porque serve apenas para transicionar dados entre o servidor html e o cliente html (navegador)), essa entrada de dados tera o nome SUBMIT para no código da ACTION que no nosso caso é ENVIAR.PHP ele lá no PHP vai executar a variável de código PHP e o VALUE (VALOR) dela será ENVIAR (encima do botão tem um texto que pode ser definido como a gente quizer, eu poderia muito bem ter trocado o nome ENVIAR por ?????, mas o cliente seria induzido a clicar nele ou ficaria em dúvida?“.

Aqui nós concluimos tudo, tem muitas tags html padrão que eu não perdi tempo pra explicar porque isso ai é algo que não faz parte do formulário em si, então, estude essas tags ok?

Vamos ao Código PHP, ele eu vou deixar apenas comentado para você preencher, tudo que esta atrás de // ou /* */ no código é COMENTARIO que te instruirá a preencher o código.

Pronto pessoal, aqui está nosso formulário de contato, isso serve pra você comunicar bem com o cliente, amigo, etc..blablabla

Isso ai, qualquer hora dessas tem coisa nova no ar.