Au travers de ce billet je vais vous expliquer comment créer un formulaire de contact avec remplissage obligatoire de certain champs et affichage de messages d’erreur si les champs en question ne sont pas renseignés. Le formulaire qui va suivre, va comporter, un champ civilité, nom, prénom, adresse, code postal, ville, email, téléphone et message. Avec comme champs obligatoires : civilité, nom, email et message.
Etape 1
Il faut commencer par créer votre page ou le formulaire va apparaître. Une fois cette étape bouclée, il faut mettre en haut de la page avant la balise « html » ce code :
<?php // Couleur du texte des champs si erreur saisie $color_font_warn="#FF0000"; // Couleur de fond des champs si erreur saisie $color_form_warn="#FFCC66"; // Champs $list['f_1']=array("Sélectionnez","Mademoiselle"," Madame"," Monsieur"); if(isset($_POST['submit'])){ $erreur=""; // Nettoyage while(list($var,$val)=each($_POST)){ if(!is_array($val)){ $$var=strip_tags($val); }else{ while(list($arvar,$arval)=each($val)){ $$var[$arvar]=strip_tags($arval); } } } // Formatage $f_2=trim(ucwords(eregi_replace("[^a-zA-Z0-9éèà ‚Äö?Ñ??Ä?ú\ -]", "", $f_2))); $f_3=trim(ucwords(eregi_replace("[^a-zA-Z0-9éèà ‚Äö?Ñ??Ä?ú\ -]", "", $f_3))); $f_4=trim(ucwords(eregi_replace("[^a-zA-Z0-9éèà ‚Äö?Ñ??Ä?ú\ -]", "", $f_4))); $f_5=trim(eregi_replace("[^0-9+]", "", $f_5)); $f_6=trim(ucwords(eregi_replace("[^a-zA-Z0-9éèà ‚Äö?Ñ??Ä?ú\ -]", "", $f_6))); $f_7=strip_tags(trim($f_7)); $f_8=trim(eregi_replace("[^0-9\ +]", "", $f_8)); // Verification if($f_1==0){ $erreur.="<li><span class='txterror'>Le champ « Civilité » n'a pas été défini.</span>"; $errf_1=1; } if(strlen($f_2)<2){ $erreur.="<li><span class='txterror'>Le champ « Nom » est vide ou incomplet.</span>"; $errf_2=1; } if(strlen($f_7)<2){ $erreur.="<li><span class='txterror'>Le champ « Email » est vide ou incomplet.</span>"; $errf_7=1; }else{ if(!ereg('^[-!#$%&\'*+\./0-9=?A-Z^_`a-z{|}~]+'. '@'. '[-!#$%&\'*+\/0-9=?A-Z^_`a-z{|}~]+\.'. '[-!#$%&\'*+\./0-9=?A-Z^_`a-z{|}~]+$', $f_7)){ $erreur.="<li><span class='txterror'>La syntaxe de votre adresse e-mail n'est pas correcte.</span>"; $errf_7=1; } } if(strlen($f_9)<2){ $erreur.="<li><span class='txterror'>Le champ « Message » est vide ou incomplet.</span>"; $errf_9=1; } if($erreur==""){ // Création du message $titre="Un message est la"; $tete="Depuis:Site@Jonathan-menet.fr\n"; $corps.="Civilité : ".$list['f_1'][$f_1]."\n"; $corps.="Nom : ".$f_2."\n"; $corps.="Prénom : ".$f_3."\n"; $corps.="Adresse : ".$f_4."\n"; $corps.="Code postal : ".$f_5."\n"; $corps.="Ville : ".$f_6."\n"; $corps.="Email : ".$f_7."\n"; $corps.="Téléphone : ".$f_8."\n"; $corps.="Message : ".$f_9."\n"; if(mail("votreadresse@personnelle.fr", $titre, stripslashes($corps), $tete)){ $ok_mail="true"; }else{ $erreur.="<li><span class='txterror'>Une erreur est survenue lors de l'envoi du message, veuillez refaire une tentative.</span>"; } } } ?>
Etape 2
Ensuite il faut insérer entre les balises « head et « /head » le code qui suit, qui correspond à la mise en forme :
<style type="text/css" media="screen"><!-- INPUT { color: #000; font-size: 11px; font-family: verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #EEEEEE } SELECT { color: #000; font-size: 11px; font-family: verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #EEEEEE } TEXTAREA { color: #000; font-size: 11px; font-family: verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #EEEEEE } .txterror { color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular } .txtform { color: black; font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular } --></style>
Etape 3
Maintenant, il faut mettre le code qui suit entre les balises « body » et « /body », c’est le formulaire en question avec ses différents champs.
<? if($ok_mail=="true"){ ?> <table width='100%' border='0' cellspacing='1' cellpadding='1'> <tr><td><span class='txtform'>Le message ci-dessous nous a bien été transmis, merci.</span></td></tr> <tr><td> </td></tr> <tr><td><tt><?echo nl2br(stripslashes($corps));?></tt></td></tr> <tr><td> </td></tr> <tr><td><span class='txtform'>Nous allons y répondre le plus vite possible.<br>A bientôt.</span></td></tr> </table> <? }else{ ?> <form action='<? echo $PHP_SELF ?>' method='post' name='Form'> <table width='100%' border='0' cellspacing='1' cellpadding='1'> <? if($erreur){ ?><tr><td colspan='2' bgcolor='red'><span class='txterror'><font color='white'><b> ERREUR, votre message n'a pas été transmis</b></font></span></td></tr><tr><td colspan='2'><ul><?echo$erreur?></ul></td></tr><?}?> <tr><td colspan='2'><span class='txterror'>Les champs marqué d'un * sont obligatoires</span></td></tr> <tr><td align='right' width='30%'><span class='txtform'>Civilité* :</span></td><td><select style='width:200 <?if($errf_1==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_1' size='1'> <? for($id=0;$id<count($list['f_1']);$id++){ if($id==$f_1){$ct="selected";} print("<option ".$ct." value=".$id.">".$list['f_1'][$id]."</option>"); unset($ct); }?> </select></td></tr> <tr><td align='right' width='30%'><span class='txtform'>Nom* :</span></td><td><input type='text' style='width:200 <?if($errf_2==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_2' value='<?echo stripslashes($f_2);?>' size='24' border='0'></td></tr> <tr><td align='right' width='30%'><span class='txtform'>Prénom :</span></td><td><input type='text' style='width:200 <?if($errf_3==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_3' value='<?echo stripslashes($f_3);?>' size='24' border='0'></td></tr> <tr><td align='right' width='30%'><span class='txtform'>Adresse :</span></td><td><input type='text' style='width:200 <?if($errf_4==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_4' value='<?echo stripslashes($f_4);?>' size='24' border='0'></td></tr> <tr><td align='right' width='30%'><span class='txtform'>Code postal :</span></td><td><input type='text' style='width:200 <?if($errf_5==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_5' value='<?echo stripslashes($f_5);?>' size='24' border='0'></td></tr> <tr><td align='right' width='30%'><span class='txtform'>Ville :</span></td><td><input type='text' style='width:200 <?if($errf_6==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_6' value='<?echo stripslashes($f_6);?>' size='24' border='0'></td></tr> <tr><td align='right' width='30%'><span class='txtform'>Email* :</span></td><td><input type='text' style='width:200 <?if($errf_7==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_7' value='<?echo stripslashes($f_7);?>' size='24' border='0'></td></tr> <tr><td align='right' width='30%'><span class='txtform'>Téléphone :</span></td><td><input type='text' style='width:200 <?if($errf_8==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_8' value='<?echo stripslashes($f_8);?>' size='24' border='0'></td></tr> <tr><td align='right' width='30%'><span class='txtform'>Message* :</span></td><td><textarea style='width:360 <?if($errf_9==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' name='f_9' rows='6' cols='40'><?echo$f_9?></textarea></td></tr> <tr><td align='right' width='30%'></td><td><input type='submit' name='submit' value='Envoyer' border='0'></td></tr> </table> </form> <? } ?>
Et voilà , c’est fait, vous souhaitez tester ?
DEMO : Tester le formulaire
TELECHARGER LA SOURCE : Formulaire.zip
Tweeter
L'auteur de l'article
 |
John's Graphisme, Directeur Artistique, Webdesigner. Vous pouvez voir mes travaux sur mon folio, ou me suivre sur mon Twitter. |
46 commentaires
7 593 lecture(s)
9 mars 2009 à 11:18
Merci, je l’ai « appris » une fois, mais, ton billet va direct dans mes favoris, bien besoin de ce genre de chose.
10 mars 2009 à 1:22
Excellent et trés pratique !
11 mars 2009 à 16:21
Pour ceux qui utilisent WordPress, il y a un plugin qui le fait trés bien et assez facilement il s’appelle Contact Form. j’en parle vite-fait ici, en attendant prochainement de remettre à jour mon listing qui a clairement beaucoup évolué. http://www.neosting-press.fr/archives/8
11 mars 2009 à 16:39
>> Neosting : oui, c’est vrai, mais, je dirais que pour les formulaires de contact sous wordpress, le must c’est « Cform 2″, qui est pas mal du tout …
16 mars 2009 à 21:44
Sympa ce tuto, j’utilise aussi cForm 2 qui est assez sympa et trés rapide à installer. Mais c’est de la feignantise, c’est plus gratifiant quand c’est fait par soit même, mais il y’a tellement de travail lol.
Et chapeau pour l’image illustrant l’article dans ton sommaire, trés bien choisie, j’ai cliquer dessus presque par automatisme
14 août 2009 à 0:53
Merci!
Trés bien votre formulaire !
Cela va m’aider à mieux comprendre le fonctionnement, je débute en php.
17 août 2009 à 7:45
Bonjour,
J’ai installé le script de contact nickel, j’ai bien rentré l’adresse mail mais je re??üois pas les mail ?
Merci d’avance pour les reponses
17 août 2009 à 19:18
>> Eric : je ne sais pas pourquoi ca ne fonctionne pas, je l’ai testé plusieurs fois, et je l’utilise sur plusieurs de mes sites et tout fonctionne à la perfection, essayer de revoir ce que vous avez mis dans le mail…
10 décembre 2009 à 19:15
Cool ! Nickel ce tuto !
C’est propre, et ça fonctionne très bien !
Je suis en train d’apprendre php et c’est un bonheur de pouvoir avoir un tuto bien commenté ! MERCI !
Philippe.
22 mars 2010 à 23:38
MEEEERRRRRCIIIIIIII !!!!!!!!!!!!!!!!!
23 mars 2010 à 14:49
>> Simon : mais de rien, je suis content que le tuto te plaise.
8 avril 2010 à 15:12
Salut ton script m’a bien aidé. merci
8 avril 2010 à 15:16
>> Jack : impeccable, c’est le principal
27 mai 2010 à 9:11
Merci!!! Une pure merveille ce formulaire
3 décembre 2010 à 12:40
Bonjour et merci pour ce formulaire qui est vraiment sympa
et propre.
J’ai cependant 2 questions
1/Lorsque le message arrive dans ma boite mail (outlook) j’ai un pb d’encodage des accents
ex : Société pour Société
2/ Comment rendre obligatoire le « remplissage » de bouton radio ?
Merci de votre aide
25 janvier 2011 à 17:45
@la ptiote : il faut bien veiller à remplacer les accents par les chaines de caractères reconnus
4 avril 2011 à 16:59
It’s really a great and useful piece of info. I’m glad that you shared this helpful info with us. Please keep us up to date like this. Thanks for sharing.
4 avril 2011 à 17:49
@odzywki : you’re welcome
14 mai 2011 à 9:16
Bonjour,
Le script marche à merveille mais je souhaiterai que le nom soit souligné dans mail de réception. Je bloque à ce niveau là .
Merci par avance pour vos lumières.
Mac
20 mai 2011 à 14:45
Salut j’ai un soucis avec ton code, qd je clique sur envoyer je tombe sur une page blanche !!!
Merci
12 juillet 2011 à 19:37
DEMO: Tester le formulaire
comme ça on comprend déjà beaucoup mieux
et on voit que la page est en PHP. Bien expliqué super helper
24 juillet 2011 à 20:24
Bonjour,
Votre formulaire est fantastique, rien à dire. Je suis cependant entrain de m’arracher les cheveux depuis un bon moment déjà pour trouver comment faire en sorte que les messages reçus contiennent les accents et non des caractères spéciaux ! Je vous assure que j’en peux plus de fouiller, je ne trouve pas du tout la solution malgré le conseil que vous avez donné de bien veiller à remplacer les accents par la chaine de caractères, c’est à dire ? John merci de m’aider s’il vous plaît: AU SECOURRRRS !!!!
25 juillet 2011 à 9:58
@Abder : salut, je suis content que le formulaire te plaise. Pour ce qui est des accents il faut que tu remplaces les accents par ce type de chose, regardes ce tableau : http://www.scriptol.fr/creation-site-web/accents-html.php
J’espère que cela t’aide.
20 août 2011 à 14:45
I would like to show my thanks to this writer for rescuing me from this particular dilemma. As a result of exploring throughout the world-wide-web and obtaining suggestions which were not pleasant, I was thinking my life was over. Being alive minus the answers to the issues you’ve solved by means of your good short article is a critical case, as well as ones that might have adversely affected my entire career if I hadn’t discovered your web site.
13 septembre 2011 à 15:20
Salut! Merci pour ton formulaire très pratique; Je veux juste savoir comment ajouter d’autres zones de liste déroulante. Merci, merci, merci, merci
20 septembre 2011 à 1:51
brillant isersing that andically bleny with itonant and alirce unulode. mninsism all dingfuros from lediere prity from borch and bibluency.
21 septembre 2011 à 0:06
HELPPPP il est superbe ce formulaire, mais alors prenez moi pour un boulet… impossible de recevoir les emails test… j ai change la : if(mail(« votreadresse@personnelle.fr », $titre, stripslashes($corps), $tete))
pour y mettre mon adresse perso et je ne recois rien, ca me dit bien le message a ete transmis et tout … c est pas la qu il fallait y mettre l adresse de destination des emails??
milles mercis pour le script et l aide
4 octobre 2011 à 14:51
There is obviously a great be informed on this. I’m sure you’ve made good quality points in Features also.
5 octobre 2011 à 19:53
Bonjour, j’ai un petit soucis, lorsque je consulte mon formulaire en ligne, à la place de tous les champs libre (par exemple en face de Nom, prénom, etc)j’ai le code qui apparait. Du genre
Notice: Undefined variable: f_2 in /homez.87/apartmenh/www/formulaire.php on line 213
Je ne comprend pas bien d’où vient le problème ?
Des idées ?
Merci
6 octobre 2011 à 9:50
En fouillant sur le net je suis tombé sur pas mal de gens qui rencontrent le même type de problèmes. Surtout sur des sites très récents. Ce formulaire fonctionnait très bien sur un site qui a deux ans, hébergé chez OVH, mais sur un que je suis en train de mettre en place j’ai pleins de message d’erreur. Le code doit il être actualisé en fonction de nouveau standards ?
6 octobre 2011 à 10:02
@Vib : je ne sais pas si ce code fonctionne sous tous les hébergeurs. Moi, mon site n’est pas ancien niveau hébergement et le serveur + le formulaire fonctionne très bien ensemble.
6 octobre 2011 à 10:26
Cela serait donc spécifique à OVH…
6 octobre 2011 à 11:15
Ce code est mal codé ( des variables ne sont pas ou mal initialisées + utilisation des stripslashs qui induit l’utilisation des magiques quotes qu’il ne faut pas utilisé et utilisations de fonction qui sont deprecated dans php5.3 ) d’où les erreurs sur les hébergeurs bien configuré ( affiche les erreurs de type notice et deprecated )
6 octobre 2011 à 11:41
@Ekozan : merci à toi, j’ai fait ça il y a un petit moment, qu’est ce qui cloche exactement ?
6 octobre 2011 à 23:32
en php5.3 :
les magic_quote ne sont plus utilisé donc la boucle ( nettoyage ) et les fonctions strip_tags() n’ont plus lieux d’être
ereg est deprecated ( traduction ne plus utilisé car cela va disparaître :p ) elle est remplace par la série des preg
http://www.php.net/manual/fr/ref.pcre.php
les variables doivent être initialisé ( je parle des $f_1 et co ) car l’utilisation de register_globals a on ( pas besoin d’utilisé $_post pour récupéré les donnée) est une grave faille de sécurité
tu trouvera les modifs que j’ai effectuer pour Vib ( enfin je crois :p ) sont un bon résumé des modifs
http://forum.ovh.com/showpost.php?p=454116&postcount=17
tu peut t’en inspiré pour le refaire a ta sauce
pS: je viens de relire mon ancien poste je le trouve agressif cela n’étais pas on intention
4 novembre 2011 à 1:12
Fantastic blog! Do you have any hints for aspiring writers? I’m planning to start my own blog soon but I’m a little lost on everything. Would you suggest starting with a free platform like WordPress or go for a paid option? There are so many choices out there that I’m totally confused .. Any recommendations? Many thanks!
19 novembre 2011 à 4:26
Hey, I what theme are you using? i use a theme from elegant themes but i have been looking for some other different ones.
5 décembre 2011 à 11:47
Merci pour ce bout de code très pratique, et à priori sans bug !
J’ai juste fais quelques modifs de css, et c’est tout bon
21 décembre 2011 à 11:32
comment je peux ajouter cette formulaire dans mon contact page.
21 décembre 2011 à 11:37
@remy : tout dépend le type de page dont nous parlons. S’agit-il d’une page PHP ? HTML ?
3 janvier 2012 à 21:09
I am not sure if this is the correct place to ask but do you have any advice on how to optimise a mobile friendly website on a sub-domain.
5 janvier 2012 à 3:52
Yo. I basically wanted to actually place a nice quick remark and inform you understand that I’ve been focusing on your personal wordpress blog for quite some time. Keep up the wonderful task and I will be looking again consistently relatively soon.
17 janvier 2012 à 13:34
salut john, merci bien pr c formulaire, mais je sais pas pkoi il ne marche plus chez moi, en tt ca quand j’ai testé la page il m’affiche les alertes en haut et dans les input il s’affiche « » svp aidez moi à le corriger
17 janvier 2012 à 17:14
@kiko : tu as mis ce formulaire dans une page PHP ? As-tu essayer de mettre ma page sur ton serveur et de tester depuis ma page ?
18 janvier 2012 à 16:50
slt, oui deja j’utilise l’easyphp
24 janvier 2012 à 10:30
Salut John,
J’ai le même remarque que Kiko, le formulaire ne fonctionne plus.
Il indique: « Deprecated: Function eregi() is deprecated ».
Je ne sais pas d’où vient le problème.