Créer un formulaire de contact en HTML5 et CSS3

Nous allons voir ici comment créer un formulaire de contact en langage HTML que nous personnaliserons à partir de règles CSS.
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.

Demonstration

voir la demo

Le tuto ci-dessous vous expliquera comment réaliser un formulaire (de contact ou de prise d'information) surmonté d'un entete, intégrant 4 champs (3 monolignes et 1 saisie de texte), un titre d'ensemble de zone de saisie, l'indispensable bouton d'envoi, une petite dynamique d'effet "placeholder" et bien sur comment traiter les informations saisie par l'utilisateur afin qu'elles parviennent jusqu'à votre boite mail.

<3>Préparation

Coté HTML, vous pouvez établir ce formulaire directement sur la page web destiné à l'héberger.

Je fais le choix d'utiliser une feuille de style CSS indépendante mais sachez que vous pouvez insérer les règles directement au sein de votre page (entre les balise <HEAD>...</HEAD>) si vous préférez.

La page CSS sera nommée ,pour l'exemple, "monstyle.css" et sera lié à votre page HTML comme visible ci-dessous :

Afficher le code HTML
<!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" />

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

<!-- solution annexe, vous insérez directement les règles CSS dans la page -->
<style type="text/css" media="screen">

<!--les règles seront écrites ici-->

</style>
<!--fin des règles CSS-->

</head>

<body>
<!--contenu de la page-->
</body>
</html>

Créer le conteneur du formulaire

S'il n'est pas un élément indispensable, le conteneur permet de placer ou déplacer le formulaire au sein de votre page d'un bloc, sans avoir à modifier le CSS de chaque élément, ce qui s'avère plutot pratique à l'usage.

Je choisis ici un conteneur de 600 pixels de largeur avec un placement au centre défini par ses règles CSS nommées elles aussi "conteneur".

Dans le corps de la page HTML :

Afficher le code HTML
<!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/monstyle.css"/>
</head>

<body>
<div id = "conteneur">mon formulaire sera placé ici</div>
</body>
</html>

Dans la feuille de style "monstyle.css" :

Afficher le code CSS
@charset "utf-8";
/* CSS Document */

#conteneur {
width:600px;
margin:auto;
height:auto;
}

Mettre en place mon entete de formulaire

Afin que le visiteur de votre site connaisse directement la vocation du formulaire qui apparait au détour d'une page, il peut etre intéressant d'y assigner un titre. Il y a pour cela 2 façons de faire :

  • Vous utilisez un balise "legend" (nous verrons celle-ci un peu plus bas)
  • ou vous placez un titre indépendant du formulaire, vous permettant plus de fantaisie de personnalisation (quoique ...)

voyons cette seconde méthode tout de suite ! Votre "conteneur" étant pret, nous allons y imbriquer une balise div destinée à accueillir le titre du formulaire et définir son design nommé "entete" dans la feuille CSS:

Coté HTML nous obtiendrons:

Afficher le code HTML
<!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/monstyle.css"/>
</head>

<body>
<div id = "conteneur">
    <div id="entete">Formulaire de contact</div>
    mon formulaire sera placé ici
</div>
</body>
</html>

Et coté CSS nous ajoutons quelques règles de style afin de donner un peu de volume (en utilisant "padding" et "margin") et un effet arrondi grace à "border-radius":

Afficher le code CSS

....

#entete {
/* styles de caractères */
font:Verdana, Geneva, sans-serif;
font-size: 25px;
color: #40427f;
text-align: center;
/* marges et bordures */
padding:20px;
margin: 0px 0 30px 0;
border:1px solid #777879;
border-radius: 5px;
/* couleur de fond */
background-color: #EAFDFF ;
}

Rentrons dans le vif du sujet !

Votre feuille de style commence à se remplir, le conteneur est en place et vous avez insérer votre titre, passons maintenant à la création du formulaire proprement dit.

