Guide

Formulaire de contact Hugo (sans backend)

Hugo est un générateur de site statique sans runtime, donc un formulaire de contact Hugo est juste un formulaire HTML brut intégré dans un template Hugo. Déposez le snippet dans un layout ou un partial, échangez votre clé API Formhook, et c'est fait.

Le snippet

contact.Hugo

{{/* layouts/contact.html - plain HTML inside Hugo's template syntax */}}
<form action="https://formhook.app/f/YOUR_API_KEY" method="POST">
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden />
  <input type="hidden" name="_redirect" value="{{ "/thanks" | absURL }}" />
  <button type="submit">Send</button>
</form>

Comment ça marche

Le snippet fonctionne dans n'importe quel template Hugo - un layout, un partial ou un template single-page. Hugo laisse passer le HTML brut au moment du build, donc l'attribut action pointe vers formhook.app/f/YOUR_API_KEY dans le HTML publié. Le bout {{ "/merci" | absURL }} est le templating de Hugo : il s'étend au moment du build vers une URL absolue dans votre site, ce dont Formhook a besoin pour la validation _redirect.

Ce qui se passe ensuite

La soumission arrive dans votre tableau de bord Formhook en moins d'une seconde.
Une notification push se déclenche sur chaque appareil où vous l'avez activée.
Répondez directement depuis le tableau de bord (Pro et au-dessus) - utile quand la mission client signifie plusieurs sites Hugo pointant vers un seul compte Formhook.

Lancez votre formulaire de contact Hugo aujourd'hui.

Inscrivez-vous gratuitement, créez un formulaire, collez la clé API. Cinq minutes.

Commencer gratuitement

Niveau gratuit : 5 formulaires · 250 soumissions/mois · Sans carte bancaire.

Formulaire de contact Hugo - FAQ

Est-ce que cela fonctionne avec le build `hugo` statique et `hugo deploy` ?

Oui. Le formulaire est du HTML brut dans la sortie compilée. Hugo ne tourne pas côté serveur, donc le formulaire POSTe directement vers Formhook depuis le navigateur.

Puis-je utiliser les fonctionnalités i18n de Hugo avec le formulaire de contact ?

Oui - le formulaire lui-même est du markup, donc les libellés localisés fonctionnent comme dans n'importe quel autre template Hugo. Utilisez les fonctions i18n de Hugo sur les placeholders et les libellés de champs.

Comment éviter de coder en dur la clé API dans chaque template ?

Mettez la clé dans les params de votre site (config.toml ou hugo.yaml) et référencez-la comme {{ .Site.Params.formhookKey }} dans le template. Traitez-la comme un identifiant d'endpoint public - les rate limits par formulaire de Formhook et le commutateur Turnstile assurent la vraie protection.

Guides pour les autres frameworks

Migrating from Formspree? See how Formhook compares.