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

La Newsletter :

Si tu souhaites recevoir toutes les nouveautés du blog John's Graphisme par email, abonne-toi :