Créer un formulaire simple et sécurisé en PHP (Niveau 1).
Côté HTML.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire de contact</title>
</head>
<body>
<form action="traitement.php" method="post">
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom" required><br><br>
<label for= »email »>Email:</label>
<input type= »email » id= »email » name= »email » required><br><br>
<label for= »message »>Message:</label>
<textarea id= »message » name= »message » required></textarea><br><br>
<input type= »submit » value= »Envoyer »>
</form>
</body>
</html>
Explications :
<form action="traitement.php" method="post"> : Définit un formulaire HTML. L’attribut action spécifie l’URL du script PHP qui traitera les données du formulaire. L’attribut method spécifie la méthode HTTP à utiliser pour envoyer les données, ici post.
<label for="nom">Nom:</label> : Définit une étiquette pour le champ de saisie du nom. L’attribut for associe l’étiquette au champ de saisie avec l’ID nom. (obligatoire pour le fonctionnement du script d’envoi).
<input type="text" id="nom" name="nom" required> : Définit un champ de saisie de type texte. L’attribut id et name identifient le champ. L’attribut required indique que ce champ est obligatoire.
* Idem pour les autres champs…
<input type="submit" value="Envoyer"> : Définit un bouton de soumission pour le formulaire. Lorsque l’utilisateur clique sur ce bouton, les données du formulaire sont envoyées à l’URL spécifiée dans l’attribut action.
Côté PHP.
<?php
// Vérifie si le formulaire a été soumis
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Récupère les données du formulaire
$nom = $_POST["nom"];
$email = $_POST["email"];
$message = $_POST["message"];
// Valide les données (exemple simple)
if (empty($nom) || empty($email) || empty($message)) {
die(« Tous les champs sont obligatoires. »);
}
// Nettoie les données
$nom = htmlspecialchars($nom);
$email = htmlspecialchars($email);
$message = htmlspecialchars($message);
// Affiche les données (vous pouvez les enregistrer dans une base de données ou envoyer un email)
echo « Nom: » . $nom . « <br> »;
echo « Email: » . $email . « <br> »;
echo « Message: » . $message . « <br> »;
// Exemple d’envoi d’email
$to = « votre@email.com »;
$subject = « Nouveau message de $nom »;
$body = « Vous avez reçu un nouveau message de $nom.\n\nEmail: $email\n\nMessage:\n$message »;
$headers = « From: $email »;
if (mail($to, $subject, $body, $headers)) {
echo « Email envoyé avec succès. »;
} else {
echo « Échec de l’envoi de l’email. »;
}
} else {
// Si le formulaire n’a pas été soumis, redirige vers le formulaire
header(« Location: formulaire.html »);
exit();
}
?>
Explications :
- Vérification de la soumission du formulaire : Le script vérifie si le formulaire a été soumis en utilisant $_SERVER[« REQUEST_METHOD »].
- Récupération des données : Les données du formulaire sont récupérées à partir de la superglobale $_POST.
- Validation des données : Une validation simple est effectuée pour s’assurer que tous les champs sont remplis.
- Nettoyage des données : Les données sont nettoyées pour éviter les attaques XSS (Cross-Site Scripting) en utilisant htmlspecialchars.
- Affichage des données : Les données sont affichées. Vous pouvez les enregistrer dans une base de données ou envoyer un email.
- Envoi d’email : Un exemple d’envoi d’email est fourni. Assurez-vous que votre serveur est configuré pour envoyer des emails.
* Le traitement du formulaire fonctionne uniquement sur serveur distant. Vous ne pouvez donc pas tester votre formulaire en local même avec Wamp Serveur.
Intégrer la sécurité ReCapctha v3 de Google au formulaire.
reCAPTCHA v3 renvoie un score pour chaque requête sans friction pour l’utilisateur d’un formulaire.
Ce score est basé sur les interactions avec votre site et vous permet de prendre les mesures appropriées pour celui-ci.
Enregistrez des clés reCAPTCHA v3 dans la console d’administration reCAPTCHA.
Intégrer ReCaptcha V3 à votre formulaire.
Chargez l’API JavaScript.
<script src="https://www.google.com/recaptcha/api.js"></script>
Ajoutez un script avec la fonction d’appel sur le bouton du formulaire.
<script>
function onSubmit(token) {
document.getElementById("formcontact").submit();
}
</script>
Ajoutez des attributs à votre bouton HTML.
<button class="g-recaptcha"
data-sitekey="reCAPTCHA_site_key"
data-callback='onSubmit'
data-action='submit'>Envoyer</button>
Ajoutez l’id formcontact dans la balise form. Remplacez la valeur de data-sitekey par la clé API que vous avez généré. Veillez à conserver la class « g-recaptcha ».