Bolt.new contact forms that reach your inbox

// src/components/Contact.tsx  (Bolt's usual Vite + React + TypeScript setup)
import { FormEvent, useState } from "react";

// Optional: set VITE_FORMBOLD_URL. On Netlify, add it under
// Site configuration > Environment variables, because Netlify builds ignore .env.
const ENDPOINT = import.meta.env.VITE_FORMBOLD_URL || "https://formbold.com/s/FORM_ID";

export default function Contact() {
  const [busy, setBusy] = useState(false);
  const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null);

  const handle = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    setBusy(true);
    setResult(null);

    const response = await fetch(ENDPOINT, {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify({
        name: form.fullname.value,
        email: form.email.value,
        message: form.message.value,
      }),
    }).catch(() => null);

    setBusy(false);
    if (response?.ok) {
      form.reset();
      setResult({ ok: true, text: "Message received. Check your inbox for our reply." });
    } else {
      setResult({ ok: false, text: "That did not go through. Please retry in a minute." });
    }
  };

  return (
    <form onSubmit={handle} className="space-y-3">
      <input id="fullname" name="fullname" required placeholder="Full name" className="w-full border p-2" />
      <input id="email" name="email" type="email" required placeholder="Email" className="w-full border p-2" />
      <textarea id="message" name="message" required rows={4} placeholder="Message" className="w-full border p-2" />
      <button type="submit" disabled={busy} className="bg-indigo-600 px-4 py-2 text-white">
        {busy ? "Sending" : "Send message"}
      </button>
      {result && <p className={result.ok ? "text-emerald-600" : "text-rose-600"}>{result.text}</p>}
    </form>
  );
}