Un formulaire de contact simple dans votre site web
Vous souhaitez intégrer dans votre site un formulaire de contact, sans pour autant vous embarasser avec la fonction mailto qui, entre autres inconvénients,
- pose des difficultés aux utilisateurs de webmail (yahoo, hotmail, gmail...),
- vous expose à de nombreux spams.
Voici comment créer un formulaire de contact simple et fonctionnel en trois étapes !
1e étape : créer un formulaire HTML
Voici le code HTML d’un formulaire de contact basique.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formulaire</title> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <meta name="content-language" content="fr" /> <meta name="description" content="formulaire de contact" /> </head> <body> <form id="formulaire" method="post" action="mail.php"> <label for="nom">Nom</label> <input type="text" id="nom" name="nom"/> <label for="email">Email</label> <input type="text" id="email" name="email"/> <label for="requete">Votre demande</label> <textarea id="requete" name="requete" rows="6" cols="60"> </textarea> <input type="submit" value="envoyer"/> </form> <body> <html>
Explications :
L’élément <form> crée un formulaire.
L’élément <input> crée un champ de saisie de texte. Ici l’élément <input>
est utilisé pour demander le nom et le prénom de l’utilisateur.
L’élément <textarea> crée un champ de saisie de texte de plusieurs lignes. La taille du
cadre à remplir est définie par les attributs rows (lignes) et cols (colonnes).
L'élément <input type="submit"> crée un bouton de validation.
Une fois actionné, le formulaire est validé et entraîne l’ouverture du fichier mail.php.
Nous reviendrons sur l'élément <label> un peu plus loin.
Pour plus d'explications sur les formulaires, vous pouvez vous référer aux recommandations du W3C traduites en français
Ne vous occupez pas à ce stade de la mise en page. Le CSS est là pour ça. Vous pourrez en temps utile assigner des propriétés CSS à tous les éléments HTML de votre formulaire.
2e étape : script PHP, envoi du formulaire par mail
Toutes les informations envoyées dans le formulaire sont désormais à insérer dans le mail que
le serveur va vous envoyer, une fois que l’utilisateur aura cliqué sur le bouton
<input type="submit">. Pour cela un peu de PHP sera indispensable.
Nous entrerons plus dans le détail par la suite.
Contentez vous à ce stade de créer un nouveau fichier texte, de recopier le code suivant et de
l’enregistrer dans un fichier que vous allez nommer mail.php.
Si vous souhaitez changer la désignation du fichier mail.php, vous devez également la modifier dans le
code source du formulaire <form id="formulaire" method="post" action="mail.php">
<?php
$nom=$_POST['nom'];
$email=$_POST['email'];
$requete=$_POST['requete'];
define("DESTINATAIRE",'votremail@votredomaine.com');
$reponse= 'Bonjour.
<p>Nous avons bien noté votre demande.</p>
<p>Nous vous répondrons dès que possible.</p>';
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "From: $nom <$email>" . "\r\n";
mail(DESTINATAIRE, 'sujet_du_mail', $requete, $headers);
mail($email, 'votre demande', $reponse, 'From : <'. DESTINATAIRE .' >');
unset ($nom, $email, $requete, $reponse, $headers) ;
header('Location: merci.html');
?>
Il va de soi que vous devez adapter l'adresse mail du destinataire 'votremail@votredomaine.com' et le 'sujet_du_mail'.
Explications :
Les données qui commencent par un $ sont des variables. Ces variables correspondent essentiellement aux
données communiquées par les utilisateurs ($nom, $email, $requete).
La fonction mail() donne l’ordre au serveur d’envoyer un mail à l’adresse indiquée. L’ordre
est toujours identique : mail (destinataire, sujet, contenu, éléments additionnels contenus dans l’en tête :
les headers). Pour plus de détails, référez-vous aux standards PHP
Un 1er mail vous est adressé et contient la demande envoyée par votre utilisateur, ici la variable $requete.
Un 2e mail est adressé à l’utilisateur en votre nom et lui confirme simplement que sa demande a bien été reçue,
ici la variable $reponse.
La fonction unset() donne l’ordre au serveur d’effacer les variables.
La fonction header () donne l’ordre au serveur de diriger l'utilisateur vers la page merci.html.
Là encore, si vous décidez de renommer le fichier merci.html, il vous reviendra de modifier la fonction header().
3e étape : confirmer à l’utilisateur que le formulaire a bien été traité
Si les données envoyées par l’utilisateur ont bien été reçues et sont conformes, n’oubliez pas d’en tenir l’utilisateur informé.
Cette confirmation peut avoir lieu par l’affichage d’une page HTML spécifique et l’envoi d’un mail de confirmation. Le fichier PHP ci-dessus a déjà envoyé automatiquement à l’utilisateur un mail de confirmation.
Création d’une page de remerciement que vous désignez merci.html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formulaire</title> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> <meta name="content-language" content="fr" /> <meta name="description" content="formulaire de contact" /> </head> <body> <p>Merci d'avoir rempli ce formulaire.</p> <p>Nous vous apporterons une réponse dans les meilleurs délais</p> <a href="http://www.votresite.com">retourner à la page d'accueil</a> </body> </html>
Et le tour est joué vous disposez d’un formulaire rudimentaire.
Attention toutefois à vous protéger contre le spam. À Laisser ce formulaire en l'état, vous servirez de cible.