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

 

Formulário de contato elegante e dinamico

Olá caros visitantes,hoje faremos um Formulário de contato elegante e dinâmico.

Elegante porque você poderá fazer do formato que desejar, dinâmico porque faremos em PHP com toda a sua praticidade, robustez e objetos.

O Formulário de contato elegante e dinâmico

Formulário de contato elegante e dinâmico

Este é o nosso formulário de contato, o bom de tudo é que você pode mudar a imagem de fundo conforme desejar.

Para isto vai bastar trocar a imagem localizada no diretório chamado img e  que vai conter tudo que precisarmos de imagem.

Elegante não é? Você vai ver o dinamismo dele funcionando AQUI onde vai enviar um email para um lugar fictício para um email fictício mas que vai ter toda a funcionalidade e que bastará você alterar 1 texto para ele enviar para o seu email.

O tom azul do botão também vamos deixar do jeito que você poderá trocar para qualquer cor que desejar, sabendo apenas sobre as paletas de cores HTML e talvez um pouco de RGBA para alguns itens.

 

O CÓDIGO HTML

Formulário de contato – Explicando

A nossa base para tudo é que um arquivo HTML precisa ser aberto a tag html, a tag head (cabeçalho) e a tag title (título), até ai tudo bem, entre as tags title nos inserimos um título que aparecerá como título da aba aberta no navegador de quem estive editando. Eu coloquei como Teste de Formulário, portanto altere para o que você achar que ficará mais interessante e que tenha a ver com sua marca. Após decidir o título nós fechamos a tag title e vamos abrir uma tag para abrir o layout (“modelo”) CSS para o site, indicando o caminho dele, o tipo e que tipo de arquivos abrir dele. Logo em seguida nós fechamos a tag head (cabeçalho) do site.

Trocando em miúdos este é o código que comentei:

O arquivo estilo.css contém tudo relacionado a cores, fontes, imagens, etc.

Agora que nosso formulário começou a tomar forma, vamos dar um “corpo” para ele?

Abrimos a tag body (corpo) ao nosso pequeno “site” onde abrigará nosso formulário de contato.

Imagine que a tag body é um escritório, nesse escritório para caber mais computadores, colocamos divisórias para criar subsalas dentro dessas divisórias.

O que vamos fazer é abrir a sala e colocar divisórias nela que tem documentos, textos e caixas que são importantes para o funcionamento do escritório em geral, para isso usamos o seguinte código:

Para completar, vamos abrir mais uma divisória dentro deste escritório contendo documentos específicos, classificaremos estes documentos como formulários, daremos uma identificação para ele com o nome form1, o método de busca e de inserção de documentos novos neste formulário é postagem e toda vez que houver uma alteração nós enviamos ele com a ação mail.php, veja bem:

Agora para fazer as nossas divisórias ser funcionais, precisamos colocar documentos dentro de cada local específico, daremos classes e essas classes vão ter tipos diferentes de entrada e saida.

Iniciamos com uma classe nomeada de “nome” e diremos que a parte do formulário conterá uma linha onde a pessoa deverá escrever o nome dela, o documento só será aprovado se a pessoa escrever o nome e aceitará apenas letras.

A mesma coisa com o email da pessoa, porém agora ela será obrigada a colocar o email e este email deverá ser válido (com um sinal de arroba @).

O próximo campo é o campo de texto, onde a pessoa expressará o que ela deseja ao enviar o formulário para nosso departamento:

Por via de esclarecimento, defini que pode ter até 6 linhas e terá no máximo 300 palavras.

E para resumir, a saída das divisórias, tem um pequeno local onde envia para todos os departamentos as informações, com uma pequena divisória chamada submit, onde ENVIA tudo:

E então fechamos todas as divisórias, o escritório (body) e o arquivo html.

E agora temos nosso formulário completo funcionando. 😀

