Créer un formulaire de contact en PHP et HTML5

Nous allons voir ici comment créer un formulaire de contact en HTML et PHP que nous personnaliserons à partir de règles CSS.
L'avantage principal de ce formulaire ? Tout se passe sur une seule page, de ce fait vous n'aurez pas besoin de mettre en place un second fichier pour sa soumission.
Et cerise sur le gateau, vous afficherez un petit résumé de l'envoi à votre visiteur !

Le formulaire d'exemple est basé sur un design très classique qu'il vous appartient de modifier selon vos attentes en changeant les règles de styles détaillées ci-dessous.

Ces articles sont susceptibles de vous intéresser aussi :

Creer un formulaire de contact en HTML5 et CSS

Creer un formulaire de contact au format SWF

Generateur de formulaire

Ce que nous allons réaliser

Le tuto ci-dessous vous expliquera comment réaliser un formulaire, ici de contact, ne nécessitant pas de soumission sur une seconde page. Vous travaillerons en étapes :

la mise en place de la structure en balises <div>
l'insertion des differents champs de saisie
la définition des règles de styles CSS (ici très basique mais vous avez, de votre coté, carte blanche)
le code PHP permettant le traitement de ce formulaire. Je resterais assez sommaire sur ce point, le PHP étant complexe, mais vous saurez comment ajouter ou retirer des champs, les rendre obligatoire si besoin et les inclures dans le code de soumissions. Au cas où vous voudriez tout savoir du PHP vous pouvez accedez au referentiel sur cette page

Vous pouvez bien sur tester ce formulaire afin d'en voir le fonctionnement complet

preparation

L'intégration de ce formulaire demande deux pages. La première sera celle destinée à etre visible sur votre site internet (nouvelle ou à partir de votre template) et la seconde sera notre feuille de style, bien que celle-ci ne soit pas obligatoire car vous pouvez évidemment inclure les règles CSS directement entre les balise <HEAD> de votre page.

