Kontaktformulare für Svelte
Baue ein funktionierendes Kontaktformular für deine Svelte-App, ganz ohne Backend. Es ist eine Single-File-Komponente mit bind:value-Feldern und einem on:submit|preventDefault-Handler, der an Formpaste postet. Sieh es dir live an, kopiere den Code in deinem bevorzugten Styling, und Einsendungen landen in deinem Posteingang - Spam gefiltert.
So erstellst du ein Svelte-Formular
- 1
Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
- 2
Kopiere die Svelte-Single-File-Komponente oben in deine App und wähle dein Styling.
- 3
Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel und deploye.
Prompt für deinen KI-Coding-Agenten
Add a Formpaste contact form to my Svelte app. Use a single-file component with a <script> block, bind:value fields, and an on:submit|preventDefault handler that POSTs as application/x-www-form-urlencoded (URLSearchParams) to https://api.formpaste.com/submit with a hidden access_key input. 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.
Eine Komponente und ein Fetch
Ein Svelte-Kontaktformular ist eine Single-File-Komponente mit bind:value auf
den Feldern und einem on:submit|preventDefault-Handler, der an Formpaste
postet. Es gibt keine API-Route, keinen Mailer und keine Datenbank - du
kopierst die Komponente, trägst deinen Zugangsschlüssel ein, und Einsendungen
landen in deinem Posteingang. Das funktioniert genauso in einer reinen
Svelte-App wie innerhalb von SvelteKit.
Die Antwort verarbeiten
Der Endpunkt liefert JSON (success, message, id) zurück. Warte auf den
Fetch und setze eine reaktive status-Variable, um deine eigene Erfolgs- oder
Fehlermeldung anzuzeigen, oder lege eine Weiterleitungs-URL in deinen
Dashboard-Einstellungen fest und lass Formpaste den Besucher zu einer
Dankeseite schicken - ganz ohne zusätzlichen Client-Code.
Svelte 4 oder Svelte 5
Die Beispiele nutzen einen <script>-Block mit einer einfachen status-Variable,
was in jeder Svelte-Version funktioniert. Bei Svelte 5 kannst du zu Runen wie
$state greifen, aber Formpaste kümmert sich nur um den POST, verwende also
den Stil, den dein Projekt bereits verfolgt.
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">
let status: "idle" | "sending" | "ok" | "error" = "idle";
async function onSubmit(e: SubmitEvent) {
status = "sending";
const form = new FormData(e.target as HTMLFormElement);
const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form as any) });
status = res.ok ? "ok" : "error";
}
</script>
{#if status === "ok"}
<p>Thanks - your message was sent.</p>
{:else}
<form on:submit|preventDefault={onSubmit} 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" disabled={status === "sending"}>Senden</button>
{#if status === "error"}<p>Something went wrong. Please try again.</p>{/if}
</form>
{/if}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 Svelte 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.