Salty lakes, Martin Sanchez on Unsplash Salty lakes, Martin Sanchez on Unsplash

Créer un formulaire pour un site statique

L'absence de base de donnée ou de traitement côté serveur avantagent les sites statiques en terme de performance ou de sécurité. Cependant l'intégration d'un formulaire et la gestion de son contenu dynamique peut poser quelques soucis.

Plusieurs opérateurs proposent backend de formulaire, API et service de messagerie pour les formulaires HTML. Faciles à intégrer, ces services en ligne permettent de créer des formulaires complexes et proposent des fonctionnalités évoluées, mais rarement gratuitement.

On peut aussi intégrer un simple formulaire de contact avec un peu de JavaScript et de Php.

Création du formulaire

Je crée un formulaire de contact classique, minimaliste pour l'exemple.
Pas d'attribut action ou method sur le formulaire, le JavaScript prend tout en charge.
J'ajoute des alertes pour la validation après le formulaire.

<!-- formulaire.html -->
<form id="contactForm">
<input type="text"
id="nom"
name="nom"
placeholder="Nom"
required>


<input type="email"
id="email"
name="email"
placeholder="Email"
required>


<textarea rows="4"
id="message"
name="message"
placeholder="Message"
required>
</textarea>

<input type="submit" value="Envoyer">
</form>

<div id="alertSuccess" style="display:none;">
Message envoyé.
</div>

<div id="alertWarning" style="display:none;">
Erreur.
</div>

Gestion du formulaire

On prend en charge notre formulaire avec JavaScript. L'interface FormData et les objets XMLHttpRequest nous permettent de récupérer les données du formulaire et d'interagir avec le serveur.

/* javascript.js */
window.addEventListener("load", function() {

function sendData() {
// Nouvelle requête
let XHR = new XMLHttpRequest();

// Liaison FormData et élément formulaire
let FD = new FormData(form);

// Configuration de la requête
XHR.open("POST", "action.php");

// Envoi des données du formulaire
XHR.send(FD);

// Récupération du status HTTP
XHR.onload = function() {
if (XHR.status != 200) {
// Erreur
document.getElementById("alertWarning").style.display = "block";
} else {
// Succés
document.getElementById("contactForm").reset();
document.getElementById("alertSuccess").style.display = "block";
}
};
}

// Définition de l'élément form
let form = document.getElementById("contactForm");

// Prise en charge de l'événement submit
form.addEventListener("submit", function(event) {
event.preventDefault();
sendData();
});
});

Côté serveur

On utilise un fichier php pour récupérer les données, les envoyer par mail et retourner un statut HTTP.

/* action.php */

// Process uniquement si POST method
if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Nom expéditeur
$nom = strip_tags(trim($_POST["nom"]));

// Email expéditeur
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);

// Message expéditeur
$message = trim($_POST["message"]);

// Mail destinataire
$your_email = "email@destinataire.fr";

// Site destinataire
$your_site_name = "site-destinataire";

// Sujet email
$email_subject = "[{$your_site_name}] Nouveau message de {$nom}";

// Contenu email
$email_content = "Nom: {$nom}<br>";
$email_content .= "Email: {$email}<br>";
$email_content .= "Message: {$message}<br>";

// Headers email
$email_headers = "MIME-Version: 1.0" . "\r\n";
$email_headers .= "Content-type: text/html; charset=UTF-8" . "\r\n";
$email_headers .= "From: {$nom} <{$email}>";

// Envoi email
$send_email = mail($your_email, $email_subject, $email_content, $email_headers);

// Check email envoyé ou non
if($send_email){
http_response_code(200);
} else {
http_response_code(500);
}

} else {
// Non POST -> statut 403
http_response_code(403);
}

Si vous rencontrez des problèmes d'encodage, ajouter la variable $nomUTF et remplacer $nom dans le sujet et le header du mail.

/* action.php */
...
// Nom expéditeur
$nomUTF = "=?UTF-8?B?".base64_encode($nom)."?=";
...
// Sujet email
$email_subject = "[{$your_site_name}] Nouveau message de {$nomUTF}";
...
// Headers email
$email_headers .= "From: {$nomUTF} <{$email}>";
...

Voilà de bonnes pistes pour créer vos formulaires de façon autonome sans service tiers.
Vous pouvez creuser plus avant avec l'envoi de formulaires avec JavaScript sur MDN web docs.