Agora vamos ao “processador” dos arquivos? Sim, temos um arquivo chamado mail.php que processa todas as informações e a partir dela, envia para a “gerência” o que a pessoa preencheu no formulário, no caso o email é a gerência que recebe tudo, você precisa alterar o campo de email para que você seja o gerente e receba os dados dos formulários preenchidos em seu website.

Formulário de contato precisa ser elegante, dinamico mas também precisa ser simples e o php torna as coisas bastante simples na hora de receber isto, lembre-se que um formulário de contato com a função mail precisa ter em seu servidor php a função mail marcada como ativa (esta função é marcada como ativa por padrão mas não custa verificar caso tenha problemas). Para se esclarecer sobre a função mail veja aqui: FUNÇÃO MAIL EM PHP

Abrimos a tag do PHP, criamos 3 variáveis para pegar via método de postagem o nome, email e texto digitados.

Logo em seguida enviamos o email para

contendo o Nome, Email e Texto que a pessoal enviou.

Após envio com sucesso aparece por 3 segundos a mensagem “sua mensagem foi enviada com sucessso! e então vai para o site google.com.br que você pode alterar como desejar.

 

Então é isso pessoal, espero que tenha ajudado e espero que vocês gostem.

Quanto às dúvidas que com certeza surgirão, usem os comentários.

Forte abraço

CÓDIGO MASTIGADO – Formulário de Contato HTML5

CÓDIGO MASTIGADO – Formulário de Contato HTML5

E ai pessoal, tudo bem com vocês? No CÓDIGO MASTIGADO – Formulário de Contato HTML5 e antes de mais nada, vejam aqui um vídeo do formulário está funcionando para vocês constatarem que realmente o formulário funcionando e com ótima qualidade. Um detalhe importante é que o sistema funciona com HTML5 + PHP5 + CSS3, quanto aos detalhes como costumo receber perguntas e e-mails sobre, como fazer para as mensagens permanecerem na mesma tela, como faço porque está pedindo pra salvar, etc não há como eu responder todos, afinal se você seguir tudo corretamente e no servidor que você hospedar as páginas tiver suporte para estas tecnologias,  automaticamente irá funcionar. Quero pedir encarecidamente que você me ajude clicando nesta propaganda logo abaixo, basta clicar, esperar a tela abrir e fechá-la novamente, somente visualizar a propaganda, com o seu clique eu recebo alguns centavinhos que ajuda a manter meu site. Antes de mais nada a estrutura de diretórios (pasta) no seu website deverá ser esta:

Os diretórios (pastas) deverão ficar desta maneira!

Os diretórios (pastas) deverão ficar desta maneira!

Veja aqui o vídeo de como tudo funciona

Costumeiramente fica assim, seusite.com.br/contato/arquivos-e-pastas (sim, estou dizendo que você deve criar um diretório chamado contato e dentro dele colocar os diretórios image, fonts, arquivos contato.html, envia.php, etc.). A primeira questão é você baixar os arquivos. DOWNLOAD AQUI Descompacte eles no diretório criado e você terá toda a estrutura necessária. Irei pular a mastigada do CSS ok? Iremos mastigar apenas o HTML e o PHP! Caso queiram entender o CSS peçam que faço a pré-mastigada para vocês, rsrs. Vamos ao que interessa, antes de tudo veja a foto de como é o arquivo contato.html:

Imagem de como é o arquivo

Imagem de como é o arquivo

Pois bem, agora vamos ao código e em seguida iremos mastigá-lo:

 

Faremos um sistema bem mastigadinho, então vamos a primeira linha do código:

Nosso primeiro procedimento aqui foi falar para o sistema todo que, o “TIPO DE DOCUMENTO É HTML!”, então o pré-processador irá interpretar um arquivo html.

Agora vamos a mais uma linha de código para podermos entender a base, como eu sempre digo, TUDO tem um começo e um fim, inclusive uma página html!
No nosso caso começa aqui com

isto indica que nosso arquivo agora começa a tomar forma, porque já definimos que o tipo de documento é HTML e agora estamos dizendo que a partir desta linha tudo deverá ser interpretado, salvo comentários.

