Build a Next.js contact form with one client component

"use client";

import { useState, type FormEvent } from "react";

export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    setStatus("sending");
    const response = await fetch("https://formthunder.com/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify({
        ...Object.fromEntries(new FormData(form)),
        access_key: process.env.NEXT_PUBLIC_FORMTHUNDER_KEY,
      }),
    }).catch(() => null);
    const ok = response ? (await response.json()).success : false;
    setStatus(ok ? "sent" : "error");
    if (ok) form.reset();
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button disabled={status === "sending"}>Send</button>
      {status === "sent" && <p role="status">Thanks, we got it.</p>}
      {status === "error" && <p role="alert">That didn't send. Please try again.</p>}
    </form>
  );
}

import { ContactForm } from "./contact-form";

export const metadata = { title: "Contact" };

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