Como criar seu próprio formulário de contato Ajax

Ajax (Asynchronous JavaScript and XML) tornou-se uma ferramenta muito popular em web design. Este tutorial vai lhe ensinar como fazer um formulário de contato ajax usando PHP e jQuery. Veja o código em ação aqui.

Passo 1 - O HTML

Para começar as coisas, vamos criar um novo arquivo e chamá-lo contact.html, dentro dele queremos criar um formulário HTML simples, assim:

  <div class="loader"> </ div>
 <div class="bar"> </ div>
 <div id="container">
   <form id="contactForm" method="" action="mail.php">
   <p>
     <label for="name"> Nome </ label>
     <input id="name" name="nome" />
   </ P>
   <p>
     <label for="email"> E-Mail </ label>
     <input id="email" name="email" />
   </ P>
   <p>
     <label for="message"> Sua Mensagem </ label>
     <textarea id="message" name="message" rows="4" cols="30"> </ textarea>
   </ P>
   <p>
     <input class="submit" type="submit" value="submit"/>
   </ P>
   </ Form>
 </ Div> 

Agora temos um formulário de contato padrão que irá submeter à mail.php

Passo 2 - O PHP

Agora, queremos criar um arquivo php chamado mail.php isso vai lidar com os resultados do nosso formulário.

  <? Php
 / / Declarar nossas variáveis
 $ Name = $ _GET ['nome'];
 $ Email = $ _GET ['email'];
 $ Comment = $ _GET ['comment'];
 / / Obter a data de hoje
 $ Todayis = date ("l, F j, Y g: ia");
 / / Definir um título para a mensagem
 $ Subject = "A Mensagem";
 $ Mensagem = "Mensagem: $ comment \ r \ n De: $ nome \ r \ n Responder para: $ email";

 / / Coloque seu endereço de e-mail aqui
 mail (" [email protegido]   ", $ Assunto, $ mensagem);
 ?>
 <! - Exibir uma mensagem thankyou no retorno ->
 <h1> <span> Obrigado <h10> <? php echo $ nome?> </ h10> </ span> </ h1>
 <p>
   <span> Sua mensagem será respondida o mais breve possível. </ span>
 </ P>
 Mensagem enviada em <h3>: </ h3>
 <p>
   <span> <? php echo $ todayis?> </ span>
 </ P> 

Nesta página vamos criar algumas variáveis, que recolhem o nome, e-mail e mensagem da forma, em seguida, usando o php mail () função que irá enviá-lo para o endereço de e-mail especificado. por causa deste tutorial eu usei [email protegido] , Mas você pode usar o que quiser.

Depois de tudo isso foi executado, vamos exibir uma mensagem de agradecimento. usando algumas das informações que coletamos.

Passo 3 - O JQuery

Agora vem a parte inteligente. Para começar, terá de incluir o quadro jquery. você pode baixar este do jquery site, em seguida, anexá-lo como tal.

  <script type="text/javascript" src="yourDirectory/jquery.js"> 

Jquery é um framework javascript criado para tornar a vida muito mais fácil, se sua sua primeira vez com ele, confira 15 dias de jQuery . Queremos criar uma função para enviar o formulário sem nos levar para outra página. Podemos fazer isso da seguinte forma.

  / / Se envolver no carregamento da página
 Função $ (() {
   / / Gatilho ajax em submit
   $ ('# ContactForm'). Submit (function () {

     / / Ocultar o formulário
     $ ('# ContactForm') hide ().;

     / / Mostrar a barra de carregamento
     $ ('Loader.') Append ($ ('bar.')).;
     $ ('Bar'.) Css ({display: 'block'}).;

     / / Enviar o pedido de ajax
     . $ Get ("mail.php", {name:. $ ('# Nome') val (),
                      e-mail: $ ('# e-mail') val (),.
                      comentário: $ ('mensagem #') val ()}.

     / / Retornar os dados
     função (dados) {
       / / Esconder o gráfico
       $ ('Bar'.) Css ({display: 'none'}).;
       $ ('Loader.') Append (dados).;
     });

   / / Permanecer na página
   return false;
   });
 }); 

Este código irá disparar um evento quando o formulário é enviado, que vai esconder a forma e exibir uma barra de carregamento. O. $ Get () é a linha que faz a chamada ajax para mail.php que envia os detalhes do formulário através de um método GET. Uma vez que o ajax tem sido bem sucedido o resultado será então exibida na tela. Este injecta o conteúdo de mail.php à página contact.html.

Passo 4 - A CSS

O último passo é adicionar alguns estilos CSS para a forma para se certificar de que podemos mostrar e ocultar as coisas corretamente. A sua não neccesity um, mas faz com que pareça mais limpa.

  body {
   font-family: Helvetica;
 }

 . Carregador {

 }

 . Bar {
   display: none;
   background: url ('ajax-loader.gif') no-repeat;
   margin-left: 20px;
   margin-top: 50px;
   height: 20px;
   width: 230px;
 }

 # {ContactForm
   float: left;
   position: relative;
   background-color: # fdfdfd;
   height: 200px;
 }

 # Container {
   padding: 20px;
   float: left;
   position: relative;
   height: 200px;
   width: 100px;
 } 

Passo 5 - Coloque It Together

Se você colocar todo o código em conjunto o seu contact.html deve olhar como este.

 <html> <head> <script type="text/javascript" src="../jquery.js"> </ script> <script type="text/javascript"> / / se envolver no carregamento da página $ (function () {/ trigger / ajax em enviar $ ('# ContactForm') submit (function () {/ / ocultar o formulário $ ('# ContactForm') hide ();.. / / mostrar a barra de loading $ ('. loader ') append ($ ('. bar. ')); $ (' bar ') css ({display:.' block '}..) / / enviar o pedido ajax $ get ("mail.php", {name: $ ('# nome') val (), e-mail:. $ ('# email') val (), comentário:.. $ ('mensagem #') val ()}, / / ​​retorna a função de dados (data) {/ / esconder o gráfico $ ('bar'.) css ({display: 'none'});. ('. loader'). $ append (data);}); / / permanecer na página return false;});}); </ script> <style type="text/css"> body {font-family:. helvetica;}} {carregador bar {display: none; fundo:. url ('ajax- loader.gif ') no-repeat; margin-left: 20px; margin-top: 50px; height: 20px; width: 230px;} # ContactForm {float: left; position: relative; background-color: # fdfdfd; altura: 200px;} # container {padding: 20px; float: left; position: relative; height: 200px; width: 100px;} </ style> </ head> <div <body> class="loader"> </ div> <div class="bar"> </ div> id="container"> <form id="contactForm" method="" action="mail.php"> <p> <label for="name"> Nome </ label> <input id="name" name="nome" /> </ p> <p <label for="email"> E-Mail </ label> <input id = nome "email" = "email" /> </ p> <p <label for="message"> Seu <Mensagem / label> <textarea id="message" name="message" rows="4" cols="30"> < / textarea> </ p> <p <input class="submit" type="submit" value="submit"/> </ p> </ form> </ div> </ body> </ html> 

Então, usando apenas 2 arquivos, criamos o seu próprio poderoso ajax forma conatct. É um simples como isso. Baixe o código e experimentar por si próprio.