O nosso amigo

sendo traduzido para o sentido literal quer dizer CABEÇA, mas em html é cabeçalho! Sim, essa é a função que define as partes principais do site, como títulos, etc. Lembra da escola quando tinha que fazer o cabeçalho?

De acordo com a W3C: “Sua função é declarar o cabeçalho do documento HTML, entre estas tags podemos declarar o título do nosso documento, as metatags, que veremos em outra oportunidade e todos os arquivos que deverão ser utilizados na implementação da página como scripts e folhas de estilo CSS.

Na próxima linha de código são as metatags

 

com ela dizemos para o navegador: “Senhor navegador, o arquivo tem conteúdo do tipo texto caracterizado por HTML, o tipo de encodificação/decodificação (acentuação) do texto é em utf-8 (línguas com inglês por exemplo).

E no código posterior é o título do site que sempre aparece na parte superior da maioria dos navegadores, isto é muito importante.

o título foi precedido tanto por uma abertura como procedido por um fechamento da tag de título, se você não fechar as tags ocorrerão muitos problemas.

Agora que terminamos o cabeçalho devemos então fechar a tag de cabeçalho para passarmos para o passo onde a página cria corpo, dai a função body. Então fechamos a tag para o navegador passar para a próxima etapa de interpretação com

 

Como eu disse, o próximo passo era dar corpo ou forma para a página, aqui entra a questão de criação e indução do “usuário” que eu disse no código mastigado – formulário de contato que tem aqui nos arquivos do site, esse formulário tem ajudado muitas pessoas e expliquei que sempre devemos induzir o usuário a clicar ou escrever algo para que lá no nosso e-mail o desenvolvedor tenha a maior parte de dados possíveis disponibilizado para poder responder e informar ao seu cliente.

Abrimos o corpo com a tag body

e vamos para o código grosso em geral. Gogogogo! 😛

nos remete a executar uma classe que fora pré-definida no arquivo CSS, então procura pela classe body no arquivo estilo.css e verá que existe toda uma codificação para nos mostrar como ele age.

Agora vamos ao corpo da classe header “body” e definirmos um título para o que queremos, veja a imagem do que fizemos e tenha noção do lugar onde aparece o título do corpo do nosso formulário.

Local onde aparece o título que vamos definir.

Local onde aparece o título que vamos definir.

Agora vamos ver o código desta parte e você altera para o título que quiser:

A definição desse código ai diz que o título é do tipo H1, ou seja, o maior título que o html pode mostrar.

Em seguida fechamos a tag html5 que define o header onde aparece o título que acabamos de criar com o código

 

Vamos partir agora para o corpo dos formulários onde induziremos os usuário a clicar e escrever o que queremos, ele irá visualizar o formulário todo desenhado para simplesmente escrever do jeito que queremos que ele faça para termos as informações e possamos responder.

Aqui com

acabamos de dizer para o navegador, “senhor navegador chegou o momento de chegarmos na seção de você desenhar na tela” e então mandamos ele quando terminar de prencher a ação do formulário será abrir o arquivo enviar.php para poder validar e enviar os dados, afinal o html5 não dará conta de fazer isto,

que criaremos um formulário e define que o método do formulário trabalhar é com postagem de dados e a ação dele será abrir o arquivo enviar.php para fazer o que acabamos de falar.

Vamos ao “desenhos”, primeiro com

acabamos de falar, faça uma etiqueta (label) nomeada de Nome, isso aparecerá na tela no nosso formulário acima da caixa onde o usuário irá escrever o nome dele.

Na parte da primeira caixa de texto temos

que diz para o browser (navegador): “desenhe na tela uma caixa de entrada de texto com o nome “name” e que tenha espaço reservado (placeholder) com o texto Seu nome.” Mastigando o placeholder temos uma função que antigamente devia ser feita com javascript, pois quando o usuário levava o mouse a função onFocus removia o texto, hoje em dia temos isto com o próprio html5 que diz para o navegador exibir aquilo, automaticamente quando o cliente ver aquilo ali vai saber como deve preencher. No meu caso coloquei o exemplo Seu Nome.

