Contact form for Gatsby — no backend required

Gatsby is a static generator. Functions are optional complexity for a contact form.

Setup

Create a FormHeron form.
Add a React form component with action URL or fetch.
Include honeypot.
Deploy to any static host.

Working example

src/components/ContactForm.tsx

export function ContactForm() {
  return (
    <form action="https://formheron.com/f/YOUR_KEY" method="POST">
      <input type="email" name="email" required />
      <textarea name="message" required />
      <input type="text" name="_hp" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: "absolute", left: "-9999px" }} />
      <button type="submit">Send</button>
    </form>
  )
}

Common problems

Gatsby Functions

Skip them for basic contact forms.

SSG rehydration

Native form POST does not depend on React hydration.

Image plugins

Unrelated — keep forms free of file inputs; uploads are not supported.

FAQ

How do I add a contact form to Gatsby?

Use a React form that posts to FormHeron.

Does it work offline?

Submit requires network access to FormHeron.

Webhooks?

Indie and Pro deliver HMAC-signed webhooks with retries.

Start free Docs