Accueil > ajax > formulaire-contact-ajax

{ Formulaire de contact ajax / php }

Introduction

Formulaire de contact basé sur la technologie AJAX, sûr est plutôt bien développé il s'occupe de vérifier que tous les champs sont bien remplis avant d'envoyer le contenu, il vérifie également la validité de l'adresse email. Petit plus assez agréable, on peut choisir de s'en envoyer une copie pour soi.

ajax_form

Téléchargement & placement des fichiers

Une fois que vous aurez acquis une copie de l'archive, décompressez l'archive et placez dans le dossier 'images' l'image suivante :

loading.gif

Dans votre dossier comprenant les scripts (perso je les nomme "js" donc attention au lien si votre dossier à un nom différent), ajoutez-y les scripts qui suivent :

contact.js
functionAddEvent.js
xmlHttp.js

Dans un autre dossier nommé 'common' (encore une fois, attention au lien) placez-y les fichiers suivants :

xmlHttpRequest.php
contact.php

Fichiers javascript

3 scripts dans le dossiers "js", 3 scripts à inclure dans le header de votre page.

<script type="text/javascript" src="js/functionAddEvent.js"></script>
<script type="text/javascript" src="js/contact.js"></script>
<script type="text/javascript" src="js/xmlHttp.js"></script>

Html

A présent, intégrer dans votre page ou se trouvera le formulaire le code ci-dessous

<p id="loadBar" style="display:none;">
<strong>Votre email est en cours d'envoi, merci de patienter</strong>
<img src="images/loading.gif" alt="Chargement..." title="Envoi en cours" />
</p>

<p id="emailSuccess" style="display:none;">
<strong style="color:green;">Votre email a été envoyé avec succès !</strong>
</p>

<div id="contactFormArea">
<form action="scripts/contact.php" method="post" id="cForm">
<fieldset>
<label for="posName">Name:</label>
<input class="text" type="text" size="25" name="posName" id="posName" />
<label for="posEmail">Email:</label>
<input class="text" type="text" size="25" name="posEmail" id="posEmail" />
<label for="posRegard">Regarding:</label>
<input class="text" type="text" size="25" name="posRegard" id="posRegard" />
<label for="posText">Message:</label>
<textarea cols="50" rows="5" name="posText" id="posText"></textarea>
<label for="selfCC">
<input type="checkbox" name="selfCC" id="selfCC" value="send" /> Send CC to self
</label>
<label>
<input class="submit" type="submit" name="sendContactEmail" id="sendContactEmail" value=" Envoyer " />
</label>
</fieldset>
</form>
</div>

Css

Donnons un peu de style à ce formulaire !

fieldset 	{ 
border:0;
margin:0;
padding:0; 
}
label 	{ 
display:block;
}
input.text,textarea 	{
width:300px;
font:12px/12px 'courier new',courier,monospace;
color:#333;
padding:3px;
margin:1px 0;
border:1px solid #ccc;
}
input.submit 	{ 
padding:2px 5px;
font:bold 12px/12px verdana,arial,sans-serif; 
}

Configuration

Maintenant que vous avez suivi toutes les étapes précédentes vous pouvez finaliser l'implémentation en changement les informations d'envoi. Ce sont quatres variables contenues dans le fichier contact.php

Les variables à modifier sont les suivantes

$yourName = 'John Doe';
$yourEmail = 'user@example.com';
$yourSubject = 'testJax';
$referringPage = 'http://www.votre_site.com/contact.php';

Et voilà vous avez mis en place votre formulaire de contact sur votre site, et si vous avez bien suivi toutes les étapes il devrait même fonctionner ! ;-)