Comment faire pour créer votre propre formulaire de contact Ajax

Ajax (Asynchronous JavaScript and XML) est devenu un outil très populaire dans la conception web. Ce tutoriel va vous apprendre comment faire un formulaire de contact ajax en utilisant PHP et jQuery. Voir le code de l'action ici.

Étape 1 - Le code HTML

Pour commencer les choses laisse hors créer un nouveau fichier et l'appeler contact.html, à l'intérieur nous voulons créer un simple formulaire HTML, comme ceci:

 <div class="loader"> </ div> class="bar"> </ div> <div id="conteneur"> forme <id = "ContactForm" method = "" action = "mail.php" > <p <label for="name"> Nom </ label> <input id="name" name="nom" /> </ p> <label for="email"> E-Mail < / label> <input id="email" name="email" /> </ p> <label for="message"> Votre <Message / label> <textarea id = "message" name = "message" rows = "4" cols = "30"> </ textarea> </ p> <input type="submit" class="submit" value="submit"/> </ p> </ form> < / div> 

Maintenant nous avons un formulaire de contact standard qui va soumettre à mail.php

Étape 2 - Le PHP

Maintenant, nous voulons créer un fichier php appelé mail.php cela va gérer les résultats de notre formulaire.

  <? Php
 / / Déclare nos variables
 $ Nom = $ _GET ['nom'];
 $ Email = $ _GET ['email'];
 $ Commentaire = $ _GET ['commentaire'];
 / / Récupère la date d'aujourd'hui
 Todayis $ = date ("L, F j, Y, g: ia");
 / / Définir un titre pour le message
 Sujet $ = "Un message";
 $ Message = "Message: $ commentaire \ r \ n De: $ nom \ r \ n Répondre à: $ email";

 / / Mettez ici votre adresse courriel
 mail (" [email protected]   ", $ Sujet, $ message);
 ?>
 <! - Afficher un message thankyou dans le rappel ->
 <h1> <span> Merci <h10> <? php echo $ nom?> </ H10> </ span> </ h1>
 <p>
   <span> Votre message sera répondu dès que possible. </ span>
 </ P>
 <h3> message envoyé le: </ h3>
 <p>
   <span> <? php echo $ todayis?> </ span>
 </ P> 

Dans cette page nous créer quelques variables, qui rassemblent le nom, l'email et le message de la forme, puis en utilisant le php mail () la fonction qu'il va envoyer à l'adresse mail indiquée. pour l'amour de ce tutoriel, j'ai utilisé [email protected] , Mais vous pouvez utiliser ce que vous voulez.

Une fois que tout cela a exécuté nous allons afficher un message de remerciement. en utilisant certaines des informations que nous avons recueillis.

Étape 3 - Le JQuery

Maintenant vient la partie intelligente. Pour commencer Nous aurons besoin d'inclure le framework jQuery. vous pouvez télécharger à partir du jquery site, puis fixez le comme ceci.

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

JQuery est un cadre javascript créé pour rendre la vie beaucoup plus facile, si c'est votre première fois à l'utiliser, consultez 15 Jours de jQuery . Nous voulons créer une fonction pour envoyer notre formulaire sans nous prendre vers une autre page. Nous pouvons le faire comme ceci.

 / / S'engager sur la chargement de la page $ (function () {/ / déclenchement Ajax soumet $ ('# ContactForm ») soumet (function () {/ / masquer le formulaire $ (' # ContactForm») hide ()..; / / afficher la barre de chargement $ ('loader'.) append ($('. bar ')); $ (' bar '{: bloc ».) / / envoyer la requête AJAX.) css (affichage}.' $. get ('mail.php', {nom :$('# nom '). val (), e-mail email :$('#'). val (), commenter le message :$('# '). Val ()}, / / ​​retour de la fonction de données (data) {/ / masquer le graphique $ ('bar'.) css ({display: 'none'.});. $ ('. loader') append (données) ;}); / / rester sur la page retour false;});}); 

Ce code va déclencher un événement lorsque le formulaire est soumis, ce qui permet de masquer la forme et afficher une barre de chargement. L'$. Get () est la ligne qui effectue l'appel AJAX pour mail.php qui envoie le formulaire de coordonnées via une méthode GET. Une fois que l'Ajax a réussi le résultat sera alors affiché sur l'écran. Cette injecte le contenu de la page mail.php contact.html.

Étape 4 - Le CSS

La dernière étape consiste à ajouter un peu de style CSS pour le formulaire pour s'assurer que nous pouvons montrer et de cacher les choses correctement. Ce n'est pas une neccesity, mais il lui donne une apparence plus propre.

  body {
   font-family: Helvetica;
 }

 . Chargeuse {

 }

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

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

 # Conteneur {
   padding: 20px;
   float: left;
   position: relative;
   hauteur: 200px;
   width: 100px;
 } 

Étape 5 - Put It Together

Si vous mettez tout le code ensemble votre contact.html devrait ressembler à ceci.

 <html> <head> <script type="text/javascript" src="../jquery.js"> </ script> <script type="text/javascript"> / / s'engager sur la chargement de la page $ (function . () {/ / déclenchement Ajax soumet $ ('# ContactForm ») soumet (function () {/ / masquer le formulaire $ (' # ContactForm») hide ();. / / afficher la barre de chargement $ ('. . loader '.) append ($('. bar')); $ ('. bar') css ({display: block '}.) / / envoyer la requête ajax $ get (' mail.php ", {nom :$('# nom '). val (), e-mail email :$('#'). val (), commenter le message :$('# '). val ()}, / / ​​retour de la fonction de données (data) {/ / masquer le graphique $ ('bar'.) css ({display: 'none'});.. $ ('. loader') append (data);}); / / rester sur la page return false;});}); </ script> <style type="text/css"> body {font-family:.. Helvetica;} {} chargeuse bar {display: none; background: url ('ajax- loader.gif ') no-repeat; margin-left: 20px; margin-top: 50px; hauteur: 20px; largeur: 230px;} # {ContactForm float: left; position: relative; background-color: # fdfdfd; hauteur: 200px;} # conteneur {padding: 20px; float: left; position: relative; hauteur: 200px; width: 100px;} </ style> </ head> <div <body> class="loader"> </ div> <div class="bar"> </ div> <div id="conteneur"> <form id="contactForm" method="" action="mail.php"> <p> <label for="name"> Nom </ label> <input id="name" name="nom" /> </ p> <label for="email"> E-Mail </ label> <input id = "email" name = "email" /> </ p> <p <label for="message"> votre message </ label> <textarea id="message" name="message" rows="4" cols="30"> < / textarea> </ p> <input type="submit" class="submit" value="submit"/> </ p> </ form> </ div> </ body> </ html> 

Ainsi, en utilisant seulement 2 fichiers, nous avons créé votre propre forme puissante conatct ajax. Son aussi simple que cela. Téléchargez le code de l'essayer pour vous-même.