TP : Créer un formulaire de contact

Dans ce tutoriel, je vais vous apprendre comment créer et configurer un formulaire de contact en utilisant HTML5, CSS avec BootStrap et PHP.

L’utilisation des formulaires de contact / e-mail est important, aujourd’hui il existe une multitude de solutions.

Celles-ci peuvent toutefois vous faire gagner du temps, comme nous le montrerons dans ce guide, créer votre propre solution en HTML5, CSS et PHP ne prend pas beaucoup de temps et pourrait en valoir la peine.

Nous ne nous attendons pas à savoir quelle solution convient le mieux à votre cas. Au lieu de cela, nous discuterons des avantages et des inconvénients du déploiement de votre propre fonctionnalité de contact par rapport à l’utilisation d’une solution de plugin. Une fois que vous avez décidé de la voie à suivre, nous vous proposons un didacticiel sur la création d’un formulaire de contact PHP par vous-même, facilement. Si vous avez décidé d’opter pour une solution prédéfinie, nous vous dirigerons dans la bonne direction, en fonction du cadre dans lequel vous travaillez.

Etape 1 préparer le HTML du formulaire

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div class="container">
            <form method="post" action="">
          
               <div class="row">
                <div class="col-md-3">
                      
                    </div>
                    <div class="col-md-6">
                            <h3>Votre message</h3>

                        <div class="form-group">
                            <input type="text" name="name" class="form-control" placeholder="Ton nom *" value="" />
                        </div>
                        <div class="form-group">
                            <input type="text" name="email" class="form-control" placeholder="Ton email *" value="" />
                        </div>
                        <div class="form-group">
                            <input type="text" name="phone" class="form-control" placeholder="Ton téléphone *" value="" />
                        </div>
                        <div class="form-group">
                            <textarea name="message" class="form-control" placeholder="Ton Message *" style="width: 100%; height: 150px;"></textarea>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="envoyer"value="Envoyer" />
                        </div>
                    </div>
                    <div class="col-md-3">
                        
                    </div>
                </div>
            </form>
</div>

Le formulaire de contact complet avec PHP

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<div class="container">
            <form method="post" action="">
               <div class="row">
                    <div class="col-md-3">
                    </div>
                    <div class="col-md-6">

                        <h3>Votre message</h3>

                        <div class="form-group">
                            <input type="text" name="nom" class="form-control" placeholder="Ton nom *" value="" />
                        </div>
                        <div class="form-group">
                            <input type="text" name="sujet" class="form-control" placeholder="Sujet" value="" />
                        </div>


                        <div class="form-group">
                            <input type="text" name="email" class="form-control" placeholder="Ton email *" value="" />
                        </div>
                        <div class="form-group">
                            <input type="text" name="phone" class="form-control" placeholder="Ton téléphone *" value="" />
                        </div>
                        <div class="form-group">
                            <textarea name="message" class="form-control" placeholder="Ton Message *" style="width: 100%; height: 150px;"></textarea>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="envoyer" value="Envoyer" />
                        </div>
                        
                    </div>
                    <div class="col-md-3">
                    </div>
                </div>
            </form>
</div>

<?php

if(!empty($_POST["envoyer"])) {

  $nom = $_POST['nom'];
  $email = $_POST['email'];
  $sujet = $_POST['sujet'];
  $message = $_POST['message'];

  $toEmail = "ton_email@tondomain.com";
  $mailHeaders = "From: " . $nom . "<". $email .">\r\n";

  if(mail($toEmail, $sujet, $message, $mailHeaders)) {
      $message = "Le fomrulaire à bien été envoyé.";
  }

}
?>