Do I need a +server.ts file?

No. The form submits directly to FormsList — no server-side code needed.

Does this work with Svelte 4?

Yes. Replace $state() with let variables. The fetch call is identical.

Can I use form actions instead?

You can, but submitting directly to FormsList via fetch is simpler.

Beginner4 min readUpdated Mar 27, 2026

How to Add a Contact Form to SvelteKit (No Backend Required)

Add a working contact form to SvelteKit using FormsList.

TL;DR

Add a contact form to SvelteKit by creating a Svelte component with bind:value and submitting to a FormsList endpoint. No +server.ts file needed — FormsList handles the backend, spam protection, and notifications.

By Vaibhav Jain·Published March 27, 2026

Prerequisites

SvelteKit project
FormsList account (free)

Create a FormsList endpoint

Build the form component

Create a Svelte component with reactive state.

<script>
  let name = $state('')
  let email = $state('')
  let message = $state('')
  let submitted = $state(false)

  async function handleSubmit(e) {
    e.preventDefault()
    const res = await fetch('https://formslist.com/f/YOUR_HASH', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
      body: JSON.stringify({ name, email, message }),
    })
    if (res.ok) submitted = true
  }
</script>

{#if submitted}
  <p>Thanks! We'll be in touch.</p>
{:else}
  <form onsubmit={handleSubmit}>
    <input bind:value={name} placeholder="Name" required />
    <input bind:value={email} type="email" placeholder="Email" required />
    <textarea bind:value={message} placeholder="Message" required />
    <button type="submit">Send</button>
  </form>
{/if}