HTML-Formular einbinden

Kontaktformular für Hugo

Hugo erzeugt statische Seiten. Es gibt also keinen Server, der ein abgeschicktes Formular annehmen könnte. Diesen Teil übernimmt FormPost – Ihr Formular schickt die Eingaben an uns, wir leiten sie per E-Mail an Sie weiter.

Vorbereitung: Formular bei FormPost anlegen

Melden Sie sich bei FormPost an, legen Sie ein Formular an und tragen Sie die Domain ein, unter der Ihre Seite erreichbar ist. Danach zeigen wir Ihnen die Adresse Ihres Formulars. Sie ersetzt https://www.formpost.eu/f/abc123 im Code unten – sonst ist nichts anzupassen.

1. Den Shortcode anlegen

Das Formular kommt in einen Shortcode. So können Sie es aus jeder Markdown-Seite heraus einbinden, ohne HTML in den Inhalt zu schreiben.

layouts/shortcodes/contact-form.html
<form action="https://www.formpost.eu/f/abc123" method="POST">
  <label for="email">E-Mail</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Nachricht</label>
  <textarea id="message" name="message" required></textarea>

  <input type="text" name="_gotcha" style="display:none;" tabindex="-1" autocomplete="off">

  <button type="submit">Absenden</button>
</form>

2. Den Shortcode in eine Seite setzen

Schreiben Sie den Shortcode an die Stelle Ihrer Kontaktseite, an der das Formular erscheinen soll. Brauchen Sie das Formular lieber in einem Template, legen Sie dieselbe Datei unter layouts/partials/ ab und binden sie mit {{ partial "contact-form.html" . }} ein.

content/contact.md
{{< contact-form >}}

Gut zu wissen

  • Hugo gibt HTML, das direkt im Markdown steht, standardmäßig nicht aus. Mit dem Shortcode umgehen Sie das, ohne die Einstellung markup.goldmark.renderer.unsafe ändern zu müssen.
  • Übermittlungen nehmen wir nur von der eingetragenen Domain an. Vom lokalen Entwicklungsserver (hugo server auf localhost) aus werden sie abgelehnt; zum Ausprobieren gibt es das Testformular im Kundenbereich.
  • Das Formular bringt kein eigenes CSS mit und übernimmt die Gestaltung Ihres Themes. Klassen und weitere Felder können Sie im Shortcode frei ergänzen.

Was FormPost heute nicht kann

  • Formulare werden klassisch abgeschickt, also mit einem Seitenwechsel. Ein Versand per JavaScript im Hintergrund wird derzeit nicht unterstützt.
  • Dateianhänge nehmen wir nicht entgegen.
  • FormPost holt keine Einwilligung Ihrer Besucher ein. Der Hinweis in Ihrer Datenschutzerklärung bleibt Ihre Aufgabe – den Textbaustein dafür finden Sie fertig formuliert bei Ihrem Formular.

Weitere Anleitungen und Vergleiche

Formular anlegen und ausprobieren

Der Free-Tarif reicht für ein Formular mit zehn Benachrichtigungen am Tag und kostet dauerhaft nichts.