Contact form for Svelte & SvelteKit

Svelte contact form in a few lines

Same idea: fetch() to the endpoint, then show a thank-you.

How to set it up

1. Create a form in Formpit and copy the endpoint URL.
2. Use the component below.
3. Send a test submission.

ContactForm.svelte

<script>
  let sent = false;
  async function submit(e) {
    const r = await fetch("https://formpit.com/f/YOUR_FORM_ID", { method: "POST", headers: { Accept: "application/json" }, body: new FormData(e.target) });
    sent = r.ok;
  }
</script>
{#if sent}<p>Thanks, we'll be in touch.</p>
{:else}<form on:submit|preventDefault={submit}>
  <input name="email" type="email" required />
  <textarea name="message" required />
  <input name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
  <button>Send</button>
</form>{/if}

Replace YOUR_FORM_ID with the endpoint from your form's Setup tab.

Good to know

• In SvelteKit you can also use a form action that forwards to Formpit server-side, but the client version is simpler.

What you get

• Every submission emailed to you and stored forever in an inbox with New / Replied / Closed statuses.
• Reply from the inbox, add tags and notes, search, export CSV or JSON.
• Spam filtering with a honeypot, rate limiting and content checks; hCaptcha, reCAPTCHA or Turnstile if you want it.
• 500 submissions a month free. Pro adds file uploads, Google Sheets, Notion, Slack, webhooks and reminders.

Other platforms

Lovable · Bolt · v0 · WordPress · Shopify · Wix · Squarespace · Framer · Webflow · Carrd · Plain HTML · React · Next.js · Astro · Hugo, Jekyll & Eleventy · Vue & Nuxt