[Tuto] Faire un formulaire de contact simple

Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à faire un formulaire de contact simple en html (pour la structure du formulaire), javascript (pour vérifier les entrées du formulaire) et en php (pour envoyer le formulaire). Nous vous en faites pas, on va y aller pas à pas Smile

Le html : je crée mon formulaire

Tout d'abord, un formulaire se trouve entre balise

Code:

A ceci, on va devoir dire au formulaire qu'on va prendre en compte des éléments qui vont être envoyés : post (à la différence du "get" qui lui, prend en compte ce qui est indiqué dans l'url de la page Smile

)

Code:

Ensuite, il faut dire au formulaire quelle action il doit réaliser une fois qu'on clique sur "envoyer". Nous, on veut qu'il aille activer un script php. Pour cela, on va lui dire que son action, c'est d'aller lire le fichier "envoi.php" qui est configuré pour envoyer le mail.

Code:

Evidemment, ces balises ont plusieurs propriétés, mais nous ne verrons pas tout ici, ce n'est pas le but du tuto. Ici, nous n'allons voir que :
-> des zones de saisi de texte "court"
-> des zones de saisi de texte "long"

*** Les zones de saisi de texte "court"

Voici un exemple de rendu de ces zones de texte :

Spoiler:

On les code en utilisant des "input" qui est une balise "auto-fermante" (pas besoin d'ouvrir d'un coté et de refermer de l'autre)

Code:

Les input peuvent être de plusieurs types dont voici les plus courant : texte, password (dans ce cas, ce n'est pas du texte qui apparait mais des étoiles, pour cacher votre mot de passe Wink

), submit, reset et button (nous verrons ces 2 derniers un peu plus loin). Dans notre formulaire nous allons utiliser le type "texte"

Code:

Ici, comme nous allons vérifier d'une part le contenu de ses inputs et que nous allons ensuite les traiter, il faut qu'on puisse les reconnaitre. On va donc leur donner un nom "name".

Code:

Ensuite, on va ajouter une valeur par défaut à notre case (ce qui apparait avant qu'on entre du texte ^^ )

Code:

Enfin, on peut définir une taille pour nos input (=size) qui correspond en fait au nombre de caractères pouvant entrer dans la case en même temps (exemple, si vous mettez 10, votre case ne pourra contenir que 10 caractères visible en même temps) et un nombre maximum de caractère (pour éviter les pseudo de 50 lignes par exemple). Dans ce cas, on utilisera "maxlength"

Code:

=> Dans notre exemple nous allons nous servir de ce type de zone de texte pour le pseudo, le mail et le titre du sujet

*** Les zones de saisi de texte "long"

Cette fois, nous allons utiliser la balise "textarea" (= champs / zone de texte).

Code:

Une fois encore, nous allons lui donner un nom pour pouvoir la traiter

Code:

Ensuite, il faut lui donner une taille en largeur : on va compter en nombre de colonnes (= cols) ; et une hauteur : cette fois on compte en nombre de ligne (=row).

Code:

Si on le désire, on peut aussi mettre une valeur par défaut Smile

Code:

<textarea name="message" rows="10" cols="60">Veuillez entrer votre message</textarea>

Et voilà le rendu ici :

Spoiler:

-----------

Notre formulaire est presque prêt, il ne manque que le bouton envoyer et le bouton de remise à 0. Pour cela, nous allons une fois de plus utiliser des input Smile

Pour le remise à 0, vous vous en doutez, nous allons utiliser le type "reset". On lui donne donc un nom, un type et une valeur (ce qui sera affiché sur le bouton Wink

)

Code:

Attention, le "reset" n'effacera que ce qui a été entré, pas les valeurs indiquées par défaut

Ensuite, pour envoyer le formulaire, la logique voudrait qu'on utilise le "submit" pour soumettre. Cependant, ici, on va vérifier le formulaire avec du javascript. On va donc avoir une action qui va se déclancher au "click" de la souris (onClick). On va donc utiliser un bouton et une fonction pour vérifier le formulaire. Notre bouton se présentera donc ainsi :

Code:

Quand on va cliquer, on va donc déclancher la fonction 'verif()' sur ce (=this) formulaire (=form). Nous allons voir ça dans le point suivant, rassurez vous Very Happy

Donc, si on se résume, on a un code pour notre formulaire qui ressemble à ça :

Spoiler:

et le rendu :

Spoiler:

Passons maintenant à la vérification des données Smile

Le javascript : je vérifie les informations

*** 1/ On crée la fonction

Tout d'abord, on va indiquer au début de notre page html (dans le head) que nous allons commencer un script javascript, et pour éviter que le validateur W3C ne soit pas content, on va le mettre en commentaire Smile

Code:

Ensuite, nous avons donné un nom à notre fonction. Oui souvenez-vous le "verif(this.form)". Eh bien le "verif()" est le nom de notre fonction. On va donc commencer par ça dans notre script. Une fonction se présente ainsi :

Code:

function nom_de_la_fonction(LeForm){
ce qu'il faut faire;
}

On n'oublie pas les accolades qui délimitent la fonction et les ; après chaque ligne de script Wink

Donc ici ça nous fait :

Code:

*** 2/ On déclare les variables

Maintenant, il va falloir définir chaque variable, c'est à dire chaque donnée à vérifier (le pseudo, le mail, le sujet, le message). Ici, on va surtout vérifier qu'on nous envoie pas un message vide et que le mail est "valide" dans le sens où il contient bien un "@" (vérifier que le mail existe bien serait trop long à expliquer ici et à réaliser ^^). Pour définir une variable, cela se présente de cette façon :

Code:

var le_nouveau_nom = LeForm.nom_dans_le_formulaire.value;

Autrement dit, on crée un "bloc mémoire" avec un nouveau nom (var le_nouveau_nom) et on lui dit : "tu vas chercher la valeur (=value) qui se trouve dans le truc nommée nom_dans_le_formulaire qui est dans le formulaire (LeForm)".

Donc ici, on va avoir 4 variables à déclarer, et ça va nous donner :

Code:

var pseudo = LeForm.pseudo.value;
var mail = LeForm.mail.value;
var sujet = LeForm.sujet.value;
var message = LeForm.message.value;

Juste que là, facile Very Happy

Nous en sommes là :

Code:

*** 3/ On vérifie que les champs sont bien remplis

Et bien oui ! le but est de ne pas avoir de champs vides Smile

Pour cela, on va vérifier que ceux-ci ne contiennent pas du vide. Vous allez voir c'est tout simple Very Happy

Tout d'abord, on met une condition "si" (=if)

Code:

if(la condition){
je fais ça;
}

En condition, on va vérifier que notre variable n'est pas vide :

Code:

pseudo == ""

== signifie "est égale à"
"" signifie "ne contient rien"

Donc on a :

Code:

if(pseudo != ""){
je fais ça;
}

Si l'utilisateur a oublié de mettre un pseudo, il va falloir lui rappeler. Pour cela, on va émettre une "alerte" (une pop up en fait) avec un message du type "Veuillez entrer un pseudo". Cela va se présenter ainsi :

Code:

alert ("Veuillez entrer un pseudo");

et donc si on assemble le tout :

Code:

if(pseudo != ""){
alert ("Veuillez entrer un pseudo");
}

Cependant, il ne faut pas oublier notre valeur par défaut qui est considéré comme du texte. On va donc devoir ajouter dans nos conditions : on vérifie si la variable n'est pas vide ou n'est pas égale à la valeur par défaut. Ici, le "ou" se code de cette façon ||. Et, comme en maths, on va utiliser une autre paire de parenthèse pour dire que, nos 2 conditions font parties du même test

Code:

if((pseudo == "")||(pseudo == "Veuillez entrer votre pseudo")){
alert ("Veuillez entrer un pseudo");
}

Vous avez saisi ? Alors, on va ça pour chaque variable.

*** 3/ On vérifie que le mail ressemble à un mail

Bon je vous rappelle que cette partie, c'est juste pour vérifier que le contenu de cette variable à bien un "@" donc tout texte contenant un "@" sera considérer comme bon (même t@t@ ...). Bref.

Pour cela, on va utiliser une méthode (=fonction) javascript déjà existante : indexOf(ce qu'il faut chercher). Cette fonction va rechercher la lettre ou chaine de caractère indiquée entre les parenthèses. Si elle ne trouve rien, la méthode retournera (aura comme résultat) -1. Notre but ici, est donc de mettre un message d'alerte si le champs ne contient pas de @. Donc on va avoir :

Code:

if (mail.indexOf("@") == -1){
alert("Veuillez entrer votre adresse email");
}

N'oublions pas qu'à ça, il faut ajouter le "champs vide" et "champs égal à la valeur par défaut".

On en a fini avec les vérifications.

*** 5/ Oui mais....

et bien oui ! Pour le moment, on vérifie que tout est correctement rempli. Cependant, même s'il y a des erreurs, certes on nous l'indique, mais le mail est quand même envoyé. Il va donc falloir ruser Very Happy

On va donc définir une nouvelle variable qui va être soit vraie (=true) soit fausse (=false) et on va dire à notre formulaire : "si ma variable existe (donc est vraie), dans ce cas, on envoie le formulaire, sinon, on laisse tomber".

Rhooo je vois déjà vos têtes découragées ! Rassurez vous, ça va être tout simple Very Happy

-> On commence donc par définir la variable, et, comme on est des gens positifs, on va considérer qu'elle existe dès le début (donc que le formulaire est bon)

Code:

var on_envoie = true;

-> Ensuite, je vais ajouter dans chacun de mes tests cette variable, en indiquant que, comme il y a une erreur, elle disparait (devient donc fausse).

Code:

on_envoie = false;

ce qui fait pour le pseudo par exemple :

Code:

if((pseudo == "")||(pseudo == "Veuillez entrer votre pseudo")){
      alert ("Veuillez entrer un pseudo");
      on_envoie = false;
      }

-> Enfin, une fois qu'on a fait toutes les vérifications (pas vide, bon mail), on va regarder si notre variable "on_envoie" existe. Si c'est le cas, on soumettra le formulaire (LeForm.submit() Wink

, sinon, on ne fait rien (la personne a déjà reçu des messages d'alerte Wink

)

Code:

if(on_envoie){
LeForm.submit();
}

Et voilà ! Votre formulaire est vérifié Very Happy

*** On se résume

Voici donc le script que vous êtes censé avoir Smile

Spoiler:

Le php : j'envoi le mail

Ahh je sais que pour certains, c'est cette partie qui effraie le plus. Mais vous allez voir, c'est très facile Smile

*** 1/ On créer le fichier envoi.php

Et on y ajoute toute de suite les balises php :

Code:

<?php

?>

*** 2/ On récupére les données

Alors, on a donc nos données validés et notre fichier d'envoi qui n'attend que de recevoir ce qu'il faut pour se mettre à bosser. Dans la première partie (lors de la création du formulaire), je vous ai dit que nous allions utiliser la méthode "post". Et bien c'est ici qu'elle va nous servir. On va récupérer les données envoyées en utilisant :

Code:

$_POST['nom_dans_le_formulaire'];

Comme pour le javascript, on va devoir déclarer les variables en leur donnant un nouveau nom, et en récupérant les données sauf que cette fois, pas de var Smile

En effet, on déclare la variable comme ça :

Code:

$mon_nouveau_nom = ...

ce qui nous donne ici :

Code:

<?php

$pseudo = $_POST['pseudo'];
$mail = $_POST['mail'];
$sujet = $_POST['sujet'];
$message = $_POST['message'];

?>

*** 3/ On envoie le mail

Ultime étape Smile

Avant tout, il faut indiquer où envoyer le mail. Pour cela, on va entrer notre adresse dans une variable Smile

Code:

$adresse = "mon_mail@mail.fr";

Ensuite, on indique l'expéditeur :

Code:

$expediteur="From: $pseudo <$mail>";

Enfin, on envoie le mail en utilisant une fonction php déjà définie "mail()" qui se compose de 4 propriétés : le destinataire, le sujet, le message, l'expéditeur. Ce qui nous donne :

Code:

mail($adresse, $sujet, $message, $expediteur);

*** 4/ Et comment je sais si le mail est parti ?

Ahh et bien nous allons faire un petit test Very Happy

Si la fonction est bien existante, on va afficher un texte qui dit que le mail est parti. Sinon, le texte indiquera qu'il y a eu un problème à l'envoi Smile

Pour afficher du texte en php, on utilise :

Code:

echo "mon texte";

Et pour faire des conditions, c'est le même principe qu'en javascript. Donc :
-> Si la fonction mail s'exécute correctement (on supprime donc la ligne "mail($adresse, $sujet, $message, $expediteur);" et on la remplace par ce qu'il suit ^^ en effet en faisant le test, il envoie le mail Wink

) :

Code:

if(mail($adresse, $sujet, $message, $expediteur)){

}

-> Alors, je dis que c'est tout bon :

Code:

echo "<p style=\"text-align:center;font-size:18px; color:green;\">Votre mail est bien envoyé. Je vous répondrai rapidement.</p><p style=\"text-align:center;font-size:18px; color:green;\"><a href=\"index.php\">Cliquez ici pour retourner à l'accueil du site</a></p>";

-> Sinon

Code:

}else{

-> On dit qu'il y a eu un problème :

Code:

echo "<p style=\"text-align:center;font-size:18px; color:red;\">Un problème est survenu lors de l'envoi du mail.</p><p style=\"text-align:center;font-size:18px; color:red;\"><a href=\"contact.php\">Veuillez réessayer</a></p>";

Ce qui nous donne au final :

Code:

if(mail($adresse, $sujet, $message, $expediteur)){
echo "<p style="text-align:center;font-size:18px; color:green;">Votre mail est bien envoyé. Je vous répondrai rapidement.</p><p style="text-align:center;font-size:18px; color:green;"><a href="index.html">Cliquez ici pour retourner à l'accueil du site</a></p>";
}else{
echo "<p style="text-align:center;font-size:18px; color:red;">Un problème est survenu lors de l'envoi du mail.</p><p style="text-align:center;font-size:18px; color:red;"><a href="contact.html">Veuillez réessayer</a></p>";
}

=> Remarque : On utilise ici des \ devant les " pour éviter qu'ils ne ferment le "echo".

C'est fini ?

Et bien oui Smile

Vous pouvez à présent être contacter.

Vous avez donc 2 fichiers :

-> contact.html qui contient
* Le formulaire :

Spoiler:

* Le javascript entre les balises "head" :

Spoiler:

-> envoi.php qui contient tout ce qu'il faut pour envoyer le mail

Spoiler:

-----------

Bon courage et si vous avez des soucis, n'hésitez pas Very Happy

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]