Svelte Integration
Add a contact form to a Svelte or SvelteKit site
Last updated
To add a contact form to a Svelte or SvelteKit site without writing a backend, post the form to https://api.staticforms.dev/submit with your form's API key in an apiKey field. Static Forms emails each submission to you. The component below posts with fetch and works in a static build (adapter-static); the form action further down runs on the server instead. Both work on the free plan.
Svelte component
Put the key in VITE_STATIC_FORMS_KEY. Vite inlines it into the client bundle, which is fine: the form API key is meant to be public.
SvelteKit form action
A form action keeps the key on the server and works without JavaScript in the browser. It needs a server adapter, not adapter-static.
The response is JSON: success is true on success, and error holds the reason when it is false. For a CAPTCHA (reCAPTCHA v2 on Free; Turnstile, hCaptcha and ALTCHA from Starter) or file uploads (Starter and up), see the HTML guide; the field names are the same.
FAQ
Does this work on the free plan?
Yes. The snippet only uses Free plan features: 250 submissions every 30 days, 1 form endpoint, email delivery, the built-in spam filter, a honeypot field and reCAPTCHA v2. No credit card is needed.
How do I keep spam out?
Every submission is checked by the built-in spam filter on every plan. The snippet adds a hidden honeypot field (any field whose name contains "honeypot"); bots fill it in and those submissions are dropped. reCAPTCHA v2 is available on Free. Cloudflare Turnstile, hCaptcha, ALTCHA and reCAPTCHA v3 are available from the Starter plan.
Is it safe to put the API key in my HTML?
Yes. The form API key is meant to be public. It cannot read your submissions or sign in to your dashboard. From the Starter plan you can also restrict submissions to your own domains.
Does it work with adapter-static?
Yes. The Svelte component posts from the browser, so a fully static SvelteKit build works. The form action example needs a server adapter because it runs on the server.
