v0

Create a contact form component that submits to https://api.formbnb.com/f/MY_ORG/contact
using fetch with FormData. Include name, email, and message fields.
Add a hidden _gotcha field for spam protection.
Handle loading, success, and error states.

Create a modern contact form with shadcn/ui components.
Submit to https://api.formbnb.com/f/MY_ORG/contact via AJAX POST.
Include name, email, subject, and message fields.
Add a hidden _gotcha input for spam protection.
Show a toast notification on success.
Use proper loading states on the submit button.

Create a minimal newsletter signup component with just an email field
and a submit button. POST to https://api.formbnb.com/f/MY_ORG/newsletter
using fetch. Add _gotcha honeypot. Show inline success/error messages.

Create a floating feedback widget (bottom-right corner) that expands
into a form with rating (1-5 stars), category dropdown, and message textarea.
Submit to https://api.formbnb.com/f/MY_ORG/feedback via AJAX.
Include _gotcha spam protection. Collapse back after successful submission.

Create a multi-step form with 3 steps:
1. Personal info (name, email, phone)
2. Project details (budget dropdown, timeline, description)
3. Review and submit

Submit all data to https://api.formbnb.com/f/MY_ORG/inquiry on the final step.
Add _gotcha honeypot. Show a progress bar and allow going back between steps.

"use client";

import { useState } from "react";

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

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus("loading");

    try {
      const res = await fetch("https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM", {
        method: "POST",
        body: new FormData(e.currentTarget),
        headers: { Accept: "application/json" },
      });
      setStatus(res.ok ? "success" : "error");
      if (res.ok) e.currentTarget.reset();
    } catch {
      setStatus("error");
    }
  };

  if (status === "success") {
    return <p>Thanks! We'll be in touch.</p>;
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="_gotcha" style={{ display: "none" }} />
      <input type="text" name="name" placeholder="Name" required />
      <input type="email" name="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button type="submit" disabled={status === "loading"}>
        {status === "loading" ? "Sending..." : "Send"}
      </button>
      {status === "error" && <p>Something went wrong. Try again.</p>}
    </form>
  );
}