Mehrstufiges Svelte-Formular
Baue ein mehrstufiges Formular in Svelte ganz ohne Backend. Sammle die Felder über mehrere Schritte in einem Datenobjekt und sende erst am Ende einmal an Formpaste. Kopiere die Wizard-Komponente und ergänze deinen Zugangsschlüssel.
So baust du es
- Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
- Kopiere die untenstehende mehrstufige Komponente in deine App.
- Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel, dann deploye.
Prompt für deinen KI-Coding-Agenten
Add a Formpaste multi-step form to my Svelte app. Use a single-file component with a <script> block that collects name, email and message across several steps in a data object with Next and Back buttons, then POSTs once at the end as application/x-www-form-urlencoded (URLSearchParams) to https://api.formpaste.com/submit with a hidden access_key. Do not post on every step and do not add a backend.Oder verbinde den Formpaste-MCP-Server mit Claude Code, Codex, Cursor, Claude Desktop, VS Code oder einem beliebigen mcp-remote-Client. Zur Einrichtungsanleitung.
Svelte-Fallstricke
Ein Svelte-Kontaktformular ist eine Single-File-Komponente mit bind:value auf den Feldern und einem on:submit|preventDefault-Handler, der an Formpaste postet. Du brauchst kein eigenes Backend und keine eigene API. Setze den fetch in die Komponente, und du bist fertig.
Es ist eine Single-File-Komponente
Das Formular lebt in einer .svelte-Komponente mit einem <script>-Block. Binde die Felder mit bind:value oder lies beim Absenden ein FormData vom Formular-Element aus, und poste dann an den Formpaste-Endpunkt. Für ein einfaches Formular brauchst du weder einen Store noch eine Library.
Keine eigene API
Du proxyst nichts über deinen eigenen Server. Die Komponente postet direkt an den Formpaste-Endpunkt, wodurch du dir einen Mailer und einen Speicher für Einsendungen sparst, den du sonst selbst bauen müsstest.
Antwort mit einer reaktiven status-Variable verarbeiten
Der Endpunkt liefert JSON zurück (success, message, id). Warte den fetch ab und setze eine reaktive status-Variable, um deinen eigenen Erfolgs- oder Fehlerzustand anzuzeigen, oder hinterlege eine Redirect-URL im Dashboard und überspringe die clientseitige Verarbeitung.
Svelte 4 oder Svelte 5, beides funktioniert
Die Beispiele verwenden einen <script>-Block mit einer einfachen status-Variable, was in jeder Svelte-Version funktioniert. Ab Svelte 5 kannst du stattdessen Runes wie $state nutzen, aber Formpaste braucht in jedem Fall nur denselben fetch und dasselbe POST.
Worauf es ankommt
Ein Formular, mehrere Bildschirme
Ein mehrstufiges Formular ist eine einzige Einsendung, die in der UI auf mehrere Schritte verteilt ist. Sammle alle Felder im Client-State und poste am Ende einmal.
Eine eigene Route pro Schritt ist optional
Du kannst jedem Schritt eine eigene URL geben, um den Zurück-Button zu unterstützen, oder alles auf einer Seite mit lokalem State belassen. Beide Varianten posten dieselbe finale Payload.
Poste die gesamte Payload einmal
Poste nicht bei jedem Schritt. Sammle die Felder, während der Nutzer weitergeht, und sende eine Anfrage, wenn er fertig ist.
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.
<script lang="ts">
const ENDPOINT = "https://api.formpaste.com/submit";
let step = 0;
let data = { name: "", email: "", message: "" };
async function submit() {
const body = new URLSearchParams({ access_key: "YOUR_ACCESS_KEY_HERE", ...data });
await fetch(ENDPOINT, { method: "POST", body });
}
</script>
<form on:submit|preventDefault={submit}>
{#if step === 0}
<input bind:value={data.name} placeholder="Name" required />
{:else if step === 1}
<input type="email" bind:value={data.email} placeholder="Email" required />
{:else}
<textarea bind:value={data.message} placeholder="Message" />
{/if}
{#if step > 0}<button type="button" on:click={() => step--}>Back</button>{/if}
{#if step < 2}<button type="button" on:click={() => step++}>Next</button>{:else}<button type="submit">Submit</button>{/if}
</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">Mehrstufiges Svelte-Formular FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.