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=" "/> <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ções">Observaçõ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 [4] em formato .zip.
