Svelte & SvelteKit contact form without a backend

Svelte forms can post via fetch with a few lines.

Contact.svelte

<script>
  let status = "idle";
  async function submit(e) {
    status = "sending";
    const body = Object.fromEntries(new FormData(e.currentTarget));
    const res = await fetch("https://forms.elimbi.com/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify({ ...body, access_key: "YOUR-ACCESS-KEY" }),
    });
    status = (await res.json()).success ? "sent" : "error";
  }
</script>
{#if status === "sent"}<p>Thanks!</p>{:else}
<form on:submit|preventDefault={submit}>
  <input name="name" required />
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <input type="checkbox" name="botcheck" style="display:none" />
  <button disabled={status === "sending"}>Send</button>
</form>{/if}

Works with adapter-static because nothing runs on your server.

Supported fields

• access_key — your key (required).
• email — if present, FormDrop sets it as Reply-To so you can answer directly.
• subject — optional email subject.
• redirect — optional thank-you page URL for plain HTML posts.
• botcheck — hidden honeypot; if a bot fills it, the submission is silently dropped.

Every other field is included in the email and saved in your dashboard log. Send Accept: application/json to get a JSON reply instead of a redirect.

Test it

1. Create a free access key with your email.
2. Paste the key, deploy, submit a test message.
3. Check your inbox and the dashboard log. If mail is delayed, the submission is still stored in the log.

FAQ

Related guides