Form backend for Svelte

How it works

1. 1

   Create a free LazyForms endpoint.

2. 2

   Build your Svelte form with bound variables.

3. 3

   POST to the LazyForms URL on submit.

4. 4

   Done. Submissions are in your inbox.

Code example

<script>
  let name = ''
  let email = ''
  let message = ''
  let status = 'idle'

  async function handleSubmit() {
    status = 'sending'

    const res = await fetch('https://api.lazyforms.com/f/YOUR_ACCESS_KEY', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, email, message }),
    })

    status = res.ok ? 'sent' : 'error'
    if (res.ok) { name = ''; email = ''; message = '' }
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <input bind:value={name} type="text" placeholder="Name" required />
  <input bind:value={email} type="email" placeholder="Email" required />
  <textarea bind:value={message} placeholder="Message" required />
  <button type="submit" disabled={status === 'sending'}>
    {status === 'sending' ? 'Sending...' : 'Send'}
  </button>
  {#if status === 'sent'}<p>Sent!</p>{/if}
</form>

Tips

• Svelte's bind:value gives you reactive form state with zero boilerplate.
• In SvelteKit, you can also use form actions — but for simple forms, direct fetch is easier.
• LazyForms handles CORS, so client-side fetch works from any domain.