Formulaire pour envoyer un mail AVERTISSEMENT : Ce tuto est une compilation de plusieurs sources trouvées sur internet, dont les références sont données à la fin de cet article. Le but de ce tutoriel n'est pas de faire un plagia de ces pages offertes gracieusement par leurs auteurs, mais de montrer comment adapter les différentes méthodes, éventuellement les perfectionner, bref vous expliquer comment les modifier pour les adapter à vos besoins. Il est supposé que vous êtes familiarisé(e) avec le langage html. La méthode la plus simple Plusieurs méthodes existent pour envoyer un mail depuis une page html. La plus simple consiste à utiliser l'instruction suivante, dans la partie body de votre page : <HTML> <HEAD> <TITLE>My Page</TITLE> </HEAD> <BODY> Envoyez moi un <A HREF="mailto:toto@titi.com">Mail!</A> </BODY> </HTML> Le problème, c'est que l'adresse peut être récupérée par des robots ou des gens mal intentionnés et vous allez être submergés de mails indésirables (spam, mails publicitaires, offres cochonnes, etc). On s'améliore Pour tromper les robots, on peut utiliser l'astuce suivante : l'adresse est découpée sur plusieurs lignes, le html n'étant pas 'sensible' aux sauts de lignes (sauf avec la directive <BR> bien entendu) : <BODY> Envoyez moi un <A HREF="mailto: toto@titi.com">mail!</a> </BODY> Vous pouvez même couper en plusieurs lignes mais bon, ce n'est pas le top, c'est une astuce facile, qui peut bien sûr être contournée très facilement. Nous allons voir comment compliquer un peu la chose, et surtout donner un look plus pro. mail_v1.doc 31/10/06 Page 1 of 7
Créer un formulaire C'est la que ça devient intéressant ; grâce à un formulaire html et quelques lignes de php, nous allons voir que ça prend une autre tournure. Attention : il parait que certains hébergeurs interdisent la fonction PHP mail(). Faites des tests auparavant. Ces scripts ont été testés chez free et melperso.net et fonctionnent correctement. Voici un exemple du formulaire : Q : Comment c'est-y qu'on fait ça? R : même pas dur, je vais te montrer. Voici le code du formulaire que nous allons copier dans un fichier "mail.html" et que nous allons commenter ci-après : mail_v1.doc 31/10/06 Page 2 of 7
<html lang="fr"> <title>contact</title> </head> <body> <!--DEBUT CODE FORMULAIRE--> <!-- Ce script a été développé par Nadine Gaine. Vous pouvez l'utiliser gratuitement à des fins NON-COMMERCIALES seulement, et le modifier à votre convenance. Trouvé sur http://www.toulouse-renaissance.net/c_outils/ --> <form method="post" action="mail.php" name="avis"> <table width="600"> <tr> <td width="35"></td> <td width="565"><h1>contact</h1><p> </td> </tr> <tr> <td width="35"></td> <td width="565"> <font face="verdana"><small>votre email :</small><br> <small><input type="text" name="email" size="40"></small></font> <font face="verdana"><small>(*)</small><br> <p><font face="verdana"><small>le sujet :</small><br> <small><input type="text" name="sujet" size="40"></small></font> <font face="verdana"><small>(*)</small><br> </p> <p><font face="verdana"><small>votre message :</small><br> <small><textarea rows="5" name="message" cols="40"></textarea></small></font> </p> <br> <i><font face="verdana"><small>(*) champs obligatoires.</small></i> <p> </p> <p><small><font face="verdana"> <input type="submit" value="envoyer" name="envoyer"> <input type="reset" value="recommencer" name="recommencer"> </font></small> <br> <br> </p> </td> </tr> <table> </form> <!--FIN CODE FORMULAIRE--> </body> </html> On créé un formulaire grâce aux balises dédiées <FORM>.</FORM>. La méthode de traitement est "POST" (il existe d'autres possibilités, je vous laisse voir les docs sur le sujet), l'action est "mail.php", c'est le nom du fichier qui va traiter ce formulaire (attention à la casse MIN/MAJ, surtout sur un serveur unix) et son nom est "AVIS", parcequ'il faut bien le nommer (disons que dans notre cas, ça ne servira à rien, c'est pour le principe). Dedans, on créé un tableau pour la mise en page (<TABLE>.</TABLE>. Je passe sur les déclarations de lignes/colonnes <TD> et <TR>. Dans ce formulaire, on va déclarer une zone d'entrée : <input type="text" name="email" size="40"> mail_v1.doc 31/10/06 Page 3 of 7
On a ainsi une entrée de type texte, dont le nom est "Email" et de taille 40 de longueur. Le nom va servir ensuite dans le script de traitement. Idem pour le sujet. Puis on va créer une zone de texte : <textarea rows="5" name="message" cols="40"></textarea> La zone de texte est en fait une entrée de type texte mais sur plusieurs lignes, ici 5 lignes, de longueur 40. Son nom est Message. On créé ensuite 2 boutons, l'un servant à envoyer le message, l'autre à reseter le formulaire : <input type="submit" value="envoyer" name="envoyer"> <input type="reset" value="recommencer" name="recommencer"> Ca se passe presque de commentaires : submit et reset sont des types dédiés dont la signification est claire. Value, c'est le texte qui va apparaître dans le bouton et name, encore une fois, c'est un nom que l'on donne, comme à une variable, pour pouvoir la traiter ensuite. Et c'est tout! En fait, ça c'est le formulaire, voyons maintenant comment le traiter. mail_v1.doc 31/10/06 Page 4 of 7
Traiter le formulaire On va créer un fichier "mail.php" qui contiendra ça : <html> <head></head> <body> <? /* Ce script a été développé par Nadine Gaine. Vous pouvez l'utiliser gratuitement à des fins NON-COMMERCIALES seulement, et le modifier à votre convenance. Trouvé sur http://www.toulouse-renaissance.net/c_outils/ */ $MailTo = "votre-mail@melperso.net"; //adresse à laquelle sera envoyé le contenu du formulaire $MailCc = "autre-mail@domaine.com"; // adresse à laquelle sera envoyé une copie $MailSubject = "$Sujet"; //texte qui va figurer dans le champ "sujet" du email $MailHeader = "From: ".$Email; //adresse email qui va figurer dans le champ "expéditeur" du email et qui peut être remplacée par la variable "$champx" ("$champ3"). /* Les routines suivantes permettent à chacune des variables de prendre la valeur des champs du formulaire et de les stocker ensuite dans la variable globale MailBody qui constituera le corps du message */ $Envoi = 1; //initialisation de la variable envoi à 1 if ($Email == ""){ echo("<font face=verdana size=2>vous n'avez pas renseigné votre adresse e-mail. Nous ne pourrons vous répondre.<br></font>"); //message qui s'affiche si le visiteur n'a pas rempli ce champ $Envoi = 0; } if ($Sujet == ""){ echo("<font face=verdana size=2><br>vous n'avez pas indiqué le sujet.</font><br>"); $Envoi = 0; } //S'il y a des erreurs, on propose de recommencer if ($Envoi == 0) echo("<p> </p><p> </p><p align=\"center\"> <A HREF=\"Javascript:history.go(-1)\"> <strong>retour</strong></a> <A HREF=\"home.htm\"><strong>Annuler</strong></a></p>"); //Envoi du message if ($Envoi == 1) { //sinon on envoie le mail mail($mailto, $MailSubject, $Message, $MailHeader); //envoi du message //affichage d'un message de confirmation. echo("<p><font face=verdana size=2>votre message a bien été envoyé.<br>merci de vos commentaires.</font>"); echo("<p> </p><p> </p><p align=\"center\"><a HREF=\"home.htm\"><strong>Retour</strong></a></p>"); }?> </body> </html> mail_v1.doc 31/10/06 Page 5 of 7
Le script php est situé entre les balises <? et?>. On commence par positionner les variables $MailTo, $MailCc, $MailSubject, et $MailHeader. Les commentaires dans le listing sont explicites. A noter toutefois la dernière affectation : $MailHeader = "From: ".$Email; On récupère l'entrée du formulaire nommée Email (voir plus haut). Le '.' entre la chaine "From: " et la variable $Email sert à concaténer les 2 informations, cad que la variable $MailHeader contiendra par exemple : From: toto@titi.com. Ensuite, on utilise la variable $Envoi pour tester les champs obligatoires du formulaire. Vous constatez que dans chaque test (if ($Email="") ) on positionne cette variable à 0 ou à 1 suivant que l'on souhaite rendre le champ obligatoire ou non. On récupère donc les informations du formulaire $Email, $Sujet dans les tests if Vous remarquez que dans les lignes echo("."), la syntaxe est la syntaxe html, puisque c'est ce qui s'affichera dans l'explorateur. Il y a donc certains méta-caractères à faire précéder du caractère \ (ex : \" pour utiliser le caractère "). Ensuite vient le verdict en testant la variable $Envoi. Si $Envoi = 0, c'est que l'utilisateur n'a pas rempli un champ obligatoire, ou toute autre raison que vous pouvez ajouter d'ailleurs. A noter que l'on affiche dans ce cas 2 liens : Retour et Annuler. Pour Retour, on utilise un lien du type : <A HREF="Javascript:history.go(-1)"><strong>Retour</strong></A> de façon à revenir sur le formulaire et conserver les champs déjà remplis par l'utilisateur! Sinon, le lien annuler de type : <A HREF="home.htm"><strong>Annuler</strong></a> permet de revenir sur une page de votre site, ici home.htm. Si $Envoi = 1, c'est que tout est OK, on va envoyer le message, en récupérant son contenu depuis le formulaire : mail($mailto, $MailSubject, $Message, $MailHeader); tout en affichant une petite baffouille pour dire que tout est OK : echo("<p><font face=verdana size=2>votre message a bien été envoyé.<br>merci de vos commentaires.</font>"); Et voilà, c'est pas plus compliqué. Comment? tu veux pouvoir joindre un fichier avec ton mail? OK, on va étudier cela dans le tuto "mailupload". @+ mail_v1.doc 31/10/06 Page 6 of 7
Sources Principalement des sites internet. Il y en a d'autres mais ce sont ceux que j'ai trouvé le plus intéressant sur le sujet. - webtutor (http://www.pagetutor.com/) en anglais mais bien expliqué pour apprendre le html. - Outils pour webmaster (http://www.toulouse-renaissance.net/c_outils). En français. - cours sur html et php (http://www.phpfacile.com/). En français. - http://phpcodeur.net ou vous trouverez un manuel et de la doc sur php, ainsi que des articles et tutos divers. En français. - http://www.creation-du-web.com/honolulu sur le html, javascript, php. En français. mail_v1.doc 31/10/06 Page 7 of 7