New form

Build your form

Title setTitle(e.target.value)} className=\"mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 text-base focus:border-violet-500 focus:outline-none focus:ring-4 focus:ring-violet-100\" placeholder=\"Customer feedback\" />Description optional

setDescription(e.target.value)} className=\"mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 focus:border-violet-500 focus:outline-none focus:ring-4 focus:ring-violet-100\" rows={2} placeholder=\"Tell people why you're asking\" /></label></div></div><div className=\"my-6 space-y-4\">{questions.map((question, index) => <QuestionEditor key={question.id} question={question} index={index} total={questions.length} patch={patch} move={move} remove={() => setQuestions(q => q.filter(item => item.id !== question.id))} />)}</div><div className=\"flex flex-wrap items-center gap-3\"><button onClick={add} className={`${button} border-2 border-dashed border-violet-300 bg-violet-50 text-violet-700 hover:bg-violet-100`}>+ Add question</button><button onClick={save} disabled={saving} className={`${button} ml-auto bg-violet-700 text-white hover:bg-violet-800 disabled:opacity-50`}>{saving ? \"Saving...\" : \"Save and share\"}</button></div>{error && <p className=\"mt-4 rounded-xl bg-red-50 p-3 text-sm font-medium text-red-700\">{error}</p>}</main></Shell>;\n}\nfunction QuestionEditor({ question, index, total, patch, move, remove }: { question: Question; index: number; total: number; patch: (id: string, p: Partial<Question>) => void; move: (i: number, d: number) => void; remove: () => void }) {\n  const choices = question.options || [\"Option 1\", \"Option 2\"];\n  return <section className=\"rounded-2xl border border-slate-200 bg-white p-5 shadow-sm\"><div className=\"flex items-center gap-2 text-sm\"><span className=\"font-black text-violet-700\">{index + 1}</span><select value={question.type} onChange={e => patch(question.id, { type: e.target.value as Kind, options: [\"Option 1\", \"Option 2\"] })} className=\"rounded-lg border border-slate-200 px-2 py-1 font-semibold\">{kinds.map(kind => <option key={kind.value} value={kind.value}>{kind.label}</option>)}</select><label className=\"ml-auto flex items-center gap-1 text-slate-500\"><input type=\"checkbox\" checked={question.required} onChange={e => patch(question.id, { required: e.target.checked })} /> Required</label></div><input value={question.label} onChange={e => patch(question.id, { label: e.target.value })} className=\"mt-4 w-full rounded-xl border border-slate-200 px-4 py-3 font-semibold focus:border-violet-500 focus:outline-none focus:ring-4 focus:ring-violet-100\" placeholder=\"Write your question\" />{(question.type === \"single\" || question.type === \"multi\") && <div className=\"mt-3 space-y-2\">{choices.map((option, optionIndex) => <div key={optionIndex} className=\"flex gap-2\"><input value={option} onChange={e => patch(question.id, { options: choices.map((item, i) => i === optionIndex ? e.target.value : item) })} className=\"w-full rounded-lg border border-slate-200 px-3 py-2 text-sm\" /><button onClick={() => patch(question.id, { options: choices.filter((_, i) => i !== optionIndex) })} className=\"px-2 text-slate-400 hover:text-red-600\">×</button></div>)}<button onClick={() => patch(question.id, { options: [...choices, `Option ${choices.length + 1}`] })} className=\"text-sm font-bold text-violet-700\">+ Add option</button></div>}<div className=\"mt-4 flex justify-end gap-2\"><button disabled={index === 0} onClick={() => move(index, -1)} className=\"rounded-lg border px-3 py-1 text-sm disabled:opacity-30\">↑</button><button disabled={index === total - 1} onClick={() => move(index, 1)} className=\"rounded-lg border px-3 py-1 text-sm disabled:opacity-30\">↓</button><button onClick={remove} className=\"rounded-lg px-3 py-1 text-sm font-bold text-red-600 hover:bg-red-50\">Delete</button></div></section>;\n}\nfunction PublicForm({ slug }: { slug: string }) {\n  const [form, setForm] = useState<Form | null>(null); const [answers, setAnswers] = useState<Record<string, any>>({}); const [step, setStep] = useState(-1); const [error, setError] = useState(\"\"); const [done, setDone] = useState(false);\n  useEffect(() => { api(`/api/public/${slug}`).then(setForm).catch(e => setError(e.message)); }, [slug]);\n  if (error && !form) return <Shell><main className=\"mx-auto max-w-xl px-5 py-16\"><p className=\"rounded-xl bg-red-50 p-4 text-red-700\">{error}</p></main></Shell>;\n  if (!form) return <Shell><main className=\"mx-auto max-w-xl px-5 py-16 text-slate-500\">Loading form...</main></Shell>;\n  if (done) return <Shell><main className=\"mx-auto max-w-xl px-5 py-20 text-center\"><div className=\"mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 text-3xl text-emerald-700\">✓</div><h1 className=\"mt-6 text-4xl font-black\">Thank you</h1><p className=\"mt-3 text-slate-500\">Your response has been recorded.</p></main></Shell>;\n  if (step < 0) return <Shell><main className=\"mx-auto max-w-2xl px-5 py-20\"><div className=\"rounded-3xl border border-slate-200 bg-white p-8 shadow-sm md:p-12\"><p className=\"text-sm font-bold uppercase tracking-widest text-violet-600\">Formflow</p><h1 className=\"mt-3 text-4xl font-black tracking-tight md:text-5xl\">{form.title}</h1>{form.description && <p className=\"mt-4 text-lg leading-7 text-slate-500\">{form.description}</p>}<button autoFocus onClick={() => setStep(0)} className={`${button} mt-8 bg-violet-700 text-white hover:bg-violet-800`}>Start <span className=\"ml-2 text-xs opacity-70\">press Enter ↵</span></button></div></main></Shell>;\n  const question = form.questions[step]; const value = answers[question.id] ?? (question.type === \"multi\" ? [] : \"\"); const invalid = question.required && (Array.isArray(value) ? !value.length : !String(value).trim());\n  const next = async () => { if (invalid) return setError(\"This question is required.\"); setError(\"\"); if (step < form.questions.length - 1) return setStep(step + 1); try { await api(`/api/public/${slug}/responses`, { method: \"POST\", body: JSON.stringify({ answers }) }); setDone(true); } catch (e) { setError((e as Error).message); } };\n  return <Shell><main className=\"mx-auto max-w-2xl px-5 py-12\"><div className=\"mb-10\"><div className=\"h-2 overflow-hidden rounded-full bg-slate-200\"><div className=\"h-full rounded-full bg-violet-600 transition-all\" style={{ width: `${((step + 1) / form.questions.length) * 100}%` }} /></div><p className=\"mt-2 text-xs font-bold uppercase tracking-widest text-slate-400\">Question {step + 1} of {form.questions.length}</p></div><section onKeyDown={e => { if (e.key === \"Enter\" && question.type !== \"long\") { e.preventDefault(); next(); } }}><p className=\"text-sm font-black text-violet-700\">{step + 1} <span className=\"text-slate-300\">→</span></p><h1 className=\"mt-3 text-3xl font-black leading-tight md:text-4xl\">{question.label}{question.required && <span className=\"ml-1 text-violet-600\">*</span>}</h1><Answer question={question} value={value} setValue={value => setAnswers(old => ({ ...old, [question.id]: value }))} />{error && <p className=\"mt-4 text-sm font-bold text-red-600\">{error}</p>}<div className=\"mt-8 flex gap-3\"><button onClick={() => setStep(Math.max(-1, step - 1))} className={`${button} border border-slate-200 bg-white hover:border-violet-300`}>Back</button><button onClick={next} className={`${button} bg-violet-700 text-white hover:bg-violet-800`}>{step === form.questions.length - 1 ? \"Submit\" : \"Next\"} <span className=\"ml-2 text-xs opacity-70\">Enter ↵</span></button></div></section></main></Shell>;\n}\nfunction Answer({ question, value, setValue }: { question: Question; value: any; setValue: (v: any) => void }) {\n  if (question.type === \"short\") return <input autoFocus value={value} onChange={e => setValue(e.target.value)} className=\"mt-8 w-full border-b-2 border-slate-300 bg-transparent px-1 py-3 text-xl outline-none focus:border-violet-600\" placeholder=\"Type your answer here...\" />;\n  if (question.type === \"long\") return <textarea autoFocus value={value} onChange={e => setValue(e.target.value)} className=\"mt-8 w-full rounded-xl border-2 border-slate-200 bg-white p-4 text-lg outline-none focus:border-violet-600\" rows={5} placeholder=\"Type your answer here...\" />;\n  return <div className=\"mt-8 space-y-3\">{question.options?.map((option, index) => { const checked = question.type === \"multi\" ? value.includes(option) : value === option; return <label key={option} className={`flex cursor-pointer items-center gap-3 rounded-xl border-2 p-4 font-semibold transition ${checked ? \"border-violet-600 bg-violet-50\" : \"border-slate-200 bg-white hover:border-violet-300\"}`}><input autoFocus={index === 0} type={question.type === \"multi\" ? \"checkbox\" : \"radio\"} checked={checked} onChange={() => setValue(question.type === \"multi\" ? (checked ? value.filter((item: string) => item !== option) : [...value, option]) : option)} /><span>{option}</span></label>; })}</div>;\n}\nfunction Responses({ id }: { id: string }) {\n  const [data, setData] = useState<any>(null); useEffect(() => { api(`/api/forms/${id}/responses`).then(setData); }, [id]);\n  return <Shell><main className=\"mx-auto max-w-5xl px-5 py-10\"><button onClick={() => go(\"/\")} className=\"mb-6 text-sm font-bold text-violet-700\">← Back to dashboard</button>{!data ? <p>Loading responses...</p> : <><div className=\"mb-8\"><p className=\"text-sm font-bold uppercase tracking-widest text-violet-600\">Responses</p><h1 className=\"mt-2 text-4xl font-black\">{data.form.title}</h1><p className=\"mt-2 text-slate-500\">{data.responses.length} submitted response{data.responses.length === 1 ? \"\" : \"s\"}</p></div>{data.responses.length === 0 ? <div className=\"rounded-2xl border border-dashed border-slate-300 bg-white p-10 text-center text-slate-500\">No responses yet. Share the form to collect the first one.</div> : <div className=\"space-y-4\">{data.responses.map((response: any, index: number) => <article key={response.id} className=\"rounded-2xl border border-slate-200 bg-white p-6 shadow-sm\"><div className=\"mb-5 flex justify-between text-sm\"><strong>Response {data.responses.length - index}</strong><span className=\"text-slate-400\">{new Date(response.submitted_at + \"Z\").toLocaleString()}</span></div><dl className=\"space-y-4\">{data.form.questions.map((question: Question) => <div key={question.id}><dt className=\"text-xs font-bold uppercase tracking-wide text-slate-400\">{question.label}</dt><dd className=\"mt-1 whitespace-pre-wrap text-slate-800\">{Array.isArray(response.answers[question.id]) ? response.answers[question.id].join(\", \") : response.answers[question.id] || <span className=\"italic text-slate-400\">No answer</span>}</dd></div>)}</dl></article>)}</div>}</>}</main></Shell>;\n}\nexport function App() { const [path, setPath] = useState(location.pathname); useEffect(() => { const update = () => setPath(location.pathname); addEventListener(\"popstate\", update); return () => removeEventListener(\"popstate\", update); }, []); const publicMatch = path.match(/^\\/f\\/([^/]+)$/); const responsesMatch = path.match(/^\\/forms\\/(\\d+)\\/responses$/); if (publicMatch) return <PublicForm slug={publicMatch[1]} />; if (responsesMatch) return <Responses id={responsesMatch[1]} />; if (path === \"/new\") return <Builder />; return <Dashboard />; }\n",[],[91,137,152],"7c4f7fd4-5eac-11f1-8b32-1607ee4eb77e",["D",1780423033746],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789538399&sig=d91a7ef87f90c894c3b8d0b9fb95840fd02478ac34a646812058e001671e6ecb","userId","4672fa32-1c6f-4907-899e-57b7e45b1dcb","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019e83d1-d41f-725b-9693-b632d430a029","tursoName","7c4f7fd45eac11f18b321607ee4eb77e","tursoHostname","7c4f7fd45eac11f18b321607ee4eb77e-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789500119686],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_209":205},"org",{"_11":12,"_202":203,"_204":205,"_168":169,"_206":207,"_208":50},"branch",{"_17":154,"_13":16,"_35":68,"_41":160,"_44":36,"_45":198,"_199":52,"_200":42,"_201":56,"_57":14,"_53":12},89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","Potluck Mittal","avatar","https://lh3.googleusercontent.com/a/ACg8ocJYeiSQ8_eyVYtUAg9f5qRwEXzS1AreFm572a1csvZx7c6b_S8=s96-c","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":160,"_13":14,"_37":276,"_48":-5,"_162":50,"_51":52,"_163":52,"_164":165,"_166":167,"_168":169,"_170":65,"_171":72,"_172":-5,"_173":-5,"_174":87,"_55":175,"_176":177,"_178":179,"_180":277,"_182":-5,"_183":184,"_185":184,"_186":187,"_188":187,"_189":187,"_190":184,"_191":184,"_192":278,"_194":279,"_196":280,"_49":50},[249,256,257],"files",[249,250,251,252,253,254,255,256,257],"counts",{"_240":87,"_241":85,"_242":87,"_34":243,"_244":245},[234,235,236],"upstreamProject",{"_35":42,"_13":58,"_164":165,"_166":167,"_51":52,"_192":232},"upstreamBranch",{"_35":36,"_37":230,"_39":231,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],{"_11":54,"_209":233},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789538399&sig=ed57122c136965e1015088c1b79a18d1d4e6250d1eb81abacde1e740f48894e7",{"_35":90,"_13":91,"_64":92,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":93,"_17":87,"_75":94,"_77":-5,"_79":50,"_80":-5,"_18":239},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":86,"_17":87,"_75":24,"_77":88,"_79":50,"_80":-5,"_18":238},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":73,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_18":237},[63],[83],[91],"pulls","branches","forks",{"_246":87,"_248":87},"connections",{"_246":87,"_247":87},"count","unfilledCount","emptyCount",{"_35":90,"_13":91,"_64":92,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":106,"_17":87,"_75":94,"_77":-5,"_79":50,"_80":-5,"_100":274,"_18":275},{"_35":136,"_13":137,"_64":138,"_66":92,"_67":68,"_69":85,"_71":72,"_37":139,"_17":87,"_75":94,"_77":-5,"_79":50,"_80":-5,"_100":272,"_18":273},{"_35":151,"_13":152,"_64":153,"_66":138,"_67":68,"_69":154,"_71":72,"_37":155,"_17":156,"_75":117,"_77":157,"_79":50,"_80":-5,"_100":270,"_18":271},{"_35":144,"_13":145,"_64":146,"_66":138,"_67":68,"_69":85,"_71":72,"_37":147,"_17":87,"_75":117,"_77":148,"_79":50,"_80":-5,"_100":268,"_18":269},{"_35":129,"_13":130,"_64":131,"_66":92,"_67":68,"_69":85,"_71":72,"_37":132,"_17":87,"_75":24,"_77":133,"_79":50,"_80":-5,"_100":266,"_18":267},{"_35":121,"_13":122,"_64":123,"_66":92,"_67":68,"_69":124,"_71":72,"_37":125,"_17":85,"_75":24,"_77":126,"_79":50,"_80":-5,"_100":264,"_18":265},{"_35":113,"_13":114,"_64":115,"_66":92,"_67":68,"_69":85,"_71":72,"_37":116,"_17":87,"_75":117,"_77":118,"_79":50,"_80":-5,"_100":262,"_18":263},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":103,"_17":87,"_75":24,"_77":88,"_79":50,"_80":-5,"_100":260,"_18":261},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":99,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_100":258,"_18":259},[],[63],[],[83],[],[91,114],[],[91,122],[],[91,130],[],[91,137,145],[],[91,137,152],[251,252],[91,137],[250,253,254,255],[91],["D",1780423033746],["D",1789500119686],{"_11":12,"_209":205},{"_11":12,"_202":203,"_204":205,"_168":169,"_206":207,"_208":50},{"_17":154,"_13":16,"_35":68,"_41":160,"_44":36,"_45":198,"_199":52,"_200":42,"_201":56,"_57":14,"_53":12},"ctx",{"_192":-5,"_227":314,"_315":316,"_317":318,"_319":50,"_320":50,"_321":50,"_322":72,"_323":-5,"_324":-7,"_325":-7,"_326":87,"_327":50,"_328":50,"_329":-5,"_330":50,"_331":50,"_332":50,"_333":-5},"ENV",{"_285":286,"_287":288,"_289":16,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Your forms

{form.title}

Build your form

Code