La création de votre page web devra etre sauvegardée avec l'extension .php, pour ce tuto la page s'appellera tout simplement "form.php". Son contenu reste similaire à une page HTML mais cette extension permettra d'y insérer du code PHP au dessus de <DOCTYPE...>.
Nous créons ensuite une feuille de style CSS (avec l'extension.css), nommée "tutoformphp.css" que nous appelons dans notre document principal.

Ce qui nous donne :

/*la majeure partie du code PHP sera situé ici-->


<link rel="stylesheet" media="screen" type="text/css" href="stylerules/tutoformphp.css"/>
/*la feuille de style est appelée-->


<style type="text/css" media="screen">



</style>


</head>

<body>

</body>
</html>

Mise en place de la structure du formulaire

Ce formulaire nécessitera deux conteneurs:

Le premier sera charger d'héberger le message de confirmation transmis à l'utilisateur de votre site. Visible lors de la construction de page, celui-ci disparaitra lors de la mise en ligne de votre page web. Sa largeur sera de 600px, afin de respecter la proportion de votre formulaire, et sa hauteur sera automatique.
Le formulaire sera ,lui, sera placé dans un second conteneur de 600px de large, un format assez facile à intégrer, et d'une hauteur automatique puisque dépendante du nombre de champs et du style que vous leur donnerez.
L'ensemble de cette structure est établie en balise <div> dont certaine verrons leur règle de style incluses, afin de vous permettre de peaufiner la structure directement sur votre page finale.

Nous obtiendrons donc le code HTML suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" href="stylerules/tutoformphp.css"/>
</head>
<body>




<div style = "width:600px; height:auto; margin:auto; margin-bottom:30px; position:relative; background-color:#999; border-radius:14px">
</div>

/*NE METTEZ RIEN ENTRE LES DEUX CONTENEURS*/

<div style = "width:600px; height:auto; margin:auto; position:relative;">
</div>


</body>
</html>

L'alignement du formulaire est ici prévu au centre de votre page, libre à vous de le déplacer en influant sur la règle "margin". Veillez cependant, dans un soucis d'esthétisme, à avoir le meme positionnement entre les deux conteneurs.

Ces 2 conteneurs en place, nous allons maintenant imbriquer des balises <div> dans le conteneur du dessus, celui qui affichera le message de retour une fois l'envoi validé par l'utilisateur.
Nous allons ensuite définir le champ de formulaire, grace aux balises "<form>", et mettre en place, toujours avec des <div>, la structure accueillant les différents éléments de saisie, de traitement et de validation.

Leur largeur est cette fois défini en % . Si vous modifiez la largeur des conteneurs, les balises imbriquées suivront automatiquement cette modification et leur position restera inchangée (attention, tout de meme, au valeur définit pour les champs de saisie que nous verrons un peu plus bas).

En code HTML, nous obtenons :

...

</head>
<body>




<div style = "width:600px; height:auto; margin:auto; margin-bottom:30px; position:relative; background-color:#999; border-radius:14px">

   <div></div>
   <div> </div>
   <div> </div>

</div>




<form action='' method='post' name='Form'>


<div style = "width:600px; height:auto; margin:auto; position:relative;">

<div style = "float:left; width:100%; margin-bottom:20px; position:relative;"></div>

<div style = "float:left; width:50%;position:relative;"> </div>
<div style = "float:right; width:50%;position:relative;"> </div>

<div style = "float:left;width:100%;position:relative;margin-top:10px;">
<div style = "float:left;width:50%;position:relative;"> </div>
<div style = "float:right;width:50%;position:relative;"> </div>
</div>

<div style = "float:left;width:100%;position:relative;margin-top:10px;"> </div>

<div style = "float:left;width:100%;position:relative;">
<div></div>
</div>

<div style = "float:left;width:100%;position:relative;"></div>

</div>


</form>


</body>
</html>

...

Vous voici maintenant avec votre structure de formulaire prete à accueillir ses différents élément <input>, <textarea> et autres.

Insertion des champs de saisie

Nous allons maintenant insérer dans ce formulaires 4 champs monoligne de type <input>, un champ multiligne de type <textarea> et bien sur un bouton d'envoi. Je fais ici une insertion "brute", les règles de style seront définit un peu plus bas. Chaque champ sera attaché à une balise <label> afin de donner une dénomination à celui ci.
Nous profiterons de l'occasion pour ecire les messages destinés à l'utilisateur de ce formulaire et définir notre bloc de champs <fieldset>.

Nous obtenons donc ce code:


<form action='' method='post' name='Form'>


<div style = "width:600px; height:auto; margin:auto; position:relative;">

<div style = "float:left; width:100%; margin-bottom:20px; position:relative;">Les champs marqué d'un * sont obligatoires</div>

<div style = "float:left; width:50%;position:relative;"><label for="">Nom et prénom* : </label>
<input name='' type='text' style='' value='' /></div>
<div style = "float:right; width:50%;position:relative;"><label for="">Email* : </label>
<input name='' type='text' style='' value='' /></div>

<div style = "float:left;width:100%;position:relative;margin-top:10px;">
<div style = "float:left;width:50%;position:relative;"><label for="">Sujet : </label>
<input name='' type='text' style='' value='' /></div>
<div style = "float:right;width:50%;position:relative;"><label for="">Residence : </label>
<input name='' type='text' style='' value='' /></div>
</div>

<div style = "float:left;width:100%;position:relative;margin-top:10px;"><label for="">Votre message* : </label>
<textarea name='' style=''></textarea></div>

<div style = "float:left;width:100%;position:relative;">
<div>   ERREUR, votre message n'a pas été transmis</div>
</div>

<div style = "float:left;width:100%;position:relative;">
<input name='submit' type='submit' value='envoyer' /></div>

</div>


</fieldset>

</form>


Voilà ! nous voici maintenant en possession d'un formulaire comportant 5 champs et son bouton de soumission. Et là vous aalez me dire : "Oh! nonseulement il ne fonctionne pas et en plus il est vraiment affreux !".
Remédions à tous ça immédiatement.

Mise en place des règles de style CSS

Afin de donner un look sympa à ce formulaire nous allons définir des règle pour chacun de ses éléments. Nous personnaliserons :

les champs <input> auquels nous mettrons un format facile de selection, un petit effet "focus" et des bords légèrement arrondis
le champ <textarea> sera définit en accord avec les <input>
les balises <label> se verrons dotées d'une règle de style parmettant un positionnement adéquat
le bouton de soumission aura un petit effet rollover que je qualifie de presque indispensable
les message d'erreurs et de retour de soumission se définit par une police et un format en accord avec ce formulaire
et mettrons en place un bloc de champs <fieldset> lui aussi personnalisé au "background" englobant l'ensemble de ce module

Nous obtiendrons donc le code suivant sur notre feuille "tutoformphp.css" créée en début de tuto :

charset "utf-8";
/* CSS Document */

#messerror {
color: black; font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #F66; width:580px; height:auto; margin-top:5px; border-radius:8px;
}

