Kontaktformulare für JavaScript
Füge jeder Seite ein Kontaktformular hinzu, mit reinem JavaScript und ganz ohne Backend. Es ist ein echtes HTML-Formular plus ein Submit-Listener, der mit fetch postet, sodass der Besucher auf der Seite bleibt. Kein Framework und kein Build-Schritt. Live testen, den Code in deinem bevorzugten Styling kopieren, und Einsendungen landen in deinem Posteingang - spam-gefiltert.
So erstellst du ein JavaScript-Formular
- 1
Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
- 2
Kopiere das Formular und das Skript oben in deine Seite und wähle dein Styling.
- 3
Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel und veröffentliche.
Prompt für deinen KI-Coding-Agenten
Add a Formpaste contact form to my page with vanilla JavaScript. Use a real HTML form with an action of https://api.formpaste.com/submit and a hidden access_key input, plus a submit listener that calls preventDefault and POSTs new URLSearchParams(new FormData(form)) with fetch, then resets the form. No framework and no backend.Oder verbinde den Formpaste-MCP-Server mit Claude Code, Codex, Cursor, Claude Desktop, VS Code oder einem beliebigen mcp-remote-Client. Zur Einrichtungsanleitung.
Ein Formular und ein Fetch
Der Codeschnipsel oben ist ein echtes HTML-Formular plus ein kurzes Skript. Das
Formular hat eine action, die auf Formpaste zeigt, und das Skript fügt einen
submit-Listener hinzu, der preventDefault() aufruft, die Felder mit
fetch postet und das Formular zurücksetzt. Es gibt kein Framework, keinen
Build-Schritt und kein Backend - du fügst es in jede Seite ein und es
funktioniert.
Die Antwort verarbeiten
Der Endpunkt liefert JSON (success, message, id) zurück. Warte auf den
fetch und zeig deine eigene Erfolgs- oder Fehlermeldung auf der Seite, denn
genau dafür fügst du das Skript hinzu. Wenn du lieber kein JavaScript
schreiben willst, lege eine Weiterleitungs-URL in deinen Dashboard-Einstellungen
fest und lass den einfachen Formular-Post den Besucher zu einer Dankeseite
schicken.
Ein Upgrade, keine Voraussetzung
Weil das Markup ein echtes Formular mit einer action ist, sendet es sich
trotzdem ab, wenn das Skript nicht lädt oder JavaScript ausgeschaltet ist. Das
macht das Skript zu einem echten Upgrade statt zu einer Voraussetzung, und
genau deshalb funktioniert das Formular auf jeder Seite zuverlässig weiter.
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 id="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>
<script>
const form = document.getElementById("form");
form.addEventListener("submit", async (e) => {
e.preventDefault();
await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(new FormData(form)) });
form.reset();
});
</script>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 JavaScript FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.
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.