How do I show a thank-you state?

Flip a reactive `status` variable based on the JSON FormLoom returns.

Svelte contact form

Verified against Svelte 5.x · June 2026

If you're using Svelte without SvelteKit (e.g. embedded in another app), you still get a clean contact form: an `on:submit` handler, a `fetch`, and a reactive status. FormLoom handles storage, spam, and email.

Customize in the generator Full Svelte guide

The code

Bind `on:submit` with a handler that serializes the form and POSTs to FormLoom. Use a reactive `status` variable for the UI.

SvelteKit page

src/routes/contact/+page.svelte

<!-- src/routes/contact/+page.svelte -->
<script>
  let status = "idle";
  async function submit(e) {
    e.preventDefault();
    const res = await fetch("https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify(Object.fromEntries(new FormData(e.target))),
    });
    status = (await res.json()).success ? "ok" : "error";
  }
</script>

{#if status === "ok"}
  <p>Thanks — we got your message.</p>
{:else}
  <form on:submit={submit}>
    <label>
      Name
      <input type="text" name="name" required />
    </label>
    <label>
      Email
      <input type="email" name="email" required />
    </label>
    <label>
      Message
      <textarea name="message" required placeholder="How can we help?"></textarea>
    </label>
    <!-- honeypot: bots fill this, humans don't see it -->
    <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
    <button type="submit">Send</button>
  </form>
{/if}

Plain HTML (no JavaScript)

contact.html

<form action="https://formloom.vercel.app/api/submit/YOUR_ACCESS_KEY" method="POST">
  <label>
    Name
    <input type="text" name="name" required />
  </label>
  <label>
    Email
    <input type="email" name="email" required />
  </label>
  <label>
    Message
    <textarea name="message" required placeholder="How can we help?"></textarea>
  </label>
  <!-- honeypot: bots fill this, humans don't see it -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />
  <button type="submit">Send</button>
</form>

@formloom/client (typed SDK)

submit.ts

// npm i @formloom/client
import { createForm } from "@formloom/client";

type Contact = {
  name: string;
  email: string;
  message: string;
};

const form = createForm<Contact>("YOUR_ACCESS_KEY");

// End-to-end typed: TS errors if you send the wrong shape.
const { success, message } = await form.submit({
  name: form.name.value,
  email: form.email.value,
  message: form.message.value,
});

Gotchas

Call `e.preventDefault()` in your handler.
Without SvelteKit there's no server action — the client fetch is the integration.

Form types for Svelte

Tailored field sets and code for common use cases.

Svelte contact form Svelte newsletter form Svelte waitlist form Svelte feedback form Svelte support ticket form Svelte lead capture form Svelte rsvp form Svelte job application form Svelte survey form Svelte bug report form

FAQ

No. A plain Svelte component with a client fetch works anywhere Svelte runs.