.textreturn {
color: black; font-size: 13px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; padding:20px;
}

.txterror {
color: black; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; width:580px;
}

input {
color: black; font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #F7F7F7; width:280px; height:50px; margin-top:10px; margin-bottom:10px;
border-radius:8px; border:1px solid #aaa; padding:5px;
}

input:focus, textarea:focus {
background: #d9dadc;
}

input[type=submit] {
float:right; margin-right: 25px; margin-top: 40px; width: 220px; height: 40px; background-color:#D1E0E0; border-radius:6px;
}

input[type=submit]:hover {
float:right; margin-right: 25px; margin-top: 40px; width: 220px; height: 40px; background-color:#C7DBDC; border-radius:6px;
}

textarea {
color: black; font-size: 12px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; background-color: #F7F7F7; width:580px; height:100px; margin-top:10px; margin-bottom:10px; border-radius:8px; border:1px solid #aaa; padding:5px;
}

label {
color: black; font-size: 14px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; float:left; line-height:28px; margin-bottom:5px; width:160px;
}

fieldset {
width:600px; margin:auto; background-color:#999 ; border-radius:14px;
}

Les règle de style maintenant prètes, nous allons spécifier les "class" et "id" dans notre code HTML, les autres s'incorporant automatiquement puisque attachées au nom de balise, et definissons le message de retour de soumission:


<div style = "width:600px; height:auto; margin:auto; margin-bottom:30px; position:relative; background-color:#999; border-radius:14px">

   <div class="textreturn">Le message ci dessous a bien été transmis</div>
   <div class="textreturn"></div>
   <div class="textreturn">A bientot</div>

</div>


<div style = "width:600px; height:auto; margin:auto; position:relative;">

<div style = "float:left; width:100%; margin-bottom:20px; position:relative;"><span class='texterror'>Les champs marqué d'un * sont obligatoires</span></div>

<div style = "float:left;width:100%;position:relative;">
<div id="messerror"><span class='texterror'>  ERREUR, votre message n'a pas été transmis</span></div>
</div>

Notre formulaire et son bloc de retour de message ont maintenant leur apparence finale (celle de ce tuto ou celle que vous aurez défini). Mais ! Les 2 conteneurs sont visibles ! C'est normal, le conteneur de retour disparaitra de votre page une fois celle ci en ligne, sa visibilité dépend du PHP qui ne sera fonctionnel que sur un serveur web.

Certain pourrais se poser la question "Ce design est un peu fade, pourquoi ne pas mettre plutot des fond en dégradé ou image ?"
Et bien, pour ma part, je ne met pas de présentation en dégradé sur les tutos de formulaires pour une simple raison de compatibilité de navigateur (sinon les code CSS deviennent interminable). Mais libre à vous de personnaliser votre feuille de style en influant sur les "background" (et autre propriété) car le design d'un formulaire dépend vraiment du besoin et gout de chacun.

Et maintenant, le PHP (ouille ...)

Comme je vous le disais en début de tuto, je ne vais pas entrer dans le détail de ce code.

En résumé, je vais vous donner un code fonctionnel, que vous aurez juste à copier-coller, vous expliquer comment ajouter un champ (et le rendre obligatoire si besoin) et quelques très basique (dans le code) explications du fonctionnement général.

Voici notre code de traitement PHP placé au dessus de la balise <DOCTYPE .../> :

<?php
// Ici on definit la couleur du texte de nouvelle saisie des champs obligatoire en cas de saisie invalide ou non presente
$color_font_warn="#000000";
// Cette fois on definit la couleur que prendront ces champs
$color_form_warn="#F66";

