Contact form for Svelte websites

Paste the .svelte snippet above into any component file (e.g. src/lib/ContactForm.svelte), import it where you need it, and replace YOUR_ACCESS_KEY. That's it.

Yes — both. The component is client-only because it uses fetch, but it hydrates inside an SSR-rendered page without issue. For server-side submission with progressive enhancement, see the dedicated /forms/sveltekit page.

Use a status variable with four states: idle, loading, ok, err. Show inline messages with {#if} blocks. The fetch returns { success, message? } — render data.message for the user when success is false.

Yes — that's the SvelteKit-specific pattern (server-side, progressive enhancement, no client JS required). It's documented on the /forms/sveltekit page.

Two options. Stay on-page with a Svelte-rendered success message (default in our snippet), or configure a thank-you URL in Dashboard → Form settings → Redirect and use a native form submit.

Yes. The hero snippet uses Svelte 4 syntax (works in 5 too with a deprecation warning); the alternative-pattern snippet uses Svelte 5 runes. Pick whichever matches your project.

Svelte 5 introduces $state(...) runes; Svelte 4 uses plain let status = 'idle'. They're not interchangeable in the same component. Check package.json for "svelte": "^5" and use runes accordingly. Mixing them throws a confusing 'rune used outside .svelte.js' error.

If you copy a Svelte 4 snippet into a Svelte 5 project, the on:submit|preventDefault modifier syntax is gone. Use onsubmit={(e) => { e.preventDefault(); … }} or migrate to a SvelteKit form action that handles preventDefault for you.

FormData reads from name="…" attributes, not Svelte's bind:value. If you bind a value but skip the name attribute, the field is silently dropped from the POST body. Always set both.

$env/static/private is a SvelteKit feature, not a Vite-Svelte one. In a vanilla Vite + Svelte project, use import.meta.env.VITE_SPLITFORMS_KEY (must have the VITE_ prefix or it's undefined client-side).

During development, saving a .svelte file may re-mount the component mid-submission. The fetch keeps running but the UI loses its 'loading' state. Not a real bug — just don't panic when you see it in dev. Production behaves correctly.

If you write $: if (status === 'ok') resetForm(); and status = 'ok' inside an async fetch handler, the block runs synchronously after each top-level update — but resetForm() may execute before the DOM has flushed the disabled state on the submit button, causing a visible flicker where the button briefly re-enables and then the form clears. Either move the reset inside the handler after await tick(), or use Svelte 5's $effect rune which schedules properly relative to renders. Svelte 4's $: is synchronous and easy to misuse for side effects.

Plain Svelte (without SvelteKit) is a compiler — there's no runtime route handler, no server, no built-in form delivery. To ship a working form natively you'd add a separate Node/Bun/Express layer, write the SMTP wiring, and operate it. SvelteKit ships form actions and use:enhance for progressive enhancement, but those just give you ergonomic ways to call your own backend; the actual email-delivery, spam-filtering, and submission-storage are still on you. Svelte 5 runes change reactivity syntax, not the operational model. Splitforms removes the entire 'add a backend' step: the runtime is one URL, hosted by us.

Vite + Svelte (non-Kit) builds a static bundle for any host. SvelteKit deploys via adapters: @sveltejs/adapter-vercel, -netlify, -cloudflare, -node, -static. The form posts client-side regardless of adapter, so the form itself works identically on each. Use VITE_SPLITFORMS_KEY for plain Vite-Svelte projects; SvelteKit uses $env/static/public from PUBLIC_SPLITFORMS_KEY. Svelte islands embedded in Astro hydrate via client:visible — the form's fetch only runs after the user scrolls to it, saving JS execution on initial load. Lock the access key to your domain.