Send Svelte form submissions to an endpoint
Bind the inputs, POST the bound object on submit. The SvelteKit version can route through +page.server.js to keep the Public Key server-side.
- Free plan
- No plugin to install
- Set up in minutes
Svelte in three steps.
- 1
Create a form and copy its Public Key
Sign up and copy the Public Key. Client-side posts put it in an env var; the SvelteKit action version keeps it server-only.
- 2
Bind and POST
Give each input a bind:value, gather them into an object, and fetch the form-specific endpoint from on:submit.
- 3
Or use a SvelteKit form action
A default action in +page.server.js receives the FormData and relays it, so the form works even before hydration.
Copy this into Svelte.
Swap in your form’s key and submissions start landing in your inbox.
<script>
let email = "";
let message = "";
let sent = false;
async function onSubmit(e) {
e.preventDefault();
const res = await fetch("https://api.surveyowl.co/v1/submit/" + encodeURIComponent(import.meta.env.VITE_FORM_PUBLIC_KEY), {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: JSON.stringify({ email, message }),
});
if (res.ok) sent = true;
}
</script>
<form on:submit={onSubmit}>
<input bind:value={email} type="email" required />
<textarea bind:value={message}></textarea>
<button type="submit">Send</button>
</form>What people build with it.
Contact forms in Svelte or SvelteKit apps.
Progressively enhanced forms using SvelteKit form actions.
Svelte components embedded in existing multi-page sites.
Svelte forms, answered.
1. Create a form and copy its Public Key: Sign up and copy the Public Key. Client-side posts put it in an env var; the SvelteKit action version keeps it server-only. 2. Bind and POST: Give each input a bind:value, gather them into an object, and fetch the form-specific endpoint from on:submit. 3. Or use a SvelteKit form action: A default action in +page.server.js receives the FormData and relays it, so the form works even before hydration.
Svelte forms are the closest of any framework to plain HTML: bind:value on named inputs and an on:submit handler is the whole integration. In SvelteKit, a form action in +page.server.js does the sending with the Public Key held server-side.
In SvelteKit, $env/static/private holds the Public Key server-side for the form-action route. The keys you POST become the question labels in the inbox, same as every other platform.