JumpTop JumpBottom

[PHP] Formulaire de contact avec champs obligatoires



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 &laquo; Civilité &raquo; n'a pas été défini.</span>";
		$errf_1=1;
	}
	if(strlen($f_2)<2){
		$erreur.="<li><span class='txterror'>Le champ &laquo; Nom &raquo; est vide ou incomplet.</span>";
		$errf_2=1;
	}
	if(strlen($f_7)<2){
		$erreur.="<li><span class='txterror'>Le champ &laquo; Email &raquo; 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 &laquo; Message &raquo; 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>&nbsp;</td></tr>
		<tr><td><tt><?echo nl2br(stripslashes($corps));?></tt></td></tr>
		<tr><td>&nbsp;</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>&nbsp;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








L'auteur de l'article
John's Graphisme, Directeur Artistique, Webdesigner et Graphiste Freelance. Vous pouvez voir mes travaux sur mon portfolio, ou me suivre sur mon Twitter.





Autres articles à lire absolument (si tu veux)



14 commentaires

  1. 1 VéroniqueNo Gravatar dit :
    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.

  2. 2 FabioNo Gravatar dit :
    10 mars 2009 à 1:22

    Excellent et trés pratique !

  3. 3 NeoStingNo Gravatar dit :
    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

  4. 4 John's GraphismeNo Gravatar dit :
    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 …

  5. 5 AurélienNo Gravatar dit :
    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 :D

  6. 6 MickNo Gravatar dit :
    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.

  7. 7 EricNo Gravatar dit :
    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

  8. 8 John's GraphismeNo Gravatar dit :
    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…

  9. 9 PhiliphotoNo Gravatar dit :
    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.

  10. 10 SimonNo Gravatar dit :
    22 mars 2010 à 23:38

    MEEEERRRRRCIIIIIIII !!!!!!!!!!!!!!!!!

  11. 11 John's GraphismeNo Gravatar dit :
    23 mars 2010 à 14:49

    >> Simon : mais de rien, je suis content que le tuto te plaise.

  12. 12 JackNo Gravatar dit :
    8 avril 2010 à 15:12

    Salut ton script m’a bien aidé. merci :D

  13. 13 John's GraphismeNo Gravatar dit :
    8 avril 2010 à 15:16

    >> Jack : impeccable, c’est le principal ;-)

  14. 14 lbsquatNo Gravatar dit :
    27 mai 2010 à 9:11

    Merci!!! Une pure merveille ce formulaire :)

Aucun trackback