Sutrena + Vercel

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

// Deployed on Vercel as a Next.js app
// No API route needed -- Sutrena handles the backend

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

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");
    const data = Object.fromEntries(new FormData(e.currentTarget));

    const res = await fetch(
      "https://sutrena.com/api/forms/frm_your_id/submit",
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      }
    );

    setStatus(res.ok ? "sent" : "idle");
  }

  if (status === "sent") {
    return <p>You are on the list! We will be in touch.</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Your name" required />
      <input name="email" type="email" placeholder="Email" required />
      <select name="referral">
        <option value="">How did you find us?</option>
        <option value="Twitter/X">Twitter/X</option>
        <option value="LinkedIn">LinkedIn</option>
        <option value="Friend">Friend</option>
        <option value="Search">Search</option>
      </select>
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Joining..." : "Join Waitlist"}
      </button>
    </form>
  );
}