Gatsby Forms: React State and fetch()

Submit a Gatsby form to a Formboost endpoint with React hooks and fetch — no serverless function, with loading and success states and spam screening.

Gatsby generates static sites, which means no built-in form backend. Formboost receives your form submissions, filters spam, sends email notifications, and stores everything in a searchable dashboard — without any serverless functions or backend code.

Prerequisites

A Formboost account (sign up free)
A Gatsby project

Step 1: Create a Formboost Endpoint

https://formboost.app/f/YOUR_ENDPOINT_ID

Step 2: Create the Contact Component

// src/components/ContactForm.tsx
import { useState } from "react";

type Status = "idle" | "submitting" | "success" | "error";

export function ContactForm() {
  const [status, setStatus] = useState<Status>("idle");

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("submitting");

    const form = e.currentTarget;
    const data = Object.fromEntries(new FormData(form));

    try {
      const res = await fetch("https://formboost.app/f/YOUR_ENDPOINT_ID", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });

      if (res.ok) {
        setStatus("success");
        form.reset();
      } else {
        setStatus("error");
      }
    } catch {
      setStatus("error");
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" required />
      </div>
      <div>
        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" required />
      </div>
      <div>
        <label htmlFor="message">Message</label>
        <textarea id="message" name="message" rows={5} />
      </div>

      <button type="submit" disabled={status === "submitting"}>
        {status === "submitting" ? "Sending…" : "Send"}
      </button>

      {status === "success" && <p>Message sent! We'll be in touch soon.</p>}
      {status === "error" && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

Replace YOUR_ENDPOINT_ID with your actual endpoint ID.

Step 3: Use It in a Page

// src/pages/contact.tsx
import type { HeadFC, PageProps } from "gatsby";
import { ContactForm } from "../components/ContactForm";

export default function ContactPage({}: PageProps) {
  return (
    <main>
      <h1>Contact Us</h1>
      <ContactForm />
    </main>
  );
}

export const Head: HeadFC = () => <title>Contact</title>;

Step 4: Test It

Run gatsby develop and submit the form. You'll see the submission in your Formboost dashboard within seconds.