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.
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-\.]+@([\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.
Si vous rencontrez l’erreur suivante :
Suivez les tutoriels suivants:
- Créer un système de notification avec PHP, MySQL et AJAX
- Créer un Espace Membre avec administration en PHP et MySQL
- Formulaire d’authentification login + mot de passe avec PHP et MySQL
- Formulaire de contact en PHP avec MySQL
- Récupérer les données d’un formulaire en PHP
- Comment faire un formulaire en PHP/MySQL?
- Formulaire avec captcha en PHP
- Générateur de code barre en PHP
- Liaison entre deux liste déroulante pays et ville en jQuery, Ajax et PHP
Bonjour,
très bien le formulaire, en revanche pouvez-vous m’indiquer comment intégrer le captcha que vous proposez, j’ai une erreur et m’arrache les cheveux avec php 7, j’ai commencé y a 20ans avec php.2 !
merci d’avance
isabelle
Bonjour je suis Cédric depuis la République démocratique du Congo et je voudrais savoir comment créer un menu en php
Merci beaucoup pour votre amour de partager ensemble cet notion.