Dynamisches JavaScript-Formular
Baue ein dynamisches, schema-basiertes Formular mit purem JavaScript und ganz ohne Backend. Rendere die Eingabefelder aus einem Fields-Array mit createElement, sodass du Felder durch Bearbeiten der Daten hinzufügst oder umordnest. Es postet einmal an Formpaste. Kopiere den Code und ergänze deinen Zugangsschlüssel.
So baust du es
- Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
- Kopiere den Code unten und passe das Fields-Array an dein Formular an.
- Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel, dann veröffentlichen.
Prompt für deinen KI-Coding-Agenten
Add a Formpaste dynamic form to my page with vanilla JavaScript. Build the inputs from a fields array using document.createElement so adding or reordering a field means editing data, not markup, and add a submit listener that POSTs new URLSearchParams(new FormData(form)) once to https://api.formpaste.com/submit with a hidden access_key. 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.
JavaScript-Fallstricke
Ein Kontaktformular mit purem JavaScript ist einfaches HTML plus ein Submit-Listener. Richte das Formular auf Formpaste aus, füge ein Skript hinzu, das preventDefault aufruft und die FormData mit fetch sendet, und dein Besucher bleibt auf der Seite. Kein Framework, kein Build-Schritt, kein eigenes Backend.
Es ist ein Formular plus ein Listener
Behalte das echte Formular-Markup mit einer action, die auf den Formpaste-Endpunkt zeigt, und füge dann einen Submit-Listener hinzu, der preventDefault aufruft und mit fetch sendet. Es gibt kein Framework und nichts zu installieren, also funktioniert derselbe Codeschnipsel auf einer statischen Seite, in einem CMS-Template oder auf einer handgeschriebenen Seite.
Progressive Enhancement ist gratis
Weil das Markup ein echtes Formular mit einer action ist, sendet es trotzdem, wenn dein Skript nicht lädt oder JavaScript ausgeschaltet ist. Der Listener ist ein Upgrade, das deinen Besucher auf der Seite hält, keine Voraussetzung.
Sende FormData, kein selbstgebautes Objekt
Baue den Body mit new FormData(form), damit jedes Feld mit seinem Namen dabei ist, einschließlich des versteckten access_key. Verpacke sie für ein normales Textformular in URLSearchParams, oder sende die FormData direkt, wenn das Formular ein Datei-Feld enthält.
Kümmere dich selbst um die Antwort
Der Endpunkt liefert JSON zurück (success, message, id). Warte auf den fetch und zeig deine eigene Erfolgs- oder Fehlermeldung, ruf dann form.reset() auf. Oder leg im Dashboard eine Redirect-URL fest und lass das einfache Formular-Posting die Arbeit ganz ohne Skript erledigen.
Worauf es ankommt
Die Felder kommen aus einem Schema, nicht aus dem Markup
Ein dynamisches Formular rendert seine Eingabefelder aus einem Array von Felddefinitionen, sodass du Felder durch das Bearbeiten von Daten hinzufügst oder umordnest, nicht von JSX oder Template-Markup. Dieselbe Komponente verarbeitet jede beliebige Feldmenge.
Eine Einsendung für jede Form
Egal wie viele Felder das Schema hat, das Formular sendet einmalig an Formpaste als einzelne Einsendung. Behalte das versteckte access_key-Feld im Payload und halte die Feldnamen aussagekräftig, damit dein Posteingang lesbar bleibt.
Feldnamen stabil halten
Der Feldname ist das, was in deinem Posteingang und in Exporten erscheint, also benenne jeden Schema-Eintrag klar (name, email, message), auch wenn du Labels oder Reihenfolge änderst. Formpaste speichert die Namen, die du sendest, genau so.
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">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<button type="submit">Send</button>
</form>
<script>
const fields = [
{ name: "name", type: "text", label: "Name" },
{ name: "email", type: "email", label: "Email" },
{ name: "message", type: "textarea", label: "Message" },
];
const form = document.getElementById("form");
const submit = form.querySelector("button");
for (const f of fields) {
const label = document.createElement("label");
label.textContent = f.label + " ";
const input = document.createElement(f.type === "textarea" ? "textarea" : "input");
if (f.type !== "textarea") input.type = f.type;
input.name = f.name;
label.appendChild(input);
form.insertBefore(label, submit);
}
form.addEventListener("submit", async (e) => {
e.preventDefault();
await fetch(form.action, { 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">Dynamisches JavaScript-Formular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.