Intake 3 steps · 13 fields
Focus area, goals and preferred format before a first coaching session.
Get a hosted link and a responses inbox in a minute. No backend, no credit card.
Or set it up yourself
Live preview
{ "id": "coaching-intake", "title": "Coaching intake", "submit": { "label": "Send" }, "steps": [ { "id": "goals", "title": "Your goals", "fields": [ { "key": "focus", "type": "radio", "label": "What do you want to work on?", "options": [ { "value": "career", "label": "Career" }, { "value": "leadership", "label": "Leadership" }, { "value": "business", "label": "Running a business" }, { "value": "habits", "label": "Health and habits" }, { "value": "relationships", "label": "Life and relationships" }, { "value": "other", "label": "Other" } ], "validation": { "required": true } }, { "key": "focusOther", "type": "text", "label": "Which area?", "show": [{ "field": "focus", "eq": "other" }], "validation": { "required": true } }, { "key": "goal", "type": "textarea", "label": "What would you like to be different in three months?", "rows": 4, "validation": { "required": true } }, { "key": "tried", "type": "textarea", "label": "What have you tried so far?", "rows": 3 } ] }, { "id": "format", "title": "Format", "fields": [ { "key": "format", "type": "radio", "label": "How would you like to meet?", "layout": "inline", "options": [ { "value": "video", "label": "Video call" }, { "value": "in-person", "label": "In person" }, { "value": "phone", "label": "Phone" } ], "validation": { "required": true } }, { "key": "frequency", "type": "radio", "label": "How often?", "options": [ { "value": "weekly", "label": "Weekly" }, { "value": "biweekly", "label": "Every two weeks" }, { "value": "monthly", "label": "Monthly" }, { "value": "not-sure", "label": "Not sure yet" } ] }, { "key": "slots", "type": "multiselect", "label": "When are you usually free?", "helperText": "Pick all that apply.", "options": [ { "value": "weekday-morning", "label": "Weekday mornings" }, { "value": "weekday-afternoon", "label": "Weekday afternoons" }, { "value": "weekday-evening", "label": "Weekday evenings" }, { "value": "weekends", "label": "Weekends" } ], "validation": { "required": true } }, { "key": "budget", "type": "radio", "label": "Monthly budget", "options": [ { "value": "under-200", "label": "Under $200" }, { "value": "200-500", "label": "$200 to $500" }, { "value": "500-1000", "label": "$500 to $1,000" }, { "value": "1000-plus", "label": "More than $1,000" }, { "value": "discuss", "label": "I’d rather discuss it" } ] } ] }, { "id": "contact", "title": "Your details", "fields": [ { "key": "name", "type": "text", "label": "Full name", "validation": { "required": true } }, { "key": "email", "type": "email", "label": "Email", "inputMode": "email", "validation": { "required": true } }, { "key": "phone", "type": "phone", "label": "Phone", "inputMode": "tel" }, { "key": "timezone", "type": "text", "label": "Time zone", "placeholder": "City or UTC offset" }, { "key": "heardFrom", "type": "select", "label": "How did you hear about us?", "options": [ { "value": "search", "label": "Search engine" }, { "value": "social", "label": "Social media" }, { "value": "referral", "label": "Friend or colleague" }, { "value": "article", "label": "Article or podcast" }, { "value": "other", "label": "Other" } ] } ] } ]}Copy the JSON into a file in your app, install the renderer and pass the definition to it. The same JSON works with @formhaus/vue.
npm i @formhaus/core @formhaus/reactimport { FormRenderer } from '@formhaus/react';
import '@formhaus/core/style.css';
import definition from './form.json';
export function Form() {
return (
<FormRenderer
definition={definition}
onSubmit={(values) => console.log(values)}
/>
);
}See Getting started for validation, steps and custom components.