Framer-Lead-Generierungsformular
Füge deiner Framer-Landingpage ein Lead-Generierungsformular mit unbegrenzten Feldern und ohne Einsendungslimit hinzu. Platziere es in einem Embed, qualifiziere mit einem Firmenfeld, und Leads landen in deinem Posteingang oder deinem CRM. 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-Landingpage 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
Jedes Feld ist ein Kompromiss
Mehr Felder qualifizieren den Lead, kosten aber Volumen. Frag nach Name, geschäftlicher E-Mail und Unternehmen, und lass den Rest optional. Details kannst du immer noch nachträglich erfragen.
Leite Leads an dein CRM weiter
Leite Einsendungen per Webhook an dein CRM oder deinen Vertriebs-Posteingang weiter, damit ein neuer Lead dort landet, wo dein Team schon arbeitet. Reply-to ist auf den Lead gesetzt, damit du direkt antworten kannst.
Qualifiziere ohne Reibung
Ein Unternehmensfeld und eine kurze Notiz zu Wonach-suchst-du sagen dir genug, um zu priorisieren, ohne ein langes Formular, das Leute abschreckt.
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">Name
<input type="text" name="name" 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>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Geschäftliche E-Mail
<input type="email" name="email" placeholder="du@firma.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>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Unternehmen
<input type="text" name="company" 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>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Telefon
<input type="tel" name="phone" 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>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Wonach suchst du?
<textarea name="message" class="min-h-28 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"></textarea>
</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">Kontakt aufnehmen</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-Lead-Generierungsformular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.