Un site statique a toujours besoin d'un formulaire de contact, et les options honnêtes sont moins nombreuses et meilleures que ce que suggère n'importe quel fil de discussion stackOverflow. Le modèle est le même pour tous : la validation du navigateur reste le validateur et la destination change uniquement.

const form = document.querySelector("#contact");
if (!form.reportValidity()) return; // browser already showed the errors

const data = Object.fromEntries(new FormData(form));
const body = JSON.stringify(data, null, 2);

// Destination A: the mail object, zero backend, opens the reader
location.href =
  "mailto:hello@example.com" +
  "?subject=" + encodeURIComponent(data.subject) +
  "&body=" + encodeURIComponent(body);

L'échelle de destination, la dernière la plus facile

  • Méthode GET vers une page de recherche ou de résultats : le formulaire de contact statique le plus indulgent, et c'est le propre comportement de recherche de ce site.
  • mailto avec sujet et corps prédéfinis : aucune ligne de serveur nulle part, aucun compromis en matière de confidentialité au-delà du client de messagerie lui-même.
  • Points de terminaison de votre formulaire social ou public CRM : le tiers prend les données, alors lisez cette page de confidentialité deux fois avant de la connecter.
  • Services de formulaire fournis par l'hôte : certains hôtes statiques proposent une fonctionnalité de formulaire (celle de Netlify en est une) ; c'est un véritable backend installé sous votre URL, et son histoire de spam est livrée avec votre hébergeur.

La couche de validation

  1. required, type="email", minlength: browser constraints first, error rendering for free.
  2. reportValidity() pour les chemins de programmation : un appel fait apparaître la bulle d'erreur native du navigateur là où le formulaire s'est arrêté.
  3. Une couche visuelle personnalisée en haut lorsque la conception en a besoin : l'article sur la validité de forme de ce site contient la recette CSS.
  4. Champs Honeypot sur les cas backend et limites de débit de l'hôte ; statique ne veut pas dire non spam, dites-le haut et fort.

Le résumé très gacor : le navigateur valide, la plateforme transporte, et votre étape de build n'expédie rien. Les bibliothèques de formulaires de contact sont le symptôme de l’oubli que l’élément de formulaire n’a jamais quitté.