Kontaktformular für Hugo

Formgong team ·

Fügen Sie das in Hugo ein. Einsendungen gehen an Formgong. Keine Datenbank, kein Resend.

300 Einsendungen pro Monat gratis

So funktionieren Formulare in Hugo

Hugo erzeugt statisches HTML. Beim üblichen Deploy auf GitHub Pages, Netlify oder Cloudflare Pages gibt es keinen serverseitigen Formular-Handler.

Fügen Sie ein Formular-Partial im Layout hinzu, setzen Sie action auf Formgong und bauen Sie wie gewohnt. Wie jede statische Site; siehe auch /for/html und den GitHub-Pages-Artikel.

Einrichtung in Hugo

  1. Erstellen Sie ein Formular in Formgong und kopieren Sie den Access Key.
  2. Partial hinzufügen (z. B. layouts/partials/contact-form.html) mit HTML-Formular, access_key, _lang und botcheck.
  3. Partial auf der Kontaktseite einbinden. Für _redirect optional absolute Danke-URL ({{ site.BaseURL }}…).
  4. Bauen und deployen, Test von der Live-URL, Telegram in Formgong verbinden.
Hugo
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="de">
  <label>Name <input type="text" name="name" autocomplete="name" placeholder="Ihr Name" required></label>
  <label>E-Mail <input type="email" name="email" autocomplete="email" placeholder="name@beispiel.de" required></label>
  <label>Nachricht <textarea name="message" placeholder="Wie können wir Ihnen helfen?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>Lassen Sie dieses Feld leer<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">Senden</button>
</form>

Formgong oder Serverless-Funktion neben Hugo?

Netlify-/Cloudflare-Funktion hinzufügen, wenn beim Submit eigene Serverlogik nötig ist.

Formgong nutzen, wenn Zustellung und Posteingang ohne diese Funktion reichen.

Fragen und Antworten

Braucht Hugo ein Formular-Plugin?

Nein. Hugo liefert HTML; der Browser sendet an Formgong.

Kann ich einen Shortcode nutzen?

Ja. Ein Shortcode mit demselben Formular-Markup funktioniert; den Access Key möglichst per Env beim Build aus dem öffentlichen Repo halten.

Ist das dasselbe wie GitHub Pages?

Dieselbe Idee. Der GitHub-Pages-Artikel hat Host-Notizen; diese Seite ist für Hugo.

Kostenlos starten