Kontaktformulare für Framer

Füge deiner Framer-Seite ein Kontaktformular mit unbegrenzten Feldern und ohne planabhängiges Einsendungslimit hinzu. Füge das Formular in ein Embed oder eine Code Component ein - Einsendungen gehen direkt an Formpaste und landen in deinem Posteingang, Spam gefiltert. Sieh es dir live an oder kopiere den Code.

So erstellst du ein Framer-Formular

1
Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
2
Füge deiner Framer-Seite ein Embed-Element (oder eine Code Component) hinzu und füge das obige Markup ein.
3
Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel und veröffentliche.

Prompt für deinen KI-Coding-Agenten

Give me a plain HTML contact form to paste into a Framer Embed element that POSTs to https://api.formpaste.com/submit with a hidden access_key input. No backend, no JavaScript required.

Oder verbinde den Formpaste-MCP-Server mit Claude Code, Codex, Cursor, Claude Desktop, VS Code oder einem beliebigen mcp-remote-Client. Zur Einrichtungsanleitung.

Mehr als das native Framer-Formular

Framers eingebautes Formular reicht für ein paar Felder, aber es begrenzt Einsendungen in den unteren Plänen und gibt dir wenig Kontrolle. Ein Formpaste-Formular, eingefügt in ein Embed-Element (oder eine kleine Code Component), hebt beide Limits auf: so viele Felder wie du willst, und Einsendungen, die in deinem Formpaste-Posteingang landen, unabhängig von deinem Framer-Plan.

Kein Einsendungslimit

Weil das Formular an einen externen Endpunkt postet, zählt Framer die Einsendung nie gegen deinen Plan. Du verwaltest das Volumen stattdessen über deinen Formpaste-Plan, und die kostenlose Stufe deckt bereits 250 im Monat ab.

Passend stylen

Das Markup übernimmt deine Framer-Styles, oder du fügst eigene Klassen hinzu. Wechsle oben im Styling-Umschalter zu CSS oder Tailwind für einen Ausgangspunkt und passe ihn an deine Seite an.

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.

1

Formular erstellen

Melde dich an, verifiziere deine E-Mail und erstelle einen Zugangsschlüssel im Dashboard.

2

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" placeholder="Dein 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">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>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Nachricht
    <textarea name="message" required 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">Senden</button>
</form>

3

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">

Kontaktformulare für Framer FAQ

Formular einfügen. Einsendungen erhalten.

Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.

Kostenlos starten Dokumentation lesen

Das bekommst du mit Formpaste

Kein Server, kein DNS

Richte dein Formular auf Formpaste aus - kein Backend, kein DNS, kein E-Mail-Server zu betreiben.

Spam automatisch gefiltert

Heuristiken plus ein Quarantäne-Ordner, den du kontrollierst. Echte Nachrichten kommen immer durch.

Quarantäne, die du kontrollierst

Verdächtige Einsendungen landen in einem Ordner, den du prüfst - nichts wird stillschweigend verworfen.

Gebaut für KI-Agenten

Ein MCP-Server, den dein Coding-Agent aufruft, um ein Formular zu erstellen und einzurichten.

Copy-Paste-Komponenten

Zugänglicher Copy-Paste-Formularcode für HTML, React, TypeScript, JavaScript und Astro.

Einfaches Dashboard

Verwalte Formulare, Posteingang, Quarantäne und Zustellung an einem Ort.

Weitere Framer-Formulare

Lead-Generierungsformular

Weitere Plattformen