React Forms with Gatsby

1// src/components/ContactForm.tsx
2import { useState } from "react";
3
4type Status = "idle" | "submitting" | "success" | "error";
5
6export function ContactForm() {
7  const [status, setStatus] = useState<Status>("idle");
8
9  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
10    e.preventDefault();
11    setStatus("submitting");
12
13    const form = e.currentTarget;
14    const data = Object.fromEntries(new FormData(form));
15
16    try {
17      const res = await fetch("https://formboost.app/f/YOUR_ENDPOINT_ID", {
18        method: "POST",
19        headers: { "Content-Type": "application/json" },
20        body: JSON.stringify(data),
21      });
22
23      if (res.ok) {
24        setStatus("success");
25        form.reset();
26      } else {
27        setStatus("error");
28      }
29    } catch {
30      setStatus("error");
31    }
32  }
33
34  return (
35    <form onSubmit={handleSubmit}>
36      <div>
37        <label htmlFor="name">Name</label>
38        <input type="text" id="name" name="name" required />
39      </div>
40      <div>
41        <label htmlFor="email">Email</label>
42        <input type="email" id="email" name="email" required />
43      </div>
44      <div>
45        <label htmlFor="message">Message</label>
46        <textarea id="message" name="message" rows={5} />
47      </div>
48
49      <button type="submit" disabled={status === "submitting"}>
50        {status === "submitting" ? "Sending…" : "Send"}
51      </button>
52
53      {status === "success" && <p>Message sent! We'll be in touch soon.</p>}
54      {status === "error" && <p>Something went wrong. Please try again.</p>}
55    </form>
56  );
57}

1// src/pages/contact.tsx
2import type { HeadFC, PageProps } from "gatsby";
3import { ContactForm } from "../components/ContactForm";
4
5export default function ContactPage({}: PageProps) {
6  return (
7    <main>
8      <h1>Contact Us</h1>
9      <ContactForm />
10    </main>
11  );
12}
13
14export const Head: HeadFC = () => <title>Contact</title>;