Parfait !
Voici comment enregistrer les données du formulaire dans une base de données
MySQL après leur envoi depuis la fenêtre pop-up.
✅ Structure complète :
index.html → Formulaire dans une pop-up
traitement.php → Traitement et insertion des données en base de
données
1. Créer la base de données MySQL
Dans phpMyAdmin ou via requête SQL :
CREATE DATABASE formulaireDB;
USE formulaireDB;
CREATE TABLE messages (
id INT AUTO_INCREMENT PRIMARY KEY,
nom VARCHAR(100),
email VARCHAR(150),
message TEXT,
date_envoi DATETIME DEFAULT CURRENT_TIMESTAMP
);
✅ 2. Formulaire HTML (identique, sauf envoi vers
traitement.php)
Fichier : index.html (déjà fourni ci-dessus)
✅ 3. Fichier PHP avec insertion MySQL (traitement.php)
<?php
// Connexion à la base de données
$host = "localhost"; // ou 127.0.0.1
$dbname = "formulaireDB";
$user = "root"; // selon votre config
$pass = ""; // souvent vide sous XAMPP/WAMP
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $user,
$pass);
// Activer les erreurs PDO
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("Erreur de connexion : " . $e->getMessage());
}
// Vérifier si le formulaire a été soumis
if ($_SERVER["REQUEST_METHOD"] === "POST") {
// Récupérer et sécuriser les données
$nom = htmlspecialchars(trim($_POST['nom']));
$email = htmlspecialchars(trim($_POST['email']));
$message = htmlspecialchars(trim($_POST['message']));
// Préparer la requête
$sql = "INSERT INTO messages (nom, email, message) VALUES
(:nom, :email, :message)";
$stmt = $pdo->prepare($sql);
// Exécuter la requête avec les données
try {
$stmt->execute([
':nom' => $nom,
':email' => $email,
':message' => $message
]);
echo "<h2>Message enregistré avec succès !</h2>";
echo "<a href='index.html'>Retour</a>";
} catch (PDOException $e) {
echo "Erreur lors de l'enregistrement : " . $e->getMessage();
}
} else {
echo "Accès non autorisé.";
}
?>
✅ 4. Résultat attendu :
Quand l'utilisateur remplit le formulaire et clique sur "Envoyer", les
données sont stockées dans la table messages.
Une confirmation s'affiche ensuite.
🧰 À faire pour tester localement :
Utiliser XAMPP ou WAMP
Placer les fichiers dans le dossier /htdocs/ (XAMPP)
Aller sur http://localhost/ton_projet/index.html
Bonus : Sécurité & amélioration
Ajouter un champ anti-spam (honeypot ou captcha)
Utiliser des regex pour valider les formats (ex : email)
Rediriger après soumission avec header("Location: merci.html")
Souhaitez-vous que je vous génère aussi une page d’administration pour afficher les
messages stockés ?
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Pop-up Formulaire avec PHP</title>
<style>
body { font-family: Arial, sans-serif; }
.popup-overlay {
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
.popup {
background: #fff;
padding: 25px 20px;
border-radius: 10px;
width: 350px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
position: relative;
}
.popup button.close-btn {
background-color: crimson;
color: white;
border: none;
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
cursor: pointer;
.popup form {
display: flex;
flex-direction: column;
.popup input, .popup textarea {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
.popup button[type="submit"] {
background-color: royalblue;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
#openPopup {
margin: 40px;
padding: 10px 20px;
font-size: 16px;
</style>
</head>
<body>
<button id="openPopup">Ouvrir le formulaire</button>
<div class="popup-overlay" id="popupOverlay">
<div class="popup">
<button class="close-btn" id="closePopup">X</button>
<h2>Contact</h2>
<form action="traitement.php" method="POST">
<input type="text" name="nom" placeholder="Votre nom"
required>
<input type="email" name="email" placeholder="Votre email"
required>
<textarea name="message" placeholder="Votre message" rows="4"
required></textarea>
<button type="submit">Envoyer</button>
</form>
</div>
</div>
<script>
const openBtn = document.getElementById("openPopup");
const closeBtn = document.getElementById("closePopup");
const overlay = document.getElementById("popupOverlay");
openBtn.onclick = () => overlay.style.display = "flex";
closeBtn.onclick = () => overlay.style.display = "none";
window.onclick = (e) => {
if (e.target === overlay) overlay.style.display = "none";
};
</script>
</body>
</html>