// On commence le code de soumission
if(isset($_POST['submit'])){
$erreur="";
// Nettoyage des entrées
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 des entrées
$f_1=trim(ucwords(eregi_replace("[^a-zA-Z0-9éeaäö\ -]", "", $f_1)));
$f_2=strip_tags(trim($f_2));
$f_4=trim(ucwords(eregi_replace("[^a-zA-Z0-9éeaäö\ -]", "", $f_4)));

// Verification des champs obligatoires (pour notre exemple le f_1 ; f_2 (mail) et le f_5)
if(strlen($f_1)<2){
$erreur.="<li><span class='txterror'>Le champ NOM est vide ou incomplet.</span>";
$errf_1=1;
}

if(strlen($f_2)<2){
$erreur.="<li><span class='txterror'>Le champ EMAIL est vide ou incomplet.</span>";
$errf_2=1;
}else{
if(!ereg('^[-!#$%&\'*+\./0-9=?A-Z^_`a-z{|}~]+'.
'@'. //on oblige la presence d'un @
'[-!#$%&\'*+\/0-9=?A-Z^_`a-z{|}~]+\.'.
'[-!#$%&\'*+\./0-9=?A-Z^_`a-z{|}~]+$',
$f_2)){
$erreur.="<li><span class='txterror'>La syntaxe de votre adresse e-mail est erronee.</span>";
$errf_2=1;
}
}

if(strlen($f_5)<2){
$erreur.="<li><span class='txterror'>Le champ MESSAGE est vide ou incomplet.</span>";
$errf_5=1;
}

if($erreur==""){

// Création du message a envoyer sur votre boite mail

$titre="Message de votre site"; // sera affiché en tant qu'objet à la reception de votre message

$tete="From:www.monsite.fr\n"; // indique la provenance du message (site ou page contenant le formulaire) ne mettez pas de @

//on inclus les champs du formulaire (par leur attribut Name)
$corps.="Nom : ".$f_1."\n";
$corps.="Email : ".$f_2."\n";
$corps.="Sujet : ".$f_3."\n";
$corps.="Residence : ".$f_4."\n";
$corps.="Message : ".$f_5."\n";
//on designe a quelle adresse envoyer le contenu du formulaire
if(mail("[email protected]", $titre, stripslashes($corps), $tete)){ // inserer votre adresse email ici à la place de "[email protected]"
$ok_mail="true";
}else{
$erreur.="<li><span class='txterror'>Une erreur est survenue lors de l'envoi du message, veuillez refaire une tentative.</span>";
}
}
}
?>

<!DOCTYPE html PUBLIC " ...

Et la partie à intégrer dans notre formulaire :

...

</head>
<body>

<? if($ok_mail=="true"){ ?>


<div style = "width:600px; height:auto; margin:auto; margin-bottom:30px; position:relative; background-color:#999; border-radius:14px">
   <div class="textreturn">Le message ci dessous a bien été transmis</div>

   <div class="textreturn"><tt><?echo nl2br(stripslashes($corps));?></tt></div>
   <div class="textreturn">A bientot</div>
</div>


<? }else{ ?>

<form action='<? echo $_SERVER['PHP_SELF'] ?>' method='post' name='Form'>


<div style = "width:600px; height:auto; margin:auto; position:relative;">

<div style = "float:left; width:100%; margin-bottom:20px; position:relative;">Les champs marqué d'un * sont obligatoires</div>



<div style = "float:left; width:50%;position:relative;"><label for="f_1">Nom et prénom* : </label>
<input name='f_1' type='text' style='<?if($errf_1==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' value='<?echo stripslashes($f_1);?>' /></div>

<div style = "float:right; width:50%;position:relative;"><label for="f_2">Email* : </label>
<input name='f_2' type='text' style='<?if($errf_2==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' value='<?echo stripslashes($f_2);?>' /></div>


<div style = "float:left;width:100%;position:relative;margin-top:10px;">

<div style = "float:left;width:50%;position:relative;"><label for="f_3">Sujet : </label>
<input name='f_3' type='text' style='<?if($errf_3==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' value='<?echo stripslashes($f_3);?>' /></div>

<div style = "float:right;width:50%;position:relative;"><label for="f_4">Residence : </label>
<input name='f_4' type='text' style='<?if($errf_4==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' value='<?echo stripslashes($f_4);?>' /></div>
</div>


<div style = "float:left;width:100%;position:relative;margin-top:10px;"><label for="f_5">Votre message* : </label>
<textarea name='f_5' style='<?if($errf_5==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;'><?echo$f_5?></textarea></div>

<div style = "float:left;width:100%;position:relative;">

<div id="messerror"><? if($erreur){ ?><span class='texterror'>   ERREUR, votre message n'a pas été transmis</span>
<ul><?echo$erreur?></ul><?}?></div>
</div>

<div style = "float:left;width:100%;position:relative;">
<input name='submit' type='submit' value='envoyer' /></div>

</div>


</fieldset>

</form>

<? } ?>