Comme tout formulaire qui se respecte (et fonctionne), celui ci sera défini par des balises <FORM> qui engloberont la totalité des éléments en faisant partie (y compris le bouton de soumission). Deux attributs essentiels s'attachent à celle-ci, "method" et "action".

  • "method" défini de quelle facon les données vont etre envoyées, je ne rentrerai pas dans les détails au sein de ce tuto mais sachez que la méthode "GET" vous limite à 255 caractères et que la méthode "POST" tolère, elle, l'envoie de grande quantité d'information et est de ce fait la plus couramment utilisée pour les formulaires.
  • "action" définit l'adresse de la page (ici appellée "soumission.php") qui traitera les information du formulaire (en php) et vous les renverras sur votre boite mail.

Mettons nos balises et attributs en place :

Afficher le code HTML

<!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/monstyle.css"/>
</head>

<body>

<div id = "conteneur">
    <div id="entete">Formulaire de contact</div>
<form action="soumission.php" method="post">
le contenu de mon formulaire sera placé ici
</form>
</div>

</body>
</html>

Intégrons nos trois champs monoligne :

Le champ formulaire étant maintenant définit dans son conteneur et votre titre établit (bien que celui ci ne soit pas obligatoire au fonctionnement), nous allons maintenant y placer les champs à remplir par le visiteur de votre site. Nous commençons par trois champ monoligne généralement utilisés pour les données telle que le nom, l'adresse email, le téléphone, le code postal et toutes informations relativement courte.

Ces champs se définissent par la balise <input> à laquelle est jointe une balise <label> qui presente l'intitulé du champ à remplir. Vous constaterez l'ajout de l'attribut "placeholder" qui permet d'intégrer un texte visible dans le champ de saisie tant que l'utilisateur n'y a pas encore entré d'informations (Internet Explorer y est récalcitrant ...).

