Hugo-Newsletter-Formular

Füge deiner Hugo-Site eine Newsletter-Anmeldung hinzu, ganz ohne Backend. Ein E-Mail-Feld, pack das Markup in einen Shortcode oder ein Partial, und Abonnenten landen in deinem Posteingang oder deinem E-Mail-Tool. Kein Server nötig.

So baust du es

Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
Füge das HTML oben zu einem Hugo-Shortcode oder -Partial hinzu.
Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel, dann neu bauen und deployen.

Prompt für deinen KI-Coding-Agenten

Give me a plain HTML newsletter signup form with a single email field for a Hugo site that POSTs to https://api.formpaste.com/submit with a hidden access_key input. I will place it in a shortcode. No server, no JavaScript.

Oder verbinde den Formpaste-MCP-Server mit Claude Code, Codex, Cursor, Claude Desktop, VS Code oder einem beliebigen mcp-remote-Client. Zur Einrichtungsanleitung.

Hugo-Fallstricke

Hugo erzeugt statisches HTML, also ist ein Formpaste-Formular nur Markup, das du in ein Template oder einen Shortcode einfügst. Eine Hugo-Site hat keinen Server, und du brauchst auch keinen. Das Formular postet direkt an Formpaste.

Das Formular in ein Partial oder einen Shortcode packen

Füge das Formular-Markup zu einem Layout-Partial (layouts/partials) hinzu, um es wiederzuverwenden, oder verpacke es in einen Shortcode, damit du es mit einem einzigen Tag in jede Content-Datei einfügen kannst.

Rohes HTML in Markdown braucht einen Shortcode

Hugos Goldmark-Renderer entfernt inline-HTML in Content-Dateien standardmäßig. Nutze einen Shortcode für das Formular, oder aktiviere unsafe-Rendering in hugo.toml, damit das Markup nicht verschluckt wird.

Kein Server heißt keine Konfiguration nötig

Weil das Formular an einen externen Endpunkt postet, ändert sich nichts an deinem Hugo-Build oder deinem Host. Es funktioniert gleich auf Netlify, GitHub Pages oder überall dort, wo du die statische Ausgabe deployst.

Der versteckte access_key bleibt im Markup

Behalte das versteckte access_key-Feld genau so, wie es generiert wurde. Es identifiziert dein Formular gegenüber Formpaste.

Worauf es ankommt

Ein Feld konvertiert am besten

Ein Newsletter-Formular sollte nur nach der E-Mail fragen. Jedes zusätzliche Feld senkt die Anmeldungen.

Bestätige, bevor du feierst

Zeig bei Erfolg eine Abonniert-Meldung. Falls du Double-Opt-in brauchst, versende die Bestätigung über dein E-Mail-Tool, nicht über das Formular.

Leite an dein E-Mail-Tool weiter

Leite Einsendungen mit einem Webhook an dein ESP weiter, damit neue Abonnenten dort landen, wo du deine Kampagnen versendest.

So funktioniert es

Drei einfache Schritte, bis Formular-Einsendungen in deinem E-Mail-Posteingang landen.
Erstelle dein Formular, setze die action-URL auf den Formpaste-Endpunkt und trage deinen Zugangsschlüssel ein.

1

Formular erstellen

Melde dich an, verifiziere deine E-Mail und erstelle einen Zugangsschlüssel im Dashboard.

2

Code kopieren

Füge das Snippet oben in dein Projekt ein. Wähle CSS oder Tailwind passend zu deiner Website.

<form action="https://api.formpaste.com/submit" method="POST" class="mx-auto flex w-full max-w-md flex-col gap-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">E-Mail
    <input type="email" name="email" placeholder="du@beispiel.de" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
  </label>
  <button type="submit" class="w-full rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200">Abonnieren</button>
</form>

3

Zugangsschlüssel hinzufügen

Ersetze den Platzhalter durch deinen Zugangsschlüssel, um Einsendungen zu empfangen.

<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

Hugo-Newsletter-Formular FAQ

Formular einfügen. Einsendungen erhalten.

Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.

Kostenlos starten Dokumentation lesen

Andere Hugo-Formulare