Guide
Formulaire de contact Eleventy (sans backend)
Eleventy rend en HTML statique au moment du build, donc un formulaire de contact Eleventy est juste un formulaire HTML brut dans un template Nunjucks (ou Liquid, ou HTML brut). Le form action pointe vers Formhook, et il n'y a rien d'autre à faire.
Le snippet
{# src/contact.njk - Nunjucks template, plain HTML form #}
<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="{{ site.url }}{{ '/thanks' | url }}" />
<button type="submit">Send</button>
</form>Comment ça marche
Le snippet fonctionne dans n'importe quel langage de template Eleventy - Nunjucks (montré), Liquid, Handlebars, HTML brut, JSX. Le filtre {{ '/thanks' | url }} applique la transformation d'URL d'Eleventy pour que _redirect fonctionne correctement avec un pathPrefix. Déposez le formulaire dans un template de page ou un include - peu importe lequel.
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) - garde votre vraie boîte de réception hors du HTML du formulaire.
Lancez votre formulaire de contact Eleventy aujourd'hui.
Inscrivez-vous gratuitement, créez un formulaire, collez la clé API. Cinq minutes.
Commencer gratuitementNiveau gratuit : 5 formulaires · 250 soumissions/mois · Sans carte bancaire.
Formulaire de contact Eleventy - FAQ
Est-ce que cela fonctionne avec le pipeline de build Eleventy par défaut ?
Puis-je utiliser ceci depuis un template JSX ou Liquid ?
Comment gérer le spam sans ajouter une intégration au moment du build ?
Guides pour les autres frameworks
Migrating from Formspree? See how Formhook compares.