Comme toute balise de formulaire qui se respecte j'y intègre les attributs "id" (nomme l'objet dans la page web, s'attache avec le <label>), "name" (permet de retrouver l'objet, il sera utilisé pour la soumission du formulaire) et "type" (définit le type d'entrée saisie dans la balise).

Coté code HTML nous obtenons donc :

Afficher le code HTML

<!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/monstyle.css"/>
</head>

<body>

<div id = "conteneur">
    <div id="entete">Formulaire de contact</div>
<form action="soumission.php" method="post">

<label for="name">Nom et prénom :</label>
<input type="text" id="name" name="name" placeholder="Saisissez votre nom et prénom" />

<label for="email">Email :</label>
<input type="email" id="email" name="email"placeholder="Saisissez votre email" />

<label for="residence">Résidence :</label>
<input type="text" id="residence" name="residence" placeholder="Saisissez votre lieu de résidence" />

</form>
</div>

</body>
</html>

Pour ceux qui travaillerons directement à partir de ce code, sachez que les textes de la balise <label> et de "placeholder" sont totalement modifiables, garder juste une certaine cohérence afin de ne pas déstabiliser votre visiteur.

Vous constaterez que notre second champ voit son attribut "type" définit comme email, ceci permet de spécifier au navigateur le type d'entrée attendue et ce dernier ne manquera pas de signaler à l'utilisateur une entrée erronée si la saisie ne correspond pas à une adresse email valide. Le hic ! , cette fonction n'est pas pris en charge par tous les navigateurs mais ne gène pas le bon fonctionnement du formulaire.

Du coté des CSS, j'attribue une règle de style aux balises <input> et <label> qui me permet de conserver une cohérence avec le design général du formulaire, ce qui nous donne :

Afficher le code CSS

...

label {
/* positionnement marge et taille */
float: left;
clear: left;
margin: 10px 20px 0 0;
width: 150px;
/* styles de caractères */
font:Verdana, Geneva, sans-serif;
font-size: 14px;
color: #445668;
text-align: right;
}

input {
/* styles de caractères */
font:Verdana, Geneva, sans-serif;
font-size: 14px;
color: #4b4b4b;
/* marge et taille */
width: 270px;
height: 35px;
padding: 5px 10px 0px 10px;
margin: 0 0 20px 0;
/* couleur de fond */
background: #f1f2f4;
/* bordures */
border:1px solid #b6b7b9;
border-radius: 5px;
}

Un petit message ...

Notre utilisateur peut maintenant nous transmettre les informations principales requises mais peut etre à t'il aussi envie de nous faire part d'une requete ou remarque personnelle.Pour cela nous allons utiliser un champ de saisie multiligne définit par la balise <textarea>. Elle sera écrite de la meme façon qu'un champ <input> et bénéficiera aussi d'une règle CSS propre. Ses dimensions peuvent etre définis par la règle CSS (comme ici) ou par l'ajout de deux attributs : "cols" spécifiant le nombre de colonnes du champ et "rows" son nombre de lignes.

Coté code HTML :

Afficher le code HTML

<body>

<div id = "conteneur">
    <div id="entete">Formulaire de contact</div>
<form action="soumission.php" method="post">

<label for="name">Nom et prénom :</label>
<input type="text" id="name" name="name" placeholder="Saisissez votre nom et prénom" />

<label for="email">Email :</label>
<input type="email" id="email" name="email"placeholder="Saisissez votre email" />

<label for="residence">Résidence :</label>
<input type="text" id="residence" name="residence" placeholder="Saisissez votre lieu de résidence" />

<label for="message">Message:</label>
<textarea name="message" cols="" rows="" id="message" placeholder="Ecrivez ici votre message"></textarea>

</form>
</div>

</body>

Et coté CSS :

Afficher le code CSS

...

textarea {
/* styles de caractères */
font-size: 14px;
color: #4b4b4b;
font-family:Verdana, Geneva, Sans-serif;
/* marge taille et ombre portée */
width: 270px;
height: 80px;
padding: 10px 10px 0px 10px;
margin: 0 0 20px 0;
/* couleur de fond */
background: #f1f2f4;
/* bordures */
border:1px solid #b6b7b9;
border-radius: 5px;
}

Et pour envoyer le formulaire ?

Nous voici maintenant avec un formulaire équipé de ses champs de saisie mais il reste un point non négligeable, l'envoie du formulaire vers la page de soumission afin que l'utilisateur puisse vous transmettre ses précieuses informations.

Cette étape va etre obtenue grace à l'ajout d'une balise <input> de type "submit", autrement dit un bouton d'envoi. Définir ce bouton est relativement simple puisque la balise ne comporte que deux attributs mais qui lui sont essentiels :

  • le type, ici "submit" qui définit l'action du bouton, c'est à dire envoyer le formulaire
  • l'attribut "value" qui est le texte contenu à l'intérieur du bouton, visible par l'utilisateur, important pour peu que votre formulaire soit équipé d'un bouton "reset"

Coté code HTML nous obtenons :

Afficher le code HTML

<form action="soumission.php" method="post">

<label for="name">Nom et prénom :</label>
<input type="text" id="name" name="name" placeholder="Saisissez votre nom et prénom" />

<label for="email">Email :</label>
<input type="email" id="email" name="email"placeholder="Saisissez votre email" />

<label for="residence">Résidence :</label>
<input type="text" id="residence" name="residence" placeholder="Saisissez votre lieu de résidence" />

<label for="message">Message:</label>
<textarea name="message" cols="" rows="" id="message" placeholder="Ecrivez ici votre message"></textarea>

<input type="submit" value="Envoyer" />

</form>

Et afin de conserver une certaine logique de design, je lui attribue cette règle de style similaire aux autres éléments du formulaire:

Afficher le code CSS
input[type=submit] {
/* position taille marges */
float: right;
cursor: pointer;
width: 160px;
height: 42px;
padding: 5px 10px;
margin: 0 40px 0 0;
/* coins arrondies */
border: 1px solid #275682;
border-radius: 21px;
/* fond */
background-color: #0080FF;
/* styles de texte */
color:#effaff;
font-weight:bold;
}

Ajoutons quelques effets de style

Mon formulaire est maintenant complet et utilisable (sauf page de traitement bien entendu que nous verrons par la suite), mais nous allons tout de meme définir quelques dynamique visuel car un bon formulaire doit etre compréhensible et utilisable intuitivement, et surtout parce qu'un formulaire visuellement agréable est toujours mieux !

Pour cela nous allons utiliser le potentiel du CSS3 en donnant un effet lors de l'utilisation des champs grace à la dénomination ":focus" et un petit effet se survol au bouton d'envoi grace à ":hover" et ":active".

  • focus modifiera la couleur de fond du champ selectionner (sera définit pour les élément input et textarea)
  • hover définit une règle qui se met en fonction lorsque la souris survol l'élément concerné (élément submit)
  • active définit une règle qui se met en fonction lorsque la souris clic l'élément concerné (élément submit)

ce qui nous donne en code CSS:

Afficher le code CSS

...

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

input[type=submit]:hover {
border: 1px solid #1a3957;
background-color:#51A8FF ;
}

input[type=submit]:active {
background-color: #0079F2 ;
}

Passons maintenant à la finition

Les deux balises que nous allons utiliser maintenans ne sont absolument pas essentielles mais je vous en fais part car elles peuvent s'averer très pratique pour certains d'entre vous, selon l'integration finale de votre formulaire.

Il y a une balise permettant de grouper un ensemble de champs de formulaire en un seul bloc, vous permettant ainsi d'y définir aisement une couleur de fond ou un encadrement de ces derniers sans avoir à utiliser des <div> imbriquées, elle s'appelle <fieldset>.
Nous allons l'utilisée ici pour grouper nos champs et y attribuer un "background" ainsi qu'un encadrement.

Coté code HTML :

Afficher le code HTML

<form action="soumission.php" method="post">

<fieldset> /*départ du bloc de champs*/ <------

<label for="name">Nom et prénom :</label>
<input type="text" id="name" name="name" placeholder="Saisissez votre nom et prénom" />

<label for="email">Email :</label>
<input type="email" id="email" name="email"placeholder="Saisissez votre email" />

<label for="residence">Résidence :</label>
<input type="text" id="residence" name="residence" placeholder="Saisissez votre lieu de résidence" />

<label for="message">Message:</label>
<textarea name="message" cols="" rows="" id="message" placeholder="Ecrivez ici votre message"></textarea>

<input type="submit" value="Envoyer" />

</fieldset> /*fin du bloc de champs*/ <--------
</form>

Et sa règle CSS :

Afficher le code CSS
fieldset {
background-color:#DFF4FF;
border: 1px solid ;
border-radius: 5px;
}

Et la seconde balise, elle, se définit par <legend>. Cette dernière permet de donner un nom propre à un groupe de champs <fieldset>, très pratique en cas de formulaire multi-renseignements (ex: coordonnées / adresse de livraison / choix de produits)

Plusieurs règles sont à respecter :

  • pour intégrer une balise <legend> il faut prealablement avoir définit un groupe <fieldset>
  • une seule balise <legend> par groupe <fieldset>
  • la balise <legend> doit etre pacée dans le groupe <fieldset>

Son intégration HTML se fait de la manière suivante :

Afficher le code HTML

<form action="soumission.php" method="post">
<fieldset>

<legend>Les champs de ce formulaire</legend> <!--notre titre de groupe de champs--> <------

<label for="name">Nom et prénom :</label>
<input type="text" id="name" name="name" placeholder="Saisissez votre nom et prénom" />
<label for="email">Email :</label>
<input type="email" id="email" name="email"placeholder="Saisissez votre email" />
<label for="residence">Résidence :</label>
<input type="text" id="residence" name="residence" placeholder="Saisissez votre lieu de résidence" />
<label for="message">Message:</label>
<textarea name="message" cols="" rows="" id="message" placeholder="Ecrivez ici votre message"></textarea>
<input type="submit" value="Envoyer" />
</fieldset>
</form>

Coté CSS nous lui attribuons une règle de style afin de la mettre en accord avec celle de notre formulaire :

Afficher le code CSS

...

legend {
font:Verdana, Geneva, sans-serif;
font-size:18px;
color:#445668;
background-color:#E6F2FF;
border:1px solid;
border-color:#000000;
padding:5px 10px 5px 10px;
border-radius: 5px;
}

Et voilà, nous venons donc d'établir un formulaire en HTML et de lui assigner différentes règles de style CSS afin de lui donner un aspect agréable visuellement et un certain confort d'utilisation pour le visiteur de votre site. Ce tuto est presque terminé mais je vais avant vous établir le code vous permettant de transférer les informations saisie par l'utilisateur vers votre boite email.

Récupérer les données du formulaire sur votre boite mail

Rappelez vous, je vous ai parlé un peu plus haut d'une page destiné à traiter les informations du formulaire, page désignée par l'attribut "action" de la balise <form> ici dénommée "soumission.php", nous allons maintenant la créer.

Créer un nouveau document dans votre éditeur de code et enregistrer le sous "soumission.php" (ou un autre nom, tant que vous etes en accord avec votre attribut action, mais toujours en .php).

L'utilisateur, en validant le formulaire, sera redirigé vers cette page lui confirmant le bon envoie de son message.

Cette page devra, bien sur, etre en accord avec le reste de votre site. Son apparence et contenu sont totalement indépendant du traitement du formulaire, vous avez donc carte blanche, le code étant situé au dessus du <Doctype> et étant invisible sur page.

Je ne rentrerais pas dans les détails d'explication du PHP car cette page, déjà longue, deviendrait interminable.
Voici les base minimale afin de personnalisez le code si vous modifier le formulaire ci-dessus:

  • $to= définira à quelle adresse email le contenu du formulaire doit etre envoyé
  • $subject= vous permet de donner un nom au formulaire, vous permettant de savoir tout de suite de quel formulaire viennent les informations recueillies
  • $message= contient les champs traités
  • les champs sont définis ainsi :
    "Nom et prenom"(intitulé apparaissant sur votre boite mail)
    . $_POST['name''] (attribut "name" du champ à traité)
    . "\r\n" . (changement de requete - retour à la ligne dans votre boite mail)
  • $from=$_POST['email']; (méthode d'envoie des données)

Si vous souhaiter ajouter un champ au formulaire, il vous suffira d'ajouter les infos correspondantes dans ce code en respectant cette meme syntaxe.

Et voici le code PHP :

Afficher le code PHP

<?php
$to = "entrer ici votre adresse mail";
$subject = "Entrer le nom du formulaire";
$message =
"Nom et prenom: " . $_POST['name'] . "\r\n" .
"Adresse mail: " . $_POST['email'] . "\r\n" .
"Residence: " . $_POST['residence'] . "\r\n" .
"\r\n" .
"Message: " . $_POST['message'];
$from=$_POST['email'];
$headers = "From: $from" . "/r/n";
mail($to,$subject,$message,$headers);
?>

<!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>
...
</head>

<body>

le message de ce formulaire a été envoyé !

</body>
</html>

Conclusion

Et voilà, j'espère vous avoir donné toutes les informations nécessaire à la réalisation de votre formulaire en HTML / CSS et un peu de PHP.

Il est bien évident que le design (basique) et les couleurs de ce formulaire sont à titre d'exemple, vous avez toute liberté de les modifier selon vos gouts et chartre graphique.

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.