Un formulaire de contact sur un site HTML, sans serveur à maintenir

Un service prend le relais du site statique

HTML affiche les champs mais ne conserve pas les messages et n'expédie pas les emails à lui seul. Formgong assure cette réception. Le scénario convient à un portfolio ou une page de services avec des champs texte.

Si vous avez déjà un backend et des règles métier particulières, vous pouvez y traiter le formulaire. Ici, on évite d'en créer un uniquement pour les demandes de contact.

Préparez le formulaire dans le tableau de bord

Créez votre formulaire sur Formgong, confirmez l'email et récupérez sa clé dans la connexion du site. Remplacez fk_your_access_key. Cette clé peut rester dans HTML ; avant confirmation de l'email, les notifications peuvent être retenues.

Insérez cet exemple dans la page

Ajoutez vos classes CSS pour retrouver le style du site. Les libellés visibles peuvent changer, tandis que les noms des champs doivent rester cohérents. Cette version transmet du texte, pas des fichiers.

<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Send</button>
</form>

Les attributs à ne pas oublier

action indique le destinataire et method="POST" la méthode. Chaque valeur a besoin d'un name : un id seul ne suffit pas. Pour un téléphone, ajoutez par exemple name="phone".

Gardez botcheck hors écran et vide. Il sert de piège pour les bots, pas de champ obligatoire pour les visiteurs.

Préparez la suite du parcours

Par défaut, le navigateur ouvre la page de résultat Formgong. Pour votre propre page de remerciement, renseignez son URL HTTPS complète dans les réglages. _redirect est une autre option ; si les adresses du code sont ignorées, le réglage du tableau de bord prime.

Pour rester sur la même page, utilisez fetch avec des états d'interface. Le guide de diagnostic propose un exemple.

Faites un test sur le domaine publié

Envoyez un message identifiable, puis recherchez-le dans le bon formulaire et dans vos emails, indésirables compris. Sur téléphone, vérifiez les champs, le bouton et la page de remerciement. Vous pouvez ajouter le canal décrit dans le guide Telegram.

Adaptez le code aux protections activées

Turnstile exige un widget et cf-turnstile-response ; le honeypot de cet exemple ne le remplace pas. Reprenez le code actuel du tableau de bord. Si vous définissez les domaines autorisés, incluez celui du site publié : l'aperçu peut en utiliser un autre.