{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "contact-form", "title": "Contact Form", "description": "Multi-step contact form with editable CONTENT; posts to your API.", "dependencies": [ "lucide-react", "motion" ], "files": [ { "path": "registry/default/blocks/contact-form.tsx", "content": "\"use client\"\n\nimport { ArrowLeft, ArrowRight, Check, Loader2, Send } from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { useState, type FormEvent } from \"react\"\n\n/**\n * Edit CONTENT / PROJECT_TYPES to match your studio intake.\n * Posts JSON to CONTENT.endpoint (wire your own API route).\n * Steps reveal one at a time (Family: gradual revelation + fluid travel).\n */\nconst CONTENT = {\n stamp: \"Contact\",\n headline: \"Tell us what you want to ship.\",\n lede: \"Four short steps. We reply within one business day.\",\n endpoint: \"/api/contact\",\n successTitle: \"Got it.\",\n successBody: \"We'll reply within one business day.\",\n submitLabel: \"Send\",\n}\n\nconst PROJECT_TYPES = [\n { id: \"mvp-sprint\", label: \"7-Day MVP Sprint\", hint: \"from $4,800\" },\n { id: \"ai-integration\", label: \"AI Feature\", hint: \"from $2,400\" },\n { id: \"design-system\", label: \"Design System\", hint: \"from $3,600\" },\n { id: \"other\", label: \"Something else\", hint: \"Describe it below\" },\n] as const\n\nconst BUDGETS = [\n { id: \"<2k\", label: \"Under $2k\" },\n { id: \"2k-5k\", label: \"$2k - $5k\" },\n { id: \"5k-10k\", label: \"$5k - $10k\" },\n { id: \"10k+\", label: \"$10k+\" },\n { id: \"unsure\", label: \"Not sure yet\" },\n] as const\n\nconst TIMELINES = [\n { id: \"asap\", label: \"ASAP · 1-2 weeks\" },\n { id: \"1-month\", label: \"Within a month\" },\n { id: \"flexible\", label: \"Flexible\" },\n { id: \"unsure\", label: \"Not sure yet\" },\n] as const\n\nconst STEPS = [\n { id: \"who\", label: \"Who\", title: \"Who should we reply to?\" },\n { id: \"what\", label: \"What\", title: \"What are we scoping?\" },\n { id: \"when\", label: \"When\", title: \"Timing & budget\" },\n { id: \"send\", label: \"Send\", title: \"Look right?\" },\n] as const\n\ntype Status =\n | { kind: \"idle\" }\n | { kind: \"submitting\" }\n | { kind: \"success\" }\n | { kind: \"error\"; message: string }\n\nfunction Chip({\n pressed,\n onClick,\n disabled,\n children,\n}: {\n pressed: boolean\n onClick: () => void\n disabled?: boolean\n children: React.ReactNode\n}) {\n return (\n \n {children}\n \n )\n}\n\nexport function ContactForm() {\n const reduce = useReducedMotion()\n const [step, setStep] = useState(0)\n const [status, setStatus] = useState({ kind: \"idle\" })\n const [form, setForm] = useState({\n name: \"\",\n email: \"\",\n company: \"\",\n projectType: \"\",\n budget: \"\",\n timeline: \"\",\n message: \"\",\n honeypot: \"\",\n })\n\n const canNext = () => {\n if (step === 0) return !!form.name.trim() && !!form.email.trim()\n if (step === 1) return !!form.message.trim()\n return true\n }\n\n const onSubmit = async (e: FormEvent) => {\n e.preventDefault()\n if (step < STEPS.length - 1) {\n if (!canNext()) return\n setStep((s) => s + 1)\n return\n }\n\n setStatus({ kind: \"submitting\" })\n try {\n const res = await fetch(CONTENT.endpoint, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(form),\n })\n if (!res.ok) {\n const data = (await res.json().catch(() => null)) as {\n error?: string\n } | null\n throw new Error(data?.error ?? \"Something went wrong. Try again.\")\n }\n setStatus({ kind: \"success\" })\n } catch (err) {\n setStatus({\n kind: \"error\",\n message: err instanceof Error ? err.message : \"Request failed.\",\n })\n }\n }\n\n if (status.kind === \"success\") {\n return (\n \n
\n \n
\n

\n {CONTENT.successTitle}\n

\n

{CONTENT.successBody}

\n \n )\n }\n\n const current = STEPS[step]!\n\n return (\n
\n
\n

\n {CONTENT.stamp}\n

\n

\n {CONTENT.headline}\n

\n

{CONTENT.lede}

\n
    \n {STEPS.map((s, i) => (\n \n {String(i + 1).padStart(2, \"0\")} {s.label}\n {i < STEPS.length - 1 ? (\n \n /\n \n ) : null}\n \n ))}\n
\n
\n\n
\n setForm((f) => ({ ...f, honeypot: e.target.value }))}\n className=\"hidden\"\n tabIndex={-1}\n autoComplete=\"off\"\n aria-hidden\n />\n\n \n \n
\n

\n {current.title}\n

\n
\n\n {step === 0 ? (\n
\n \n \n \n
\n ) : null}\n\n {step === 1 ? (\n
\n
\n

\n Project type\n

\n
\n {PROJECT_TYPES.map((p) => (\n \n setForm((f) => ({ ...f, projectType: p.id }))\n }\n >\n \n {p.label}\n \n \n {p.hint}\n \n \n ))}\n
\n
\n \n
\n ) : null}\n\n {step === 2 ? (\n
\n
\n

\n Budget\n

\n
\n {BUDGETS.map((b) => (\n setForm((f) => ({ ...f, budget: b.id }))}\n >\n {b.label}\n \n ))}\n
\n
\n
\n

\n Timeline\n

\n
\n {TIMELINES.map((t) => (\n setForm((f) => ({ ...f, timeline: t.id }))}\n >\n {t.label}\n \n ))}\n
\n
\n
\n ) : null}\n\n {step === 3 ? (\n
\n
\n
Name
\n
{form.name}
\n
\n
\n
Email
\n
{form.email}
\n
\n
\n
Project
\n
\n {PROJECT_TYPES.find((p) => p.id === form.projectType)?.label ??\n \"Not set\"}\n
\n
\n
\n
Note
\n
{form.message}
\n
\n
\n ) : null}\n \n \n\n {status.kind === \"error\" ? (\n

\n {status.message}\n

\n ) : null}\n\n
\n setStep((s) => Math.max(0, s - 1))}\n className=\"inline-flex h-10 items-center gap-1.5 px-3 text-sm font-medium text-muted-foreground disabled:opacity-40\"\n >\n \n Back\n \n \n \n \n {status.kind === \"submitting\" ? (\n <>\n \n Sending…\n \n ) : step === 3 ? (\n <>\n {CONTENT.submitLabel}\n \n \n ) : (\n <>\n Continue\n \n \n )}\n \n \n \n
\n \n
\n )\n}\n", "type": "registry:component", "target": "components/blocks/contact-form.tsx" } ], "type": "registry:block" }