Form backend for Gatsby

How it works

1. 1

   Create a LazyForms form endpoint.

2. 2

   Build a React form component in your Gatsby project.

3. 3

   Submit via fetch to your LazyForms URL.

4. 4

   Deploy to any host. Forms work everywhere.

Code example

import React, { 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.lazyforms.com/f/YOUR_ACCESS_KEY', {
      method: 'POST',
      body: new FormData(e.target),
    })

    setStatus(res.ok ? 'sent' : 'error')
    if (res.ok) e.target.reset()
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button disabled={status === 'sending'}>
        {status === 'sending' ? 'Sending...' : 'Send'}
      </button>
      {status === 'sent' && <p>Thanks! Message sent.</p>}
    </form>
  )
}

Tips

• No gatsby-plugin needed — just a React component with fetch.
• Works with Gatsby's static builds and client-side hydration.
• Deploy on Gatsby Cloud, Netlify, Vercel, or any CDN.