Até aqui tudo bem? Se não por favor, faça suas perguntas no comentário, não passe para o próximo passo quando houver erros, porque a maioria das pessoas desistem quando surge o primeiro problema “incorrigível”!

Aqui seguiremos a mesma lógica do nome, porém com uma diferença simples mas importante:

Veja que no TYPE declaramos email, e isto mudará muitas coisas no nosso formulário, hoje em dia existe muita integração então mobilidade tem crescido consideravelmente no mercado de tecnologia, automaticamente os sites/blogs tem que se especializar (por exemplo, meu site tem suporte 100% para celulares e tablets). E isto conta muita, agora o tipo email em html5 define uma grande melhoria para tablets e smartphones, veja a diferença em imagens:

Sem o tipo email o celular não mostra ponto e @ (arroba) como o celular da esquerda, já o celular da direita leu um arquivo que tem o tipo email.

Automaticamente é exibido o símbolo de arroba e ponto o que facilita muito para preencher em tablets e smartphones.

Na próxima linha de código segue a mesma lógica mas também tem um pequeno diferencial senão vejamos

ao invés de input temos TEXTAREA que define que será uma caixa maior onde o usuário irá digitar uma mensagem para o dono do site. E novamente temos em placeholder dizendo para ele “O que deseja falar?”.

O próximo passo é muito importante para donos de sites atuais, sabemos que um dos grandes problemas que existem na sociedade web atual é a quantidade de spam (propagandas indesejadas) que recebemos nos nossos emails, e para evitar que o dono do e-mail do site receba propagandas que preenchem formulários automaticamente não tenha isto, criamos um anti-spam simples, lembre-se você pode mudar a pergunta e a resposta de acordo com o que deseja, pro exemplo sugiro se for trocar para qual o nome do meu site? mas para fazer isto você precisa alterar o arquivo php que iremos ver mais a frente, lá lembrarei você de mudar a resposta caso tenha alterado a pergunta, afinal isto irá ser o diferencial do seu formulário, vejamos o código:

