Formulário De Contacto Com jQuery

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


<h1>Formulário de Contato com jQuery</h1>
        <div class="loading">
        <p><img src="loading.gif" alt="&nbsp;"/>&nbsp;<strong>Enviando </strong></p>
        </div>
        <div id="resposta"></div>

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


        <form action="envia.php" method="post" id="form-contato">
        
        <fieldset>
        <label for="nome">Nome:</label>
        <input type="text" class="width230" name="nome" id="nome"  />
        
        <label for="email">E-mail:</label>
        <input type="text" class="width230" name="email" id="email" />
        
        <label for="observa&ccedil;&otilde;es">Observa&ccedil;&otilde;es:</label>
        <textarea rows="5" cols="3" class="width230" name="msg" id="msg"></textarea><br />
        
        <input type="submit" value="Enviar" name="enviar" id="enviar_contato" />
        </fieldset>
        
        </form>

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:


<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>

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.

Visitante satisfeito

DOWNLOAD Descarregue o código utilizado neste tutorial para a criação do Formulário De Contacto Com jQuery em formato .zip.

Be Sociable, Share!

17 Comentários

  1. calos

    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.

  2. Alves

    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.
    '; } ?>

  3. Filipe

    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.

  4. teo

    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&gt;
    <script type="text/javascript" src="javascript.js"></script>
    no cabeçalho……..

  5. 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.

  6. Luiz Ibiapina

    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.

  7. sami

    Ola como eu faço para ter o email de resposta desse formulario

  8. eumesmo

    Muito bom…valew

  9. Priscilla

    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); ?>

    • Danilo

      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!

  10. Leonardo

    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.

  11. Preciso editar alguma coisa?
    if (!filter_var($email, FILTER_VALIDATE_EMAIL))
    {
    echo 'E-mail inv&aacute;lido!';
    exit ();
    } elseif
    (!filter_var($email, FILTER_SANITIZE_EMAIL))
    {
    echo 'Cont&eacute;m caracteres n&atilde;o permitidos.';
    exit();
    }
    if ($nome != '' && $email != '' && $texto != '')
    {
    echo 'Tudo certo.';
    } else {
    echo 'Dados falta.';
    }

  12. MAX

    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&aacute;lido!';
    exit ();
    } elseif
    (!filter_var($email, FILTER_SANITIZE_EMAIL))
    {
    echo 'Cont&eacute;m caracteres n&atilde;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))

    ?>

Participa! Comenta...