Does `use:enhance` work?

Yes — enhance your form, and your action can forward to FormLoom and return the result for the enhanced callback.

Will it work with adapter-static?

Yes, using the client-side fetch variant, which POSTs straight to FormLoom.

SvelteKit contact form

Verified against SvelteKit 2.x · June 2026

SvelteKit's form actions give you progressive enhancement out of the box. You can either use a `+page.server.ts` action that forwards to FormLoom (great for SSR and no-JS support) or POST from the client with `fetch`. Both are one short function.

Customize in the generator Full SvelteKit guide

The code

For SSR + progressive enhancement, create a named action in `+page.server.ts` that reads the form data and forwards it to FormLoom. For SPA-style UX, use `use:enhance` or a plain client `fetch`.

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

In a server action, read `await request.formData()` and forward it; return the FormLoom JSON so `use:enhance` can react to it.
Static-adapter builds have no server — use the client `fetch` variant there.
Remember `Accept: application/json` so FormLoom returns JSON rather than redirecting.

Form types for SvelteKit

Tailored field sets and code for common use cases.

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

FAQ

Use a `+page.server.ts` action for progressive enhancement and SSR; use a client fetch when you're on `adapter-static` or want a pure SPA flow.