v0 builds the UI. We're the backend.

<!-- Replace YOUR_FORM_ID with the id from your formbuild.io dashboard. -->
<form action="https://formbuild.io/in/YOUR_FORM_ID" method="POST">
  <input type="email" name="email" placeholder="you@example.com" required />
  <textarea name="message" placeholder="Your message" required></textarea>
  <button type="submit">Send</button>
</form>

// Submit a v0 form to formbuild.io as JSON, with error handling.
// The endpoint accepts application/json (a flat object of string values),
// application/x-www-form-urlencoded, and multipart/form-data.
// Note: file uploads are NOT stored — send text fields only.

interface ContactPayload {
  email: string;
  message: string;
}

async function submitForm(payload: ContactPayload): Promise<void> {
  const res = await fetch("https://formbuild.io/in/YOUR_FORM_ID", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      // Optional: retry-safe. Reuse the same key to avoid duplicate responses.
      "Idempotency-Key": crypto.randomUUID(),
    },
    body: JSON.stringify(payload),
  });

  if (!res.ok) {
    // Errors come back as { error: string }.
    const { error } = (await res.json().catch(() => ({ error: "Request failed" }))) as {
      error?: string;
    };
    throw new Error(error ?? `Submission failed (${res.status})`);
  }
}

// Wire it to your v0 form's onSubmit:
// await submitForm({ email, message });

"use client";

import { useState } from "react";

interface ContactPayload {
  email: string;
  message: string;
}

export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "done" | "error">("idle");

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus("sending");

    const form = e.currentTarget;
    const payload: ContactPayload = {
      email: (form.elements.namedItem("email") as HTMLInputElement).value,
      message: (form.elements.namedItem("message") as HTMLTextAreaElement).value,
    };

    try {
      const res = await fetch("https://formbuild.io/in/YOUR_FORM_ID", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error("Submission failed");
      setStatus("done");
      form.reset();
    } catch {
      setStatus("error");
    }
  }

  if (status === "done") return <p>Thanks — we got your message.</p>;

  return (
    <form onSubmit={onSubmit}>
      <input name="email" type="email" placeholder="you@example.com" required />
      <textarea name="message" placeholder="Your message" required />
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending…" : "Send"}
      </button>
      {status === "error" && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}