Vercel-Lead-Formular
Füge deiner Vercel-Seite ein Lead-Formular hinzu, ganz ohne Serverless Function. Qualifiziere mit einem Firmenfeld im einfachen Markup, und Leads landen in deinem Posteingang oder in deinem CRM. 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 Landingpage 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
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">Vercel-Lead-Formular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.