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",[],[169,227,229],"7c7ddfbe-5eac-11f1-8b32-1607ee4eb77e",["D",1780423033746],[186,187],[169,227],["D",1780423033746],[185,188,189,190],[169],["D",1780423033746],["D",1789500119686],{"_105":104,"_113":109},{"_105":104,"_106":107,"_108":109,"_18":56,"_110":111,"_112":25},{"_13":90,"_32":91,"_43":42,"_92":44,"_93":94,"_95":96,"_97":50,"_98":99,"_100":101,"_102":45,"_103":104},"ctx",{"_83":-5,"_135":281,"_282":283,"_284":285,"_286":25,"_287":25,"_288":25,"_289":60,"_290":-5,"_291":-7,"_292":-7,"_293":64,"_294":25,"_295":25,"_296":-5,"_297":25,"_298":25,"_299":25,"_300":-5},"ENV",{"_252":253,"_254":255,"_256":91,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280},"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

Diff · v4