Svelte

Submit forms from Svelte or SvelteKit with reactive bindings and fetch.

Basic Svelte form

ContactForm.svelte

<script>
  let status = "idle";

  async function handleSubmit(e) {
    e.preventDefault();
    status = "loading";

    const data = Object.fromEntries(new FormData(e.target));

    const res = await fetch("https://formfa.st/f/your_endpoint_id", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(data),
    });

    status = res.ok ? "success" : "error";
  }
</script>

{#if status === "success"}
  <p>Thanks! We'll be in touch.</p>
{:else}
  <form on:submit={handleSubmit}>
    <input type="text" name="name" placeholder="Name" required />
    <input type="email" name="email" placeholder="Email" required />
    <textarea name="message" placeholder="Message"></textarea>

    <input type="hidden" name="_gotcha" style="display:none" />

    <button type="submit" disabled={status === "loading"}>
      {status === "loading" ? "Sending..." : "Send"}
    </button>

    {#if status === "error"}
      <p>Something went wrong. Please try again.</p>
    {/if}
  </form>
{/if}

SvelteKit form action

In SvelteKit, you can submit to FormFast from a server-side form action:

src/routes/contact/+page.server.ts

import { fail } from "@sveltejs/kit";

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const data = Object.fromEntries(formData);

    const res = await fetch("https://formfa.st/f/your_endpoint_id", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify(data),
    });

    if (!res.ok) {
      return fail(500, { error: "Submission failed" });
    }

    return { success: true };
  },
};

src/routes/contact/+page.svelte

<script>
  export let form;
</script>

{#if form?.success}
  <p>Thanks for your message!</p>
{:else}
  <form method="POST">
    <input type="text" name="name" required />
    <input type="email" name="email" required />
    <textarea name="message"></textarea>
    <button type="submit">Send</button>
  </form>

  {#if form?.error}
    <p>{form.error}</p>
  {/if}
{/if}

Plain HTML (no JavaScript)

You can also use a plain HTML form in Svelte components. The browser handles the POST and redirect:

Svelte

<form action="https://formfa.st/f/your_endpoint_id" method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message"></textarea>
  <input type="hidden" name="_gotcha" style="display:none" />
  <button type="submit">Send</button>
</form>

PreviousNext.js NextAstro