Na linha 1 vemos o label de pergunta Quanto é 2+ 2?(Anti-spam), lembra que falei sobre induzir o usuário a dizer o que queremos? A prática da situação está ai novamente para comprovar, como o cidadão iria saber que é uma resposta correta que deve ser dada para poder enviar o formulário? Deve-se sempre explicar ao máximo. Já na segunda linha temos um input (caixa de entrada de texto, com o nome human (isto é para definir que vamos verificar se o cidadão que está acessando aquela página realmente é humano ou um bot), no placeholder dizemos para o usuário responder a pergunta.

Nesse código aqui

temos um botão com identificação id, com nome submit e tipo submit (envia alguma coisa que está em algum formulário) e o valor dele é Submit, lembrando que o id irá ler o arquivo css e desenhará na tela uma imagem que criamos previamente.

Aqui

definimos que terminamos o desenho em geral do formulário e tudo o que fizermos daqui em diante não fará mais parte do formulário que criamos com o método de postagem de dados.

Lembra da tipo que criamos chamado section? então, agora fechamos ele com

e vamos ao passo que desenha uma logomarca no rodapé da página onde está o formulário, isso é legal para mostrar que você valoriza a sua marca, criei algo aqui porque a minha marca é meu nome mas não foi nada expressivo porque fiz rapidamente no gimp. 😛

Código que define o rodapé

na primeira linha  definimos a classe dele que é o corpo de um rodapé e na segunda o link para nosso site com o link para a imagem que fizemos antes e que está no diretório que criamos na estrutura anterior e logo em seguida finalizamos a classe footer.

Agora vamos as tags de fechamento de toda a seção para não termos problema nenhum com nosso formulário, afinal se algo começou tem que terminar não é?
As próximas duas tags mostrarão apenas fechamentos de tags que definimos no início sendo elas

a primeira é fechando todo o conteúdo do site em si e a outra é finalizando o html para nosso interpretador (navegador web) parar de ler, senão entrará em loop (repetição) ou irá definir que existem erros na página e voilá, seu formulário está pronto, agora é partir para o arquivo php para podermos ter algo com o que validar os dados e enviar o e-mail que o usuário digitou anteriormente. Let’s do this.

O nosso código completo será este

e vamos ao nosso mastigamento, aqui serei meio impreciso porque não posso explicar função por função afinal tomaria no mínimo mais umas 1000 palavras para cada linha! Vamos lá

com isso acabamos de definir o cabeçalho de arquivo onde todo arquivo php deve ser iniciado por esse código, a partir daí o nosso interpretador php no servidor de páginas irá ler como comandos php até esta tag ser fechada, ok?

Vamos lá, nessas próximas linhas temos definições de variáveis

esta variável declara o recebimento de dados do formulário que é identificado por name e vai receber dados que foram enviados com postagem (POST) pelo formulário html5.

As próximas variáveis vão ser a mesma coisa porém com identificação diferente pois cada uma recebe algum dado diferente do formulário html5 que criamos, então veja elas apenas para conferência pois seguem a mesma lógica

Lembrando pessoal que a variável $to irá definir o email que vai receber a mensagem preenchida no site e que o assunto será $subject. ok???? Troque pelo e-mail que você quer que receba a mensagem do site na variável $to.

Nesta linha

declaramos a variável body (corpo) que será impressa no email (escrita no email) com os dados recebidos e serão essas: De: $name (nome da pessoa que preencheu o formulário), criará uma nova linha com \n, E-Mail: $email conterá o e-mail que a pessoa preencheu procedido de uma nova linha, Mensagem: logo em seguida uma nova linha e a mensagem que o usuário escreveu. Veja foto para ver como é a mensagem:

E-mail enviado pelo usuário e a forma como a mensagem é recebida.

E-mail enviado pelo usuário e a forma como a mensagem é recebida.

Agora vamos à parte de validação dos dados do formulário, veja:

aqui falamos pro interpretador assim “se os dados do tipo POSTAGEM forem recebidos do submit, então (abrimos a barra {) faça o seguinte…

Agora na próxima linha

se o nome e o email não forem igual a vazio e se

a resposta de verificação anti-spam ($human) for igual a 4, então

você vai pegar os dados do formulário $to, $subject, $body, $from e enviar usando a função mail do php vai enviar um email com esses dados do formulário e mostrará na tela a mensagem Sua mensagem foi enviada!

Senão

os dados recebidos do formulário com postagem via submit e a verificação da variável $human for diferente de 4, coloque na tela o texto Você respondeu ao anti-spam incorretamente!

Ou então

coloque na tela a mensagem Você precisa responder todas as questões! Lembre-se meu querido desenvolvedor que os textos na programação estão diferentes porque os acentos html estão sendo feitos com html para evitar que o navegador interprete errado e moste na tela símbolos estranhos. ok?

E por último, finalizamos o nosso tratamento php fechando a tag para o servidor para de interpretar e não entrar em loop (repetição) com

.

 

Conclusão: Hoje com muito sofrimento e dificuldade aprendemos a fazer um formulário html5 com css3 e php para que nosso site seja de qualidade e moderno, aproveite e faça suas modificações visuais, faça seus tratamentos e crie da forma que deseja a parte visual da “coisa toda”!

Obrigado por ver e teremos muito mais.

 



Novo Site

E ai pessoal, tudo bem?
Novo site no ar com tudo que temos direito, hospedei o site em um local de qualidade e aqui poderei fazer meus tutoriais com qualidade e prestar informações para a comunidade!
Estou preparando para fazer tutoriais em vídeo (em breve chegam os fones de ouvidos novos!)

Enquanto isto, somente os escritos!
Qualquer dúvida utilize o formulário de contato!