Gatsby

Use NBForms with Gatsby

Gatsby sites are static by default, which makes form handling tricky. NBForms gives your Gatsby contact form a real backend — email notifications, a submissions inbox, and spam protection — without deploying a single Netlify Function or AWS Lambda.

Official Gatsby docs

Gatsby

import { useState } from 'react'

export default function ContactForm() {
  const [status, setStatus] = useState('idle')

  async function handleSubmit(e) {
    e.preventDefault()
    setStatus('sending')
    const res = await fetch('https://api.nbforms.com', {
      method: 'POST',
      body: new FormData(e.target),
    })
    const data = await res.json()
    setStatus(res.ok ? 'success' : 'error')
  }

  if (status === 'success') return <p>Thanks — we'll be in touch!</p>

  return (
    <form onSubmit={handleSubmit}>
      <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 />
      <button type="submit" disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending…' : 'Send'}
      </button>
    </form>
  )
}

Why NBForms?

No Netlify Functions or AWS Lambda needed
Works with any Gatsby deployment target
Client-side submission with loading and success feedback
Compatible with Gatsby 4 and Gatsby 5

Add to your Gatsby app in minutes

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

Get started free