Contact form for Next.js without an API route

"use client";
import { useState } from "react";

export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");
  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");
    const data = Object.fromEntries(new FormData(e.currentTarget));
    const res = await fetch("https://smallwerk.com/formlane/api/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify({ ...data, access_key: process.env.NEXT_PUBLIC_FORMLANE_KEY ?? "YOUR_ACCESS_KEY" }),
    });
    setStatus(res.ok ? "sent" : "error");
  }
  if (status === "sent") return <p>Thanks! We'll get back to you.</p>;
  return (
    <form onSubmit={onSubmit}>
      <input type="checkbox" name="botcheck" hidden tabIndex={-1} autoComplete="off" />
      <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 === "error" && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}