Alpine.js

Use NBForms with Alpine.js

Alpine.js is designed for sprinkling interactivity on HTML pages. NBForms makes it trivial to add a full form backend: submission storage, email notifications, and spam protection — all without leaving the Alpine.js paradigm.

Official Alpine.js docs

Alpine.js

<div x-data="{ sending: false, success: false }">
  <p x-show="success">Thanks — we'll be in touch!</p>
  <form x-show="!success" @submit.prevent="
    sending = true;
    fetch('https://api.nbforms.com', { method: 'POST', body: new FormData($el) })
      .then(async r => { success = r.ok; sending = false })
  ">
    <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"
            x-text="sending ? 'Sending…' : 'Send'"></button>
  </form>
</div>

Why NBForms?

Works with Alpine.js 3.x
Entirely declarative — logic lives in HTML attributes
No bundler or build step required
Pairs perfectly with Tailwind CSS and HTMX

Add to your Alpine.js app in minutes

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

Get started free