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

Un exemple HTML utilisable avec Formgong : POST sans PHP, clé publique, page de remerciement et vérification de la réception.

Author: Formgong
Published: 2026-10-01
Language: fr
Canonical: https://formgong.com/blog/html-contact-form-without-backend?lang=fr

Définissez method=POST, l'adresse Formgong /submit et un champ caché access_key. Le navigateur sait envoyer ce formulaire sans JavaScript. Le traitement est effectué par Formgong ; vous n'avez pas à exploiter votre propre backend.

## 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](/?lang=fr#top), 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.

```html
<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](/blog/contact-form-not-sending-email?lang=fr) 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](/blog/website-form-to-telegram?lang=fr).

## 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.

## Questions fréquentes

### JavaScript est-il obligatoire ?

Non pour le POST classique : le navigateur envoie les champs et ouvre la page de résultat.

### Faut-il un hébergement PHP ?

Non. Formgong traite les données ; le site peut rester sur un hébergement statique.

### Puis-je ajouter d'autres champs ?

Oui, des champs texte avec un attribut name. Cet exemple n'inclut pas l'envoi de fichiers.

### L'exemple inclut-il Turnstile ?

Il inclut un honeypot. Si Turnstile est activé, ajoutez le widget et le token actuels depuis les instructions de connexion.

## Sources et documentation

- [MDN: sending form data](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data)
- [Documentation Formgong](https://formgong.com/docs/html?lang=fr)

[Obtenir une clé](https://formgong.com/?lang=fr#top)