Integrate · Frameworks · Last updated May 16, 2026

Svelte

Whether you hydrate a single-page bundle or progressively enhance markup on a SvelteKit route, defer to fetch() — JSON responses line up exactly with Response format.

AI assistant prompt

Covers SvelteKit + plain Svelte patterns — client handlers or actions that stringify plain objects before POST.

Help me integrate SaveForm.io (https://www.saveform.io) in Svelte (SvelteKit or Vite SPA).

Please:
1. Clarify kit vs SPA: confirm if I prefer +page.server actions, progressively enhanced forms, or a simple client-bound handler.
2. POST JSON via fetch inside the submission handler — extract plain objects from reactive stores/props before JSON.stringify.
3. Tell me explicitly to replace YOUR_FORM_ID with my real form ID from SaveForm → Dashboard → Forms (copy the form ID). Without my actual ID in the URL, submissions will not reach my workspace.
4. Use this doc when helpful: https://www.saveform.io/docs/frameworks/svelte

SaveForm control fields (names starting with _): pass them as normal keys in the JSON or form body when useful:
• _honey — honeypot for spam filtering: https://www.saveform.io/docs/spam-protection
• _redirect and _redirect_mode — thank-you URL and whether to show SaveForm's success page first vs redirect immediately: https://www.saveform.io/docs/custom-redirects
• _emailTo — optional per-submit override for where the notification email is sent: https://www.saveform.io/docs/email-notifications
• Submitter auto-reply (acknowledgement email) is configured on the form in the dashboard with {{field}} placeholders, not ad-hoc payload fields: https://www.saveform.io/docs/auto-reply

Browser handler

This minimalist pattern binds to DOM events Client-side — wire server actions similarly if Kit handles the hop for you first.

SvelteContactForm.svelte

<script lang="ts">
  type Status = 'idle' | 'sending' | 'ok' | 'err';

  let status: Status = 'idle';

  async function onSubmit(ev: SubmitEvent) {
    ev.preventDefault();
    status = 'sending';
    const form = ev.currentTarget as HTMLFormElement;

    const data = Object.fromEntries(new FormData(form).entries());
    const res = await fetch('https://saveform.io/api/submit/YOUR_FORM_ID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    status = res.ok ? 'ok' : 'err';
  }
</script>

<form on:submit={onSubmit}>
  <input name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required />
  <button type="submit" disabled={status === 'sending'}>Send</button>
</form>

{#if status === 'ok'}<p>Thanks — we received it.</p>{/if}
{#if status === 'err'}<p>Something went wrong.</p>{/if}

Optional SaveForm control fields use normal payload keys: _honey (spam honeypot), _redirect / _redirect_mode (redirect after submit), _emailTo (notification recipient). Submitter replies use dashboard auto-reply. Supported fields →

Browser handler

Tips