Formulaire de contact en PHP avec MySQL

Le formulaire de contact est important pour toute organisation, car cela peut conduire à établir une communication personnalisée avec ses clients.

Ici, dans ce tutoriel, nous allons voir comment créer un formulaire de contact simple et appliquer une validation sur celui-ci en utilisant jQuery et PHP.
 

Prérequis

Pour créer un simple formulaire de contact PHP avec MySQL, nous allons utilisé les technologies suivantes :

  • PHP 7.1
  • MySQL
  • Jquery

Pour arriver au résultat suivant:
 

 
Vous pouvez télécharger notre fichier zip ou simplement suivre notre code et l’éditer pour l’utiliser.
 
 

Créer le formulaire de contact HTML

Créez le formulaire de contact HTML comme indiqué ci-dessous et enregistrez-le avec l’extension .php. La valeur qui sera écrite entre les guillemets dans l’attribut Name comme name="u_name" dans les balises input fonctionne comme un nom de variable. Ces attributs contiendront les données du formulaire que nous utiliserons pour sauvegarder dans notre base de données. Il y a deux méthodes pour envoyer les données de votre formulaire à votre page PHP : GET et POST.
Différence entre GET et POSTDifférence entre GET et POSTLes requêtes HTTP POST ajoutent des données supplémentaires dans le corps du message d’un client (ou navigateur) envoyé à un serveur. En revanche, les requêtes…Lire plus Nous allons utiliser la méthode POST car il cache les données de l’utilisateur et il n’y a pas de limite pour envoyer des données.

<html>
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<link rel="stylesheet" href="contact.css" />
		<script type="text/javascript" src="contact.js"></script>
	</head>
	<body>
		<div id="box">
		  <form id="form" enctype="multipart/form-data" onsubmit="return validate()" method="post">
		    <h3>Formulaire de contact</h3>
		    <label>Nom: <span>*</span></label>
		    <input type="text" id="name" name="name" placeholder="Nom"/>
		    <label>Email: <span>*</span></label><span id="info" class="info"></span>
		    <input type="text" id="email" name="email" placeholder="Email"/>
		    <label>Sujet: <span>*</span></label>
		    <input type="text" id="subject" name="subject" placeholder="Demande de renseignement"/>
		    <label>Message:</label>
		    <textarea id="message" name="message" placeholder="Message..."></textarea>
		    <input type="submit" name="send" value="Envoyer le message"/>
			<div id="statusMessage"> 
            <?php if (! empty($db_msg)) { ?>
              <p class='<?php echo $type_db_msg; ?>Message'><?php echo $db_msg; ?></p>
            <?php } ?>
            <?php if (! empty($mail_msg)) { ?>
              <p class='<?php echo $type_mail_msg; ?>Message'><?php echo $mail_msg; ?></p>
            <?php } ?>
            </div>
		  </form>
	    </div>
	</body>
</html>

 

