Add a React contact form that emails you without a backend

import { useState } from "react";

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

  async function handleSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    setStatus("sending");
    try {
      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: "YOUR_ACCESS_KEY",
          subject: "New message from the website",
        }),
      });
      const data = await response.json();
      setStatus(data.success ? "sent" : "error");
      if (data.success) form.reset();
    } catch {
      setStatus("error");
    }
  }

  if (status === "sent") return <p role="status">Thanks, we got your message.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} />
      <label htmlFor="name">Name</label>
      <input id="name" name="name" required />
      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" rows={5} required />
      <button disabled={status === "sending"}>
        {status === "sending" ? "Sending..." : "Send"}
      </button>
      {status === "error" && <p role="alert">That didn't send. Please try again.</p>}
    </form>
  );
}