Si vous voulez ajouter un champ

Vous pourriez avoir envie, ou besoin, d'ajouter un champ supplémentaire à ce formulaire. Dans ce cas il vous suffit d'ajouter :

Dans le code HTML, la balise correspondant à votre champ et de lui donner la dénomination adéquate (ici f_6 afin de suivre notre ordre numérique)
Dans le code PHP, ajouter votre champ supplémentaire à la liste de ce à inclure dans le message que vous recevrez

Voici un exemple

//Dans le PHP haut de page

...

//on inclus les champs du formulaire (par leur attribut Name)
$corps.="Nom : ".$f_1."\n";
$corps.="Email : ".$f_2."\n";
$corps.="Sujet : ".$f_3."\n";
$corps.="Residence : ".$f_4."\n";
$corps.="Message : ".$f_5."\n";

$corps.="Champ sup : ".$f_6."\n"; // ****************on inclus le nouveau champ ici**************

//on designe a quelle adresse envoyer le contenu du formulaire
if(mail("[email protected]", $titre, stripslashes($corps), $tete)){ // inserer votre adresse email ici à la place de "[email protected]"

...

...

<div style = "float:right;width:50%;position:relative;"><label for="f_4">Residence : </label>
<input name='f_4' type='text' style='<?if($errf_4==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' value='<?echo stripslashes($f_4);?>' /></div>
</div>

<div style = "float:left;width:100%;position:relative;margin-top:10px;"><label for="f_6">Champ sup : </label>
<input name='f_6' type='text' style='<?if($errf_4==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;' value='<?echo stripslashes($f_6);?>' /></div>

<div style = "float:left;width:100%;position:relative;margin-top:10px;"><label for="f_5">Votre message* : </label>
<textarea name='f_5' style='<?if($errf_5==1){print("; background-color: ".$color_form_warn."; color: ".$color_font_warn);}?>;'><?echo$f_5?></textarea></div>

...

Pour le rendre obligatoire

Pour rendre ce nouveau champ obligatoire, ou un déjà existant, tout ce passe cette fois ci du coté du code PHP. Sachez que vous pouvez aussi désactiver l'obligation d'un champ existant en effectuant la manoeuvre inverse).

//Dans le PHP haut de page

...

// Formatage des entrées
$f_1=trim(ucwords(eregi_replace("[^a-zA-Z0-9éeaäö\ -]", "", $f_1)));
$f_2=strip_tags(trim($f_2));
$f_4=trim(ucwords(eregi_replace("[^a-zA-Z0-9éeaäö\ -]", "", $f_4)));
$f_6=trim(ucwords(eregi_replace("[^a-zA-Z0-9éeaäö\ -]", "", $f_6))); //ajout de l'obligation

// Verification des champs obligatoires (pour notre exemple le f_1 ; f_2 (mail) ; le f_5 et maintenant le f_6)
if(strlen($f_1)<2){
$erreur.="<li><span class='txterror'>Le champ NOM est vide ou incomplet.</span>";
$errf_1=1;
}

...

if(strlen($f_6)<2){ //ajout de l'obligation
$erreur.="<li><span class='txterror'>Le champ CHAMP SUP est vide ou incomplet.</span>";
$errf_6=1;
}

...

Conclusion de ce tuto

Ce tuto sur la création d'un formulaire PHP traité sur une seue page est maintenant terminé. J'espère avoir répondu à votre besoin et vous avoir apporté assez d'informations pour que vous puissiez utiliser et personnaliser ce module sans trop de galère.

Comme d'habitude, si vous avez des questions au sujet de ce tuto, n'hesitez pas à me contacter et je ferais tout mon possible pour vous répondre rapidement.

Dossiers

Création

Flash Pro

HTML 5

CSS 3

JQUERY

Bibliothèque d'image

Pratiques et utiles

Retrouvez l'ensemble des actualités publiées sur ce site

Créer un formulaire de contact en PHP et HTML5

Ce que nous allons réaliser

preparation

Mise en place de la structure du formulaire

Insertion des champs de saisie

Mise en place des règles de style CSS

Et maintenant, le PHP (ouille ...)

Conclusion de ce tuto