Afin que les visiteurs de votre site puissent vous contacter, le mieux serai de mettre en place un formulaire de contact.

Dans ce tutoriel nous allons créer le formulaire en HTML et faire l'envoi du mail en PHP.

Création de la partie HTML

Pour envoyer des informations en HTML, il faut passer un formulaire avec les balises form. Après il faut remplir les attributs :

1. action : la page où le script sera exécuté
2. method : post fait partir les données en caché ou get les fait partir dans l'URL. Faites donc un test vous comprendrez mieux

Après les attributs, il faut passer aux champs. Les champs se font avec des input avec différents attribut type :

• text : un champs classique, par exemple le nom de la personne
• checkbox : affiche des cases à cocher (choix multiple)
• hidden : ne s'affiche pas mais permet de faire passer des données sans que l'utilisateur ne le sache
• password : comme son nom l'indique, pour les mots de passe. Cache les lettres par des étoiles
• radio : affiche des cases à cocher (choix unique)
• submit : affiche un bouton pour soumettre le formulaire

Et pour chaque input, il faut penser à mettre l'attribut "name" qui nous permettra de récupérer les données sur notre page PHP. Cette attribut doit être absolument différent les uns des autres pour ne pas créer d'erreurs.

<form action="send.php" method="post">
    <label for="nom">Votre Nom :</label>
    <input class="contact_text" type="text" name="nom">

    <label for="email">Votre E-mail :</label>
    <input class="contact_text" type="text" name="email">

    <label for="message">Votre Message :</label>
    <textarea class="contact_textarea" name="message" rows="7" cols="10"></textarea>

    <input class="contact_submit" type="submit" value="Envoyer">
</form>

Création de la partie PHP

Dans notre fichier PHP nous allons devoir faire plusieurs tests afin de vérifier si tous les champs sont correctement remplis.

<?php

if(!empty($_POST)) {
    // Permet d'extraire le tableau et crée automatiquement les variables en fonctions des attributs name écrit précédement
    extract($_POST);

    $valid = true;

    // Si le champs nom est vide, cela veut dire qu'il ne l'a pas rempli
    if(empty($nom)) {
        $valid = false;
        $notif = "Veuillez remplir correctement les champs.";
    }

    // Pareil pour le champs email
    if(empty($email)) {
        $valid = false;
        $notif = "Veuillez remplir correctement les champs.";
    }

    // Permet de vérifier si le texte écrit dans le champs email est correct
    // S'il contient bien au moins 2 caractères avant l’arobase
    // S'il contient bien une arobase
    // S'il contient bien au moins 2 caractères entre l'arobase et le point
    // S'il y a bien entre 2 et 4 caractères après le point
    // Ce qui permet de vérifier si l'email est bien sous cette forme email@domaine.fr
    if($email != NULL && !preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#",$email)) {
        $valid = false;
        $notif = "Veuillez remplir correctement les champs.";
    }

    // Pareil pour le champs du message
    if(empty($message)) {
        $valid = false;
        $notif = "Veuillez remplir correctement les champs.";
    }
}

// Si le tout est valide, on va alors envoyer l'email
if($valid) {
    // Spécifiez votre adresse email
    $to = "votre@email.fr";

    // Spécifiez le sujet
    $subject = "Sujet du mail";

    // Ne pas toucher. Ce sont les infos pour bien envoyer le mail et être bien encodé
    $headers = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
    $headers .= "From: ".$nom." <".$email."> \r\n";
    $headers .= "Reply-To: ".$email;

    // On appel la fonction mail() de PHP afin de l'envoyer
    if(mail($to, $subject, $message, $headers)) {
        $notif = "Votre mail a bien été envoyé.";
    } else {
        $notif = "Une erreur est survenue lors de l'envoi.";
    }

    // Permet de vider les variables pour éviter les problèmes
    unset($nom);
    unset($email);
    unset($message);
}

// Affiche le message à l'utilisateur
echo $notif;

?>

Amélioration du formulaire

Voyons comment améliorer le tout. Car pour le moment tout cela reste un peu moche. Avec l'arrivé du HTML5, de nouveaux attributs sont arrivés. Par exemple les attributs placeholder, required et pattern.

• placeholder : Permet d'afficher un texte à l'utilisateur qui disparaîtra lors de son clic dans le champs
• required : Permet de bloquer l'envoi du formulaire si le champs en required n'est pas remplie
• pattern : Permet de créer une règle de détection plus spécifique. A ne pas oublier de coupler avec un required

<input class="contact_text" type="text" name="email" placeholder="email@domaine.fr" pattern="^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$" required>

Pour la partie PHP, vous avez dû vous rendre compte que si vous soumettiez le formulaire et qu'une erreur arrive vous aurez perdu toutes vos données. Donc nous pouvons déjà commencer par stocker le message d'erreur et les données de l'utilisateur dans la variable $_SESSION à condition de démarrer la session sur la page de contact et celle de l'envoi avec la fonction session_start();

Voici maintenant les deux pages modifiés :

<?php session_start(); ?>

<?php if(isset($_SESSION['notif'])) { echo $_SESSION['notif'] } ?>

<form action="send.php" method="post">
    <label for="nom">Votre Nom :</label>
    <input type="text" name="nom" value="<?php if(isset($_SESSION['nom'])) { echo $_SESSION['nom'] } ?>">

    <label for="email">Votre E-mail :</label>
    <input type="text" name="email" value="<?php if(isset($_SESSION['email'])) { echo $_SESSION['email'] } ?>">

    <label for="message">Votre Message :</label>
    <textarea name="message" rows="7" cols="10"><?php if(isset($_SESSION['message'])) { echo $_SESSION['message'] } ?></textarea>

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

<?php

// On vide notre variable $_SESSION afin que si l'utilisateur actualise la page, les messages disparaissent
unset(isset($_SESSION['nom'], $_SESSION['email'] $_SESSION['message'], $_SESSION['notif']);

?>

 

<?php

session_start();

if(!empty($_POST)) {
    extract($_POST);

    $valid = true;

    if(empty($nom)) {
        $valid = false;
        $_SESSION['notif'] = "Veuillez remplir correctement les champs.";
    }

    if(empty($email)) {
        $valid = false;
        $_SESSION['notif'] = "Veuillez remplir correctement les champs.";
    }

    if($email != NULL && !preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#",$email)) {
        $valid = false;
        $_SESSION['notif'] = "Veuillez remplir correctement les champs.";
    }

    if(empty($message)) {
        $valid = false;
        $_SESSION['notif'] = "Veuillez remplir correctement les champs.";
    }

    $_SESSION['nom'] = $nom;
    $_SESSION['email'] = $email;
    $_SESSION['message'] = $message;
}

if($valid) {
    $to = "votre@email.fr";

    $subject = "Sujet du mail";

    $headers = 'MIME-Version: 1.0' . "\r\n";
    $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";
    $headers .= "From: ".$nom." <".$email."> \r\n";
    $headers .= "Reply-To: ".$email;

    if(mail($to, $subject, $message, $headers)) {
        $_SESSION['notif'] = "Votre mail a bien été envoyé.";
    } else {
        $notif = "Une erreur est survenue lors de l'envoi.";
    }

    unset($nom);
    unset($email);
    unset($message);
}

// Permet de renvoyer vers une autre page
header("Location: contact.php");

?>

Voilà, maintenant votre formulaire est quand même un peu mieux et vous avez vos erreurs qui s'affichent sur votre page de contact et les données de l'utilisateur sont conservés.

Demo

2016-08-30 19:40:48

Source

http://lemon-cake.fr/?p=175