Come creare il tuo Modulo di contatto Ajax

Ajax (Asynchronous Javascript and Xml) è diventato uno strumento molto popolare nel web design. Questo tutorial vi insegnerà come creare un modulo di contatto ajax utilizzando PHP e jQuery. Vedere il codice in azione qui.

Fase 1 - La HTML

Per iniziare cose lascia fuori creare un nuovo file e chiamarlo contact.html, al suo interno vogliamo creare un semplice form html, in questo modo:

 <div class="loader"> </ div> class="bar"> </ div> <div id="contenitore"> <form id = metodo "ContactForm" = "action =" "mail.php" > <p> <label for="name"> Nome </ label> <input id="name" name="name" /> </ p> <label for="email"> E-Mail < / label> <input id="email" name="email" /> </ p> <label for="message"> tuo <Messaggio / label> <textarea id = nome di "messaggio" = "messaggio" rows = "4" cols = "30"> </ textarea> </ p> <input class="submit" type="submit" value="submit"/> </ p> </ form> < / div> 

Ora abbiamo un modulo standard contatto che presenterà al mail.php

Fase 2 - Il PHP

Ora vogliamo creare un file php chiamato mail.php questo gestirà i risultati della nostra forma.

  <? Php
 / / Dichiariamo la nostra variabili
 $ Nome = $ _GET ['name'];
 $ Email = $ _GET ['email'];
 $ Commento = $ _GET ['commento'];
 / / Ottiene la data odierna
 Todayis $ data = ("l, F j, Y, g: ia");
 / / Imposta un titolo per il messaggio
 Soggetto $ = "Un messaggio";
 $ Message = "Messaggio: $ comment \ r \ n Da: $ nome \ r \ n Rispondi a: $ email";

 / / Mettere il vostro indirizzo e-mail
 mail (" [e-mail protetto]   ", $ Oggetto, $ messaggio);
 ?>
 <-! Visualizza un messaggio di ringraziamento nella richiamata ->
 <h1> <span> Grazie <h10> <? php echo $ nome?> </ h10> </ span> </ h1>
 <p>
   <span> Il tuo messaggio sarà risposto nel più breve tempo possibile. </ span>
 </ P>
 Messaggio <h3> Rilasciato il: </ h3>
 <p>
   <span> <? php echo $ todayis?> </ span>
 </ P> 

In questa pagina abbiamo creato alcune variabili, che raccolgono il nome, email e messaggio del modulo, quindi utilizzando il php mail () funzione che invierà questo all'indirizzo email specificato. per il bene di questo tutorial ho usato [e-mail protetto] , Ma si può usare quello che vuoi.

Una volta che tutto questo ha eseguito ci mostrerà un messaggio di ringraziamento. utilizzando alcune delle informazioni che abbiamo raccolto.

Fase 3 - La JQuery

Ora arriva la parte intelligente. Per iniziare abbiamo bisogno di includere il framework jQuery. è possibile scaricare questo dal jquery sito, poi attaccarlo in questo modo.

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

JQuery è un framework javascript creato per rendere la vita molto più facile, se la prima volta che lo si utilizza, check out 15 giorni di jQuery . Vogliamo creare una funzione per inviare il modulo senza portarci in un'altra pagina. Possiamo farlo in questo modo.

 / / Impegnare il caricamento della pagina $ (function () {/ / trigger ajax su submit $ ('# ContactForm') submit (function () {/ / nascondere la forma $ ('# ContactForm') hide ()..; / / mostrare la barra di caricamento $ ('caricatore.') aggiungere ($('. bar ')); $ (' bar '{: block'.) / / inviare la richiesta ajax.) css (display}. ' $. get ('mail.php', {nome :$('# nome '). val (), e-mail email :$('#'). val (), commentare messaggio :$('# '). val ()}, / / ​​ritorna la funzione dei dati (data) {/ / nascondere il grafico $ ('bar'.) css ({display: 'none'.});. $ ('. caricatore') append (dati) ;}); / / stare sulla pagina di ritorno false;});}); 

Questo codice si attiva un evento quando il modulo viene inviato, che nasconde il modulo e visualizzare una barra di caricamento. Il $. Get () è la linea che effettua la chiamata ajax per mail.php che invia i dati tramite un form metodo GET. Una volta che l'ajax ha avuto successo il risultato verrà visualizzato sullo schermo. Questo inietta il contenuto mail.php alla pagina contact.html.

Fase 4 - Il CSS

L'ultimo passo è quello di aggiungere un po 'stile css per il modulo per fare in modo siamo in grado di mostrare e nascondere le cose correttamente. Sua non è una neccesity, ma fa sembrare più pulito.

  body {
   font-family: helvetica;
 }

 . Caricatore {

 }

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

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

Fase 5 - Put It Together

Se metti tutto il codice insieme il tuo contact.html dovrebbe essere simile a questo.

 <html> <script type="text/javascript" src="../jquery.js"> </ script> <script type="text/javascript"> / / impegnarsi sul caricamento della pagina $ (funzione . () {/ / trigger ajax su submit $ ('# ContactForm') submit (function () {/ / nascondere la forma $ ('# ContactForm') nascondere ();. / / mostrare la barra di caricamento $ ('. . caricatore '.) append ($('. bar')); $ ('. bar') css ({display: 'block'}.) / / inviare la richiesta ajax $ get ('mail.php', {nome :$('# nome '). val (), e-mail email :$('#'). val (), commentare messaggio :$('# '). val ()}, / / ​​ritorna la funzione dati (dati) {/ / nascondere il grafico $ ('bar'.) css ({display: 'none'});.. $ ('. caricatore') append (dati);}); / / stare sulla pagina return false;});}); </ script> <style type="text/css"> body {font-family:.. Helvetica;} {} caricatore bar {display: none; background: url ('ajax- loader.gif ') no-repeat; margin-left: 20px; margin-top: 50px; altezza: 20px; width: 230px;} # ContactForm {float: left; position: relative; background-color: # fdfdfd, altezza 200px;} # contenitore {padding: 20px; float: left; position: relative; height: 200px; width: 100px;} </ style> </ head> <div <body> class="loader"> </ div> <div class="bar"> </ div> <div id="contenitore"> <form id="contactForm" method="" action="mail.php"> <p> <label for="name"> Nome </ label> <input id="name" name="name" /> </ p> <label for="email"> E-Mail </ label> <input id = nome "email" = "email" /> </ div> <label for="message"> tuo messaggio </ label> <textarea id="message" name="message" rows="4" cols="30"> < / textarea> </ p> <input class="submit" type="submit" value="submit"/> </ p> </ form> </ div> </ body> </ html> 

Quindi, utilizzando solo 2 file che abbiamo creato il vostro molto proprio potente modulo conatct ajax. Il suo un semplice. Scarica il codice e provarlo di persona.