TanStack Contact Form Without a Server Route

// src/routes/contact.tsx
import { useState } from "react";
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/contact")({
  component: ContactForm,
});

function ContactForm() {
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState("");

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setLoading(true);

    const formData = new FormData(event.currentTarget);
    const payload = Object.fromEntries(formData.entries());

    try {
      const response = await fetch("https://formbold.com/s/FORM_ID", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify(payload),
      });
      const result = await response.json();

      if (response.ok) {
        setStatus(result.message || "Message sent.");
        event.currentTarget.reset();
      } else {
        setStatus(result.message || "Something went wrong.");
      }
    } catch {
      setStatus("Could not reach Formbold.");
    } finally {
      setLoading(false);
      setTimeout(() => setStatus(""), 4000);
    }
  }

  return (
    <form onSubmit={onSubmit} className="flex flex-col gap-3 max-w-md">
      <label>
        Email
        <input type="email" name="email" required />
      </label>
      <label>
        Subject
        <input type="text" name="subject" required />
      </label>
      <label>
        Message
        <textarea name="message" rows={5} required />
      </label>
      <button type="submit" disabled={loading}>
        {loading ? "Sending..." : "Send message"}
      </button>
      {status ? <p>{status}</p> : null}
    </form>
  );
}