Hugo-Kontaktformular (kein Backend nötig)

Das Snippet

{{/* 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>

So funktioniert es

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) - nützlich, wenn Kundenarbeit bedeutet, dass mehrere Hugo-Seiten auf ein Formhook-Konto zeigen.

Hugo-Kontaktformular - FAQ

Funktioniert das mit dem statischen `hugo`-Build und `hugo deploy`?

Ja. Das Formular ist einfaches HTML in der gebauten Ausgabe. Hugo läuft nicht serverseitig, also POSTet das Formular direkt aus dem Browser an Formhook.

Kann ich Hugos i18n-Features mit dem Kontaktformular verwenden?

Ja - das Formular selbst ist Markup, also funktionieren lokalisierte Labels wie jede andere Hugo-Vorlage. Verwenden Sie Hugos i18n-Funktionen für die Platzhaltertexte und Feldbezeichnungen.

Wie vermeide ich, den API-Schlüssel in jeder Vorlage hart zu codieren?

Legen Sie den Schlüssel in die Params Ihrer Seite (config.toml oder hugo.yaml) und referenzieren Sie ihn als {{ .Site.Params.formhookKey }} in der Vorlage. Behandeln Sie ihn als öffentlichen Endpoint-Identifikator - Formhooks Pro-Formular-Rate-Limits und Turnstile-Schalter übernehmen den eigentlichen Schutz.