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

 

Vale a pena investir em desenvolvimento?

Olá queridos leitores, hoje temos uma dúvida que massacra muita gente: Vale a pena investir em desenvolvimento?

Antes de falarmos sobre compensar (termos financeiros) vamos abordar o que devemos ter para fazermos sucesso ao desenvolver sistemas ou investir nessa área.

Você gosta do que faz?

A primeira e mais sagrada de todas as perguntas, você realmente gosta do que faz (ou pensa em fazer)? Investir em desenvolvimento vai te custar no mínimo algumas centenas de reais ou MUITO tempo caso você queira fazer no método autodidata. Para iniciar tudo você tem que ver se isso realmente é uma paixão e acredite, problemas (grandes problemas) aparecerão no meio do caminho:

  • Desânimo;
  • Incompreensão do conteúdo estudado;
  • Oportunidades atraentes;
  • Dúvidas sobre sua escolha!

Para fazer esta escolha você deve primeiro pensar se está disposto (a) a responder e agir conforme sua resposta para estas problemáticas.

O mercado de trabalho é atraente?

Nem sempre o mercado de trabalho é atraente, digo isto por motivos óbvios como em qualquer outra profissão digital:

A “prostituição” dos serviços de desenvolvimento seguido da falta de qualidade dos desenvolvedores, então a maioria dos serviços que você pega é conserto de erros ou refazer algo não terminado.

Muitas vezes alguns “desenvolvedores” pegam um serviço para fazer para um cliente e acaba fazendo tantos hooks que quando está em 60% da parte inicial ele já desistiu e nem ele consegue entender o que ele fez.

Acontece que até ele chegar a este ponto, ele pegou um serviço de R$: 200,00/hora por R$: 12,00/hora e ainda disse que entregaria na metade do prazo estimado de um desenvolvedor sênior que faria rotinas de testes, debug, etc.

Mas e porque oferecem tantas vagas com salários atraentes em sites de empregos?

Simples, você vai ter que investir alguns milhares em certificação e talvez até em terceiro grau de ensino (chamado também de ensino superior) para poder “disputar” uma vaga dessas onde vai ter que corrigir erros não comentados.

Por outro lado temos a maravilhosa parte de desenvolver free-lance, ou seja, você vai desenvolver de acordo com a solicitação do cliente por um valor apresentado com antecedência e que você vai poder ganhar MUITO mais caso pegue um projeto do zero (o mercado está crescendo muito).

Vale a pena investir em desenvolvimento?

 

Qual linguagem de programação escolher para desenvolver?

Se você realmente não desistiu até aqui nesse artigo, vamos a uma resposta que é polêmica porque sempre terão os que vão defender aquilo que escolheram.

Digo que isto tem a ver apenas com ESCOLHA PESSOAL!

Porque escolha pessoal? Como você está lendo um artigo em português, creio que você seja Brasileiro, Português ou algum país que fale a linguagem lusa. Então, um dia você descobre que ama a língua RUSSA! Quem vai tirar da sua cabeça que você deve aprender russo? NINGUÉM!

Da mesma forma é linguagem de programação, você tem um java onde escreve 10 linhas para fazer um “Hello World”, enquanto em Ruby você faz isto em 1 linha. Mas quem garante que a pessoa não vai se sentir mais atraída por JAVA?

Eu particularmente sou amante de SQL, em específico de Microsoft SQL Server (e olha que sou amante também de tecnologias open), jamais vou partir direto para desenvolvimento comercial usando um Delphi da vida pois gosto muito de trabalhar com C# + MSSQL!

Então a escolha é pessoal, veja vídeos, veja artigos, leia manuais e tenho certeza que chegará a uma conclusão sábia e precisa.

Vale a pena investir em desenvolvimento?

 

SIM caso você ame o que faz, caso esteja disposto (a) a passar alguns aborrecimentos mas quer muito fazer do mundo digital, um mundo melhor.

Creio que vale a pena investir em desenvolvimento porque podemos fazer a diferença como em qualquer lugar, podemos mostrar ao mundo que não precisamos gastar muito para chegar a um conhecimento avançado de uma linguagem e quem sabe até ajudar a melhorar ela com reports e ajudando a comunidade que a desenvolve.

Creio que compensa porque o mercado de desenvolvimento é um dos mais expressivos no mundo em questão de recompensas financeiras e demanda.

Também creio que a nuvem veio para abranger novos desenvolvedores que farão uma teia perfeita de desenvolvimento web que trará um novo status ao desenvolvimento coletivo.

 

Enfim, digo: INVISTA! DEDIQUE! E tenha sucesso.

O que é linguagem de programação?

“Se eu tivesse 8 horas para cortar uma árvore, gastaria 6 delas afiando meu machado” – Abraham Lincoln – frase adaptada aos dias atuais pelo autor do blog.

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

Meu trampo concluído (parcialmente)

Olá, tudo bem?

Venho aqui pra mostrar pra vocês o que eu tenho feito esses dias, praticamente conclui um serviço que peguei de um site chamado Barcelos News.

Para ver como o site é e dar dicas, visualize aqui:
http://www.barcelosnews.com.br

Tem até um guia comercial lá que to implementando.

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.