All frameworks
SvelteSvelte

Use NBForms with Svelte

Svelte's reactive declarations make form state management beautifully concise. Pair it with NBForms and you get a fully functional contact form component — email notifications, spam filtering, and a submissions inbox — with minimal boilerplate.

Official Svelte docs
Svelte
<script>
  let sending = false
  let success = false

  async function submit(e) {
    sending = true
    const res = await fetch('https://api.nbforms.com', {
      method: 'POST',
      body: new FormData(e.target),
    })
    success = res.ok
    sending = false
  }
</script>

{#if success}
  <p>Thanks — we'll be in touch!</p>
{:else}
  <form on:submit|preventDefault={submit}>
    <input type="hidden" name="_token" value="YOUR_TOKEN" />
    <label>Name</label>
    <input type="text" name="name" required />
    <label>Email</label>
    <input type="email" name="email" required />
    <label>Message</label>
    <textarea name="message" required></textarea>
    <button type="submit" disabled={sending}>
      {sending ? 'Sending…' : 'Send'}
    </button>
  </form>
{/if}

Why NBForms?

  • Works with Svelte 4 and Svelte 5
  • No stores or context API setup needed
  • Reactive state with Svelte's built-in declarations
  • Handles sending, success, and error states

Add to your Svelte app in minutes

Free tier included. No credit card. No backend setup — just copy the snippet above and go.

Get started free