React contact form without a backend

VITE_FORMLANE_KEY=fl_YOUR_ACCESS_KEY

import { useState } from "react";

const ENDPOINT = "https://smallwerk.com/formlane/api/submit";

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

  async function handleSubmit(event) {
    event.preventDefault();
    setStatus("sending");
    setError("");

    const form = event.currentTarget;
    // FormData skips the unchecked honeypot checkbox, so real visitors never send it.
    const data = Object.fromEntries(new FormData(form));

    try {
      const res = await fetch(ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: import.meta.env.VITE_FORMLANE_KEY,
          subject: "New message from my React site",
          ...data,
        }),
      });
      const json = await res.json();
      if (json.success) {
        setStatus("sent");
        form.reset();
      } else {
        setStatus("error");
        setError(json.message || "Something went wrong.");
      }
    } catch {
      setStatus("error");
      setError("Network error. Please try again.");
    }
  }

  if (status === "sent") return <p role="status">Thanks! Your message has been sent.</p>;

  return (
    <form onSubmit={handleSubmit}>
      {/* Honeypot: hidden from people, leave it unchecked */}
      <input type="checkbox" name="botcheck" style={{ display: "none" }} tabIndex={-1} />

      <label htmlFor="name">Name</label>
      <input id="name" name="name" type="text" 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 type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending…" : "Send"}
      </button>
      {status === "error" && <p role="alert">{error}</p>}
    </form>
  );
}