Framer-Newsletter-Formular
Füge deiner Framer-Seite eine Newsletter-Anmeldung hinzu, ohne Framers Einsendungslimit pro Plan zu erreichen. Ein E-Mail-Feld in einem Embed genügt, und Abonnenten landen in deinem Posteingang oder deinem E-Mail-Tool. Kein Backend.
So baust du es
- Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
- Füge ein Embed-Element mit dem obigen Markup zu deiner Framer-Seite hinzu.
- Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel und veröffentliche.
Framer-Fallstricke
Framer hat ein natives Formular, aber die niedrigeren Plans begrenzen Felder und Einsendungen. Ein Formpaste-Formular baust du per Code Component oder Embed ein - damit bekommst du unbegrenzte Felder, kein Einsendungslimit pro Plan und deinen eigenen Posteingang, ohne Framer zu verlassen.
Nutze ein Embed oder eine Code Component
Füge ein Embed-Element (oder eine kleine Code Component) hinzu und füge das Formular-Markup ein, das an Formpaste sendet. Damit hast du volle Kontrolle über Felder und Layout - mehr, als das native Framer-Formular erlaubt.
Kein Einsendungslimit
Framers natives Formular zählt Einsendungen gegen deinen Plan. Ein POST an Formpaste umgeht das komplett - Einsendungen landen in deinem Formpaste-Posteingang, auf deinem Formpaste-Plan, nicht auf dem von Framer.
Style es passend zu deiner Seite
Das Markup gehört dir, also übernimmt es deine Framer-Styles oder nutzt eigene Klassen. Stell den Styling-Umschalter auf CSS oder Tailwind für einen Startpunkt.
Der versteckte access_key stellt die Verbindung her
Behalte das versteckte access_key-Eingabefeld genau so, wie es generiert wurde. Es sagt Formpaste, 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">Framer-Newsletter-Formular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.