Vercel-Newsletter-Formular
Füge deiner Vercel-Seite eine Newsletter-Anmeldung hinzu, ganz ohne Serverless Function. Ein E-Mail-Feld im einfachen Markup, und Abonnenten landen in deinem Posteingang oder in deinem E-Mail-Tool. Kein eigenes Backend.
So baust du es
- Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Access Key.
- Füge das obige Markup auf deiner Seite oder in deinem Layout ein.
- Ersetze YOUR_ACCESS_KEY_HERE durch deinen Access Key und deploye dann.
Vercel-Fallstricke
Vercel deployt deine Seite, und ein Formpaste-Formular ist einfach Markup, das du mit ausrollst - keine Serverless Function und kein eigenes Backend. Das funktioniert genauso in einer Next.js-App, einer Astro-Seite oder purem HTML.
Keine Serverless Function nötig
Du brauchst keine API-Route, keine Serverless Function und keine Edge Function, um Einsendungen zu sammeln. Das Formular sendet direkt an den Formpaste-Endpunkt, also läuft bei der Übermittlung nichts von dir auf dem Server.
Framework spielt keine Rolle
Vercel deployt Next.js, Astro, pures HTML und vieles mehr. Das Formular ist Markup, egal welches du nutzt, also ändert ein Framework-Wechsel nichts daran, wie Einsendungen gesammelt werden.
Datei-Uploads deployen genauso
Ein Formular mit Datei-Eingabefeld sendet Multipart-Formulardaten direkt an Formpaste, also funktionieren Uploads bei einem normalen Deploy ohne eigenen Upload-Endpunkt.
Behalte den versteckten access_key
Lass das generierte, versteckte access_key-Eingabefeld an Ort und Stelle, damit Formpaste weiß, zu welchem Formular die Einsendung gehört.
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.
Formular erstellen
Melde dich an, verifiziere deine E-Mail und erstelle einen Zugangsschlüssel im Dashboard.
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>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">Vercel-Newsletter-Formular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.