Anleitung

Eleventy-Kontaktformular (kein Backend nötig)

Eleventy rendert zur Build-Zeit zu statischem HTML, also ist ein Eleventy-Kontaktformular einfach ein normales HTML-Formular in einer Nunjucks- (oder Liquid- oder reinen HTML-)Vorlage. Das form-action zeigt auf Formhook, und es gibt nichts weiter zu tun.

Das Snippet

contact.Eleventy

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

So funktioniert es

Das Snippet funktioniert in jeder Eleventy-Templatesprache - Nunjucks (gezeigt), Liquid, Handlebars, reines HTML, JSX. Der {{ '/thanks' | url }}-Filter wendet Eleventys URL-Transformation an, damit _redirect korrekt mit einem pathPrefix funktioniert. Fügen Sie das Formular in eine Seitenvorlage oder einen Include ein - es spielt keine Rolle, welche.

Was als Nächstes passiert

Einsendung landet innerhalb einer Sekunde in Ihrem Formhook-Dashboard.
Push-Benachrichtigung wird auf allen aktivierten Geräten ausgelöst.
Antworten Sie direkt aus dem Dashboard (Pro und höher) - hält Ihren echten Posteingang aus dem HTML des Formulars heraus.

Veröffentlichen Sie heute Ihr Eleventy-Kontaktformular.

Kostenlos registrieren, Formular erstellen, API-Schlüssel einfügen. Fünf Minuten.

Kostenlos starten

Kostenlose Stufe: 5 Formulare · 250 Einsendungen/Monat · Keine Kreditkarte.

Eleventy-Kontaktformular - FAQ

Funktioniert das mit der Standard-Eleventy-Build-Pipeline?

Ja. Das Formular ist einfaches Markup, das Eleventys Template-Transformationen überlebt. Keine Datendateien, Plugins oder Shortcodes erforderlich.

Kann ich das aus einer JSX- oder Liquid-Vorlage verwenden?

Ja. Das HTML ändert sich nicht zwischen Templatesprachen - nur die Art, wie Sie dynamische Teile wie die Redirect-URL einbetten, ändert sich je nach Template-Syntax.

Wie behandle ich Spam, ohne eine Build-Zeit-Integration hinzuzufügen?

Spam-Schutz liegt auf Formhooks Seite: Das Honeypot-Feld verwirft Bots stillschweigend, und Cloudflare Turnstile ist ein Schalter pro Formular. Sie müssen nichts in den Eleventy-Build einbauen.

Anleitungen für andere Frameworks

Migrating from Formspree? See how Formhook compares.