Vercel-Formular für Demo-Anfragen
Füge deiner Vercel-Marketingseite ein Formular für Demo-Anfragen hinzu, ganz ohne Serverless Function. Erfasse im einfachen Markup die Angaben, die dein Vertriebsgespräch braucht, und Anfragen landen in deinem Posteingang. 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 Demo- oder Preisseite 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
Qualifizieren ohne Reibung
Frage nach Unternehmen und geschäftlicher E-Mail, damit Sales priorisieren kann, aber halte das Formular kurz. Lange Formulare verlieren qualifizierte Leads.
Nach Feld weiterleiten
Sende Demo-Anfragen an Sales und leite sie zusätzlich per Webhook an Slack weiter, damit das Team sie sofort sieht.
Bestätige die nächsten Schritte
Sag dem Besucher bei Erfolg, was als Nächstes passiert und wann er mit einer Antwort rechnen kann.
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" 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">Teamgröße
<input type="text" name="team_size" 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">Was möchtest du sehen?
<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">Demo anfragen</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-Formular für Demo-Anfragen FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.