How To Create Your Own Ajax Kontaktformular

Ajax (Asynchronous Javascript and XML) ist mittlerweile ein sehr beliebtes Tool im Web-Design. In diesem Tutorial lernen Sie, wie Sie ein Kontaktformular AJAX mit PHP und jQuery machen. Sehen Sie den Code in Aktion hier.

Schritt 1 - Die HTML -

Um die Dinge beginnen, erstellen wir eine neue Datei und nennen es contact.html, darin wollen wir ein einfaches HTML-Formular zu erstellen, etwa so:

  <div class="loader"> </ div>
 <div class="bar"> </ div>
 <div id="container">
   <form id="contactForm" method="" action="mail.php">
   <p>
     <label for="name"> Name </ label>
     <input id="name" name="name" />
   </ p>
   <p>
     <label for="email"> E-Mail </ label>
     <input id="email" name="email" />
   </ p>
   <p>
     <label for="message"> Ihre Nachricht </ label>
     <textarea id="message" name="message" rows="4" cols="30"> </ textarea>
   </ p>
   <p>
     <input type="submit" class="submit" value="submit"/>
   </ p>
   </ form>
 </ div> 

Jetzt haben wir ein Standard-Kontaktformular, die unterbreitet werden mail.php

Schritt 2 - The PHP

Nun wollen wir eine PHP-Datei mit dem Namen mail.php diesem werden die Ergebnisse der unser Formular kann nicht erstellt werden.

  <? php
 / / Variablen erklären, dass wir
 $ name = $ _GET [ 'name'];
 $ email = $ _GET [ 'email'];
 $ comment = $ _GET [ 'comment'];
 / / get heutige Datum
 $ todayis = date ( "l, F j, Y, g: ia");
 / / setze ein Titel für die Nachricht
 $ subject = "A message";
 $ message = "Nachricht: $ comment \ r \ n From: $ name \ r \ n Antwort an: $ email";

 / / schreiben Sie hier Ihre Email Adresse
 mail ( "email@address.com", $ subject, $ message);
 ?>
 <! - Zeigt eine Dankeschön-Nachricht in der Callback ->
 <h1> <span> Vielen Dank <h10> <? php echo $ name?> </ h10> </ span> </ h1>
 <p>
   <span> Ihre Nachricht wird so bald wie möglich beantwortet werden. </ span>
 </ p>
 <h3> Nachricht gesendet: </ h3>
 <p>
   <span> <? php echo $ todayis?> </ span>
 </ p> 

Auf dieser Seite schaffen wir einige Variablen, die den Namen, die E-Mail und Nachricht aus der Form zu sammeln, dann mit der PHP-mail ()-Funktion wird diese an die E-Mail-Adresse angegeben. Im Interesse der dieses Tutorial habe ich email@example.com verwendet, aber Sie verwenden können, was Sie wollen.

Wenn alle diese ausgeführt werden wir ein Dankeschön-Display angezeigt. über einige der Informationen die wir gesammelt haben.

Schritt 3 - Die JQuery

Jetzt kommt der Clou. So starten wir müssen die jquery Rahmen aufzunehmen. Sie können diese aus dem jquery Website herunterladen, dann fügen Sie es wie so.

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

JQuery ist ein JavaScript-Framework geschaffen, um das Leben um einiges leichter machen, wenn ihr es zum ersten Mal verwenden, lesen Sie in 15 Days of Jquery. Wir wollen eine Funktion, um unsere Form, ohne uns zu einer anderen Seite zu senden. Wir können dies tun, wie so.

  / / verpflichte mich auf die Seite zu laden
 $ (function () (
   / / Trigger Ajax vorlegen
   $ ( '# Kontaktformular). submit (function () (

     / / Schließen der Form
     $ ( '# Kontaktformular). hide ();

     / / show the loading bar
     $ ( '. loader'). append ($('. bar '));
     $ ( '. bar'). css ((display: 'block'));

     / / send die Ajax-Anfrage
     $. get ( 'mail.php', (name :$('# name '). val (),
                      E-Mail-:$('# E-Mail). val (),
                      Kommentar :$('# Nachricht '). val ()),

     / / return die Daten
     function (data) (
       / / Schließen der Grafik
       $ ( '. bar'). css ((display: 'none'));
       $ ( '. loader'). append (data);
     ));

   / / Aufenthalt auf der Seite
   return false;
   ));
 )); 

Dieser Code wird ein Ereignis ausgelöst, wenn das Formular abgeschickt wird, die in Form und verstecken Display ein Ladebalken wird. Die $. Get () ist die Linie, die den Ajax-Aufruf zu mail.php, die die Form Informationen über einen GET-Methode sendet macht. Sobald die ajax erfolgreich war das Ergebnis wird dann auf dem Bildschirm angezeigt werden. Dieses spritzt den Inhalt der mail.php die contact.html Seite.

Schritt 4 - Die CSS

Der letzte Schritt ist, um einige CSS-Styling zum Formular hinzuzufügen, um sicherzustellen, können wir ein-und ausblenden Dinge richtig. Es ist nicht ein aussuchmaschine, aber es macht es sieht Reiniger.

  body (
   font-family: Helvetica;
 )

 . loader (

 )

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

 # Kontaktformular (
   float: left;
   position: absolute;
   background-color: # fdfdfd;
   height: 200px;
 )

 # container (
   padding: 20px;
   float: left;
   position: absolute;
   height: 200px;
   width: 100px;
 ) 

Schritt 5 - Put It Together

Wenn man das alles zusammen den Code Ihrer contact.html sollte wie folgt aussehen.

 <html> <head> <script type="text/javascript" src="../jquery.js"> </ script> <script type="text/javascript"> / / auf der Seite zu laden engagieren $ (function () (/ / Trigger Ajax vorzulegen $ ( '# Kontaktformular). submit (function () (/ / Schließen der Form $ (' # Kontaktformular). hide (); / / show the loading bar $ ( '. Loader "). append ($('. bar ')); $ ('. bar '). css ((display:' block ')); / / Senden der Ajax-Request $ zu bekommen. (' mail.php ', (name :$('# name '). val (), E-Mail :$('# E-Mail). val (), :$('# Nachricht Kommentar "). val ()), / / das Data-Funktion (data) (/ / der Grafik $ ( '. bar') verstecken. css ((display: 'none')); $ ( '. loader'). append (data);)); / / auf der Seite bleiben return false;));)) </ script> <style type="text/css"> body (font-family: Helvetica;). loader (). bar (display: none; background: url ( 'ajax - loader.gif ') no-repeat; margin-left: 20px; margin-top: 50px; height: 20px; width: 230px;) # Kontaktformular (float: left; position: absolute; background-color: # fdfdfd; Höhe: 200px;) # container (padding: 20px; float: left; position: absolute; height: 200px; width: 100px;) </ style> </ head> <div class="loader"> </ div> <div class="bar"> </ div> <div id="container"> <form id="contactForm" method="" action="mail.php"> <p> <label for="name"> Name </ label> <input id="name" name="name" /> </ p> <label for="email"> E-Mail </ label> <input id = "email" name = "email" /> </ p> <label for="message"> Ihre Nachricht </ label> <textarea id="message" name="message" rows="4" cols="30"> < / textarea> </ p> <input type="submit" class="submit" value="submit"/> </ p> </ form> </ div> </ body> </ html> 

Also mit nur 2 Dateien, die wir haben Ihre ganz eigene leistungsfähige ajax conatct Formular erstellt. Its a simple as that. Laden Sie den Code und versuchen es für dich.