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.

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

Related posts:

1. PHP Mail – Formulário De Contacto
2. Como Criar Formulário Com Barra De Progresso Em jQuery
3. jQuery – Formulário Login Com Efeito Deslizamento
4. Formulário De Registo E Login Animado Com jQuery
5. Text Hints Em Campos De Formulário Com CoolInput