Grande parte da interação do usuário com o website é feita através de formulários. Facilitar o preenchimento e envio das informações é imprescindível. Em tempos de web 2.0 quase 3.0 o visitante tornou-se mais impaciente precisando de respostas rápidas e forçá-lo a preencher o formulário mais de uma vez é correr o risco de perder um visitante.
O formulário mais comum nos websites é o de contato. Neste tutorial vamos seguir o processo de criação de um formulário de contato que terá a validação e envio dos dados feitos utilizando javascript.
Ao invés de utilizar javascript puro, vamos contar como apoio da biblioteca jQuery. A principal vantagem é o menor tamanho do código. E ainda podemos contar com efeitos e código mais compreensível. O jQuery também se encarrega de fazer com que a requisição funcione em todos os navegadores, poupando nosso tempo.
Estrutura HTML
Formulário de Contato com jQuery
Enviando
Foi adicionado o título do tutorial em seguida uma div com a classe loading. Ela será escondida utilizando CSS e mostrada somente quando o formulário for submetido.
Aqui abro parênteses para destacar a importância de manter o usuário sempre informado sobre o que esta acontecendo. Pior que um design mal feito é uma experiência frustrante.
A última div tem um id muito sugestivo e dispensa apresentações.
Formulário
Iniciando pelo elemento form, indicamos na propriedade action para qual arquivo serão enviados os dados submetidos. Como vamos tratar a submissão utilizando javascript, se quiséssemos poderíamos substituir o nome do arquivo por “#”.
Mas e se o javascript estiver desabilitado? É pouco provável que isso aconteça, mas se acontecer estaremos prevenidos e os dados irão diretamente para o arquivo PHP.
Definimos também o método e identificamos o formulário para referência no arquivo javascript.
Note que os campos nome, email e observações também recebem ids.
Incluindo Os Arquivos
Precisamos linkar o arquivo de estilização, a biblioteca jQuery e o arquivo javascript responsável pela manipulação dos dados. O cabeçalho do arquivo ficheiro HTML fica assim:
Javascript
A função que inicia o arquivo informa que o código somente será executado após a estrutura HTML da página estar completa.
O evento disparador da execução do código é o clique no botão “enviar” do formulário. Ele foi identificado na página do formulário com a id “enviar_contato”.
$(function(){
$('#enviar_contato').click(function(){
})
})
Coletando Os Dados
- A div que contém a animação e a palavra “Enviando” será mostrada;
- O formulário será resetado. Todas as informações preenchidas serão apagadas.
- Em seguida o formulário terá a opacidade reduzida lentamente para que fique mais destacada a div que informa o que esta acontecendo.
O que ocorre quando o botão é clicado? Inicialmente coletamos os dados preenchidos nos campos do formulário. Em seguida criamos uma variável para cada valor e preenchemos ela utilizando a função val() que retorna o valor do elemento.
var nome = $("#nome").val();
var email = $("#email").val();
var msg= $("#msg").val();
Retornando ao formulário você verá que cada campo possui um id único que foi utilizado aqui para retornar o valor correspondente.
Validação
Vamos conferir se todos os campos estão preenchidos utilizando uma expressão condicional.
if (nome!='' & email!='' & msg!='')
{
$('.loading').show();
$('form')[0].reset();
$('#form-contato').fadeTo("slow", 0.3);
}else{
alert("Existem campos incompletos no formulário. Favor preencher todos.");
}
Se todos os campos foram preenchidos ocorre o seguinte:
- A div que contém a animação e a palavra “Enviando” será mostrada;
- O formulário será resetado. Todas as informações preenchidas serão apagadas.
- Em seguida o formulário terá a opacidade reduzida lentamente para que fique mais destacada a div que informa o que esta acontecendo.
Mas, se algum campo não foi preenchido é mostrado um alert informando sobre o ocorrido e consequentemente os dados não serão enviados nem apagados.
Esta parte do código valoriza muito a interação com o usuário. Ao ver o formulário mais opaco e distinguindo um novo elemento na tela que informa sobre o que esta acontecendo, o usuário tem certeza que vez tudo corretamente.
Adotamos a mesma abordagem em caso de erro. Nenhum dado é perdido e o alerta trata de manter a parte interessada a par do ocorrido.
Envio E Retorno Dos Dados
Chegamos ao coração do código, as linhas responsáveis pela comunicação entre arquivos. Utilizamos a função post(), que apresenta a seguinte sintaxe:
jQuery.post( url, [data], [callback], [type] )
Entre parênteses informamos o endereço da página que receberá os dados, os dados em si, o que acontece se a operação for um sucesso e finalmente, qual o formato dos dados retornados.
Ela não oferece a possibilidade de tratamentos de erros já que é uma versão mais simples do ajax(). Mas para o propósito deste tutorial funciona já que o
$.post(“envia.php”,{nome: nome, email:email, msg:msg},
function(retorno){
$(‘.loading’).fadeOut();
$(‘#resposta’).html(retorno).fadeIn();
$(‘#form-contato’).fadeTo(“slow”, 1);
$(‘#resposta’).fadeOut(3000);
})
Iniciamos a função e informamos que o arquivo destino é o “envia.php”. Entre parênteses formamos os pares ‘variável : valor’. Uma representação ficaria assim:
{nome: josé, email:jose@com, msg:contato}
A função seguinte ocorre se a operação retornar algum dado. E a palavra retorno entre parênteses é a variável que contém todas as informações retornadas.
Primeiramente a div com a animação e texto informando sobre o envio vai desaparecer com o fadeOut().
Na sequência a div resposta recebe o conteúdo HTML retornado e aparece na tela com o fadeIn().
O formulário por sua vez retorna lentamente a opacidade normal.
E por último a div que recebeu a resposta do arquivo desaparece depois de três segundos.
O código completo fica assim:
$(function(){
$('#enviar_contato').click(function(){
var nome = $("#nome").val();
var email = $("#email").val();
var msg= $("#msg").val();
if (nome!='' & email!='' & msg!='')
{
$('.loading').show();
$('form')[0].reset();
$('#form-contato').fadeTo("slow", 0.3);
$.post("envia.php",{nome: nome, email:email, msg:msg},
function(retorno){
$('.loading').fadeOut();
$('#resposta').html(retorno).fadeIn();
$('#form-contato').fadeTo("slow", 1);
$('#resposta').fadeOut(3000);
})
}else{
alert("Existem campos incompletos no formulário. Favor preencher todos.");
}
return false;
})
})
O returne false no final da função click() evita que o formulário seja submetido ao clicar no botão Enviar.
O código javascript apresentado não avalia o conteúdo submetido, então é importante que seja feita mais uma camada de validação no arquivo PHP.
DOWNLOAD Descarregue o código utilizado neste tutorial para a criação do Formulário De Contacto Com jQuery em formato .zip.
17 Responses
mas como posso por a enviar par o meu e-mail?
cara, vai no arquivo envia.php e depois de tudo, antes apenas do ?> vc digita: mail("seuEmail@gmail.com", $nome, $texto, $email);
Com isso ele vai enviar para seu emai, o assunto vai ser o nome da pessoa e dentro do email vai ter a mensagem seguida do email da pessoa.
Eu queria que ele colocasse como assunto algo do tipo "Contato do seu site" mas essa foi a unica forma que consegui que ele lesse os 3 campos.
Se vc nao quer mudar mais nada faz isso que funciona.
abs.
Onde alterar para enviar para o mail pretendido?
E..Aparece a seguinte msg:
Enviando
E-mail inválido!'; exit (); } elseif (!filter_var($email, FILTER_SANITIZE_EMAIL)) { echo '
Contém caracteres não permitidos.
'; exit(); } if ($nome != '' && $email != '' && $texto != '') { echo '
Tudo certo.
'; } else { echo '
Dados falta.
'; } ?>
Não consigo fazer esse codigo funcionar, já tentei de todo o jeito, mas sempre que aperto no botao que ativa tudo a mensagem naum aparece na mesma janela do form, ao inves disso a janela carrega o envia.php e mostra a mensagem.
bom vc nao deve ter pozto o codico; <link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
no cabeçalho……..
Pra fazer o formulário enviar para seu email faz o seguinte:
Vai no arquivo envia.php e depois de tudo, antes apenas do ?> vc digita: mail("seuEmail@gmail.com", $nome, $texto, $email);
Com isso ele vai enviar para seu emai, o assunto vai ser o nome da pessoa e dentro do email vai ter a mensagem seguida do email da pessoa.
Eu queria que ele colocasse como assunto algo do tipo "Contato do seu site" mas essa foi a unica forma que consegui que ele lesse os 3 campos.
Se vc nao quer mudar mais nada faz isso que funciona.
abs.
Formulário envia.php
<html><head><title>Formulário de contato </title><script language="javascript">setTimeout("self.close();",5000)</script></head><body><font face="tahoma" size="2"><?php//iremos declarar as variaveis que recebemos pelo método post//em alguns servidores nem precisamos declarar, depende do register_global=on ou =off$nome=$_POST[nome];$email=$_POST[email];$assunto=$_POST[assunto];$mensagem=$_POST[mensagem];$origem=$_POST[origem];
//agora vamos enviar todos esses dados usando a função mailmail("email@email.com.br","$assunto","Nome: $nomeEmail: $emailAssunto: $assuntoOrigem: site.com.brMensagem: $mensagem","FROM:$nome<$email>");?>Obrigado pelo contato.Sua mensagem foi enviada com sucesso!A janela fechará em 5 segundos.</font></body></html>
Explicação:~ O formulário foi desenvolvido para ser aberto em uma nova janela (_blank), como se fosse popup, acho interressante porque em uma página mais rápida de ser carregada e não é necessário o visitante sair da página que está navegando.~ O java script dentro da "head" informa um comando pra fechar o formulário em 5 segundos, isso é interessante se for usado como supracitado, se não será fechada à página (site / blog) que o visitante está navegando, mas qualquer coisa é só excluir a linguagem.~ Inseri a informação "Origem", por que uso 2 canais de contatos (site e blog), então informei o local de onde o visitante está enviando o contato.
Ola como eu faço para ter o email de resposta desse formulario
Muito bom…valew
Olá!
Meu formulário quase funciona. Mas o email chega vazio na minha caixa de entrada.
O que pode estar faltando imagino que seja nesse arquivo envia.php. Alguém sabe me dizer vendo o código se ele está todo certo?
<?php$nome = htmlspecialchars(strip_tags($_POST['nome']));$texto = htmlspecialchars(strip_tags($_POST['mensagem']));$email = htmlspecialchars(strip_tags($_POST['email']));
if ($nome != '' && $email != '' && $texto != ''){echo 'Recebemos a sua mensagem, em breve retornaremos. Obrigada!';} else {echo 'Ops, parece que alguns dados estão faltando.';}mail("MeuEmail@gmail.com", $nome, $texto, $email); ?>
Será que alguem ainda responde nesse webmaster.pt? o site é antigo! nao consigo receber uma resposta deles faz tempo.
Olá Danilo! Veja o exemplo do Fernando. Ele não faz parte do site. E no entanto está ajudar outros visitantes nos comentários. Nem sempre os autores de cada tutorial estão disponíveis para responder a dúvidas. O site é um ponto de partida para a sua aprendizagem. Não é um ponto de chegada. Se pudermos ajudar, estou certo que vamos ajudar… Você também pode responder. Se souber uma resposta, força! Um Abraço!
Quando eu mando enviar, só fica carregando o loading e nada acontece. Se alguém passou por isso e puder ajudar!
Desde já meu agradecimento.
Estou com o mesmo problema !
na mesma!
Preciso editar alguma coisa?
if (!filter_var($email, FILTER_VALIDATE_EMAIL))
{
echo 'E-mail inválido!';
exit ();
} elseif
(!filter_var($email, FILTER_SANITIZE_EMAIL))
{
echo 'Contém caracteres não permitidos.';
exit();
}
if ($nome != '' && $email != '' && $texto != '')
{
echo 'Tudo certo.';
} else {
echo 'Dados falta.';
}
Olá pessoal!
Esquece o Fernando e se concentra no meu Post. Para o seu arquivo enviar para o E-MAIL, edita o ENVIA.PHP e muda código todo. Põe o email que esta hospedado no seu SERVIDOR em PHP | MYSQL
<?php
$nome = htmlspecialchars(strip_tags($_POST['nome']));
$texto = htmlspecialchars(strip_tags($_POST['msg']));
$email = htmlspecialchars(strip_tags($_POST['email']));
if (!filter_var($email, FILTER_VALIDATE_EMAIL))
{
echo 'E-mail inválido!';
exit ();
} elseif
(!filter_var($email, FILTER_SANITIZE_EMAIL))
{
echo 'Contém caracteres não permitidos.';
exit();
}
if ($nome != '' && $email != '' && $texto != '')
{
echo 'Tudo certo.';
} else {
echo 'Dados falta.';
}
$msg = "Nome: $nome";
$msg .= "E-mail: $email";
$msg .= "Mensagem: $texto";
$recipient = "adm@maxjuniosantos.byethost3.com";
$subject = "Contato Website";
$header = "MIME-Version: 1.0rn";
$header .= "Content-Type: text/html; charset=iso-8859-1rn";
$header .= "From: $emailrn";
if (mail ($recipient, $subject, $msg, $header))
?>