Style CSS
#box{
	width:955px;
	margin:20px auto;
	padding-top:20px;
	font-family: serif;
}
#form{
	border-radius:2px;
	padding:20px 30px;
	box-shadow:0 0 15px;
	font-size:14px;
	font-weight:bold;
	width:350px;
	margin:20px 250px 0 35px;
	float:left;
}
h3{
	text-align:center;
	font-size:20px;
}
input{
	width:100%;
	height:35px;
	margin-top:5px;
	margin-bottom: 20px;
	border:1px solid #999;
	border-radius:3px;
	padding:5px;
}
input[type=submit]{
	background-color:#ca1e1e;
	border:1px solid white;
	font-family: serif;
	font-Weight:bold;
	font-size:18px;
	color:white;
}
textarea{
	width:100%;
	height:80px;
	margin-top:5px;
	border-radius:3px;
	padding:5px;
	resize:none;
}
span{
	color:red
}
.successMessage{
    background-color: #7acc7d;
    border: #2b5a2d 1px solid;
    padding: 5px 9px;
    color: #262b26;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}
.errorMessage{
    background-color: #e64141;
    border: #da1414 1px solid;
    padding: 5px 10px;
    color: #fdf7f7;
    border-radius: 4px;
}
.info{
    font-size: 0.9em;
    color: #d67262;
    letter-spacing: 2px;
    padding-left: 5px;
}

 
 

Validation JQuery

Script de validation du formulaire en jQuery qui retourne une valeur booléenne. Si la fonction de validation retourne true, alors le formulaire sera soumis au PHP. Sinon, les messages de validation correspondants sont affichés dans le formulaire pour indiquer à l’utilisateur ce qui ne va pas avec les données du formulaire qu’il a soumises.

function validate() {
    var isValid = true;

    var name = $("#name").val();
    var email = $("#email").val();
    var subject = $("#subject").val();
    var message = $("#message").val();

    if (name == "") {
        $("#name").css('border', '#fb0505 1px solid');
        isValid = false;
    }
    if (email == "") {
        $("#email").css('border', '#fb0505 1px solid');
        isValid = false;
    }
    if (!email.match(/^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/)) {
        $("#info").html("(Adresse email non valide)");
        $("#email").css('border', '#fb0505 1px solid');
        isValid = false;
    }
    if (subject == "") {
        $("#subject").css('border', '#fb0505 1px solid');
        isValid = false;
    }
    if (message == "") {
        $("#message").css('border', '#fb0505 1px solid');
        isValid = false;
    }
    return isValid;
}

 

Script PHP pour le traitement du formulaire de contact

Dans le code HTML, la balise <form> est spécifiée avec la méthode POST. Si le formulaire est soumis avec succès après le validation par jQuery, le script PHP accède aux données du formulaire en utilisant la variable superglobale $_POST.

Le fichier PHP index.php est utilisé pour gérer les données à stocker dans la base de données et à envoyer par email.
 

Envoyer les données du formulaire par e-mail

Dans ce code PHP, les données du formulaire sont reçues en utilisant la variable superglobale $_POST. Ces données sont utilisées pour définir l’en-tête et le corps du mail et sont définies avec la fonction mail() de PHP. Une fois l’email envoyé au destinataire, le message de succès est affiché dans le formulaire de contact pour accuser réception du message. Vous pouvez envoyer des e-mails en utilisant le package Sendmail et référencer l’envoi d’e-mails en PHP en utilisant le serveur SMTP Gmail.

<?php
	if(!empty($_POST["send"])) {
		$name = $_POST["name"];
		$email = $_POST["email"];
		$subject = $_POST["subject"];
		$message = $_POST["message"];

		$toEmail = "[email protected]";
		$mailHeaders = "From: " . $name . "<". $email .">\r\n";
		if(mail($toEmail, $subject, $message, $mailHeaders)) {
			$mail_msg = "Vos informations de contact ont été reçues avec succés.";
			$type_mail_msg = "success";
		}else{
			$mail_msg = "Erreur lors de l'envoi de l'e-mail.";
			$type_mail_msg = "error";
		}
	}
?>

 
 

Stocker les données du formulaire dans la base de données

Ce code PHP vous aide à stocker les données du formulaire de contact dans la base de données. Créez une table de base de données appelée contact_form avec name, email, subject et message correspondant aux champs de notre formulaire de contact, ou simplement importer le fichier sql qui se trouve dans le zip. Après avoir récupéré les données du formulaire dans le PHP, elles seront utilisées pour former l’instruction INSERT de MySQL. En exécutant l’instruction INSERT, les données du formulaire de contact seront stockées dans la base de données. Le code suivant implémente la connexion à la base de données MySQL et accède à la base de données pour insérer les informations de contact. Après l’insertion dans la base de données, la variable $db_msg sera définie.

<?php
	if(!empty($_POST["send"])) {
		$name = $_POST["name"];
		$email = $_POST["email"];
		$subject = $_POST["subject"];
		$message = $_POST["message"];

		$connexion = mysqli_connect("localhost", "root", "", "contact_form") or die("Erreur de connexion: " . mysqli_error($connexion));
		$result = mysqli_query($connexion, "INSERT INTO contact (name, email, subject, message) VALUES ('" . $name. "', '" . $email. "','" . $subject. "','" . $message. "')");
		if($result){
			$db_msg = "Vos informations de contact sont enregistrées avec succés.";
			$type_db_msg = "success";
		}else{
			$db_msg = "Erreur lors de la tentative d'enregistrement de contact.";
			$type_db_msg = "error";
		}
	}
?>

 

Résultat

Cette capture d’écran montre le résultat du formulaire de contact PHP. Sur ce formulaire, si l’adresse email n’est pas valide un messages de validation sera affiché à côté de nom du champ du formulaire. Après un traitement PHP réussi sur les données du formulaire de contact, le message de réussite sera affiché au bas de ce formulaire.
 


 

Télécharger le code source en cliquant ici.

 
Si vous rencontrez l’erreur suivante :
 


 
Suivez les tutoriels suivants:
Comment configurer WampServer pour envoyer un mail depuis localhost en PHP-minComment configurer WampServer pour envoyer un mail depuis localhost en PHPLorsque vous créez une applications web professionnelles, il est important de tester la fonctionnalité du messagerie avant de déployer le site web. Il est donc…Lire plus Comment envoyer un mail depuis localhost en PHPComment configurer XAMPP pour envoyer un mail depuis localhost en PHPParfois, nous devons tester la fonction d’envoi des emails depuis notre environnement de développement. Nous pouvons envoyer des emails depuis notre hôte local en utilisant…Lire plus

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *