Quizzes 7 steps · 9 fields

Training plan quiz

Goal, experience, schedule and equipment in one-tap questions, then an email to send the plan.

Launch for free

Get a hosted link and a responses inbox in a minute. No backend, no credit card.

Or set it up yourself

Live preview

Form definition JSON · 144 lines

{  "id": "training-plan-quiz",  "title": "Find your training plan",  "submit": { "label": "Get my plan" },  "steps": [    {      "id": "goal",      "title": "What’s your main goal?",      "next": false,      "fields": [        {          "key": "goal",          "type": "radio",          "label": "Goal",          "options": [            { "value": "lose-weight", "label": "Lose weight" },            { "value": "strength", "label": "Get stronger" },            { "value": "endurance", "label": "Build endurance" },            { "value": "event", "label": "Train for an event or race" },            { "value": "health", "label": "Feel healthier overall" }          ],          "validation": { "required": true },          "autoAdvance": true        }      ]    },    {      "id": "experience",      "title": "How much do you train now?",      "next": false,      "fields": [        {          "key": "experience",          "type": "radio",          "label": "Current training",          "options": [            { "value": "none", "label": "Not at all" },            { "value": "sometimes", "label": "Once or twice a week" },            {              "value": "regular",              "label": "Three times a week or more"            }          ],          "validation": { "required": true },          "autoAdvance": true        }      ]    },    {      "id": "days",      "title": "How many days a week can you train?",      "next": false,      "fields": [        {          "key": "days",          "type": "radio",          "label": "Days per week",          "options": [            { "value": "2", "label": "2 days" },            { "value": "3", "label": "3 days" },            { "value": "4", "label": "4 days" },            { "value": "5-plus", "label": "5 days or more" }          ],          "validation": { "required": true },          "autoAdvance": true        }      ]    },    {      "id": "time",      "title": "How much time do you have per session?",      "next": false,      "fields": [        {          "key": "time",          "type": "radio",          "label": "Time per session",          "options": [            { "value": "under-30", "label": "Less than 30 minutes" },            { "value": "30-45", "label": "30 to 45 minutes" },            { "value": "45-60", "label": "45 to 60 minutes" },            { "value": "60-plus", "label": "More than an hour" }          ],          "validation": { "required": true },          "autoAdvance": true        }      ]    },    {      "id": "place",      "title": "Where will you train?",      "next": false,      "fields": [        {          "key": "place",          "type": "radio",          "label": "Location",          "options": [            { "value": "home-none", "label": "At home, no equipment" },            { "value": "home-some", "label": "At home, some equipment" },            { "value": "gym", "label": "At a gym" },            { "value": "outdoors", "label": "Outdoors" }          ],          "validation": { "required": true },          "autoAdvance": true        }      ]    },    {      "id": "limitations",      "title": "Any injuries or limitations?",      "description": "We’ll leave out exercises that could make them worse.",      "fields": [        {          "key": "limitations",          "type": "textarea",          "label": "Injuries or limitations",          "rows": 2,          "placeholder": "Bad knee, recovering from back pain…",          "helperText": "Leave empty if there’s nothing to note."        }      ]    },    {      "id": "send",      "title": "Where should we send your plan?",      "fields": [        {          "key": "email",          "type": "email",          "label": "Email",          "inputMode": "email",          "validation": { "required": true }        },        { "key": "firstName", "type": "text", "label": "First name" },        {          "key": "tips",          "type": "checkbox",          "label": "Also send me weekly training tips"        }      ]    }  ]}

Use it with the npm packages

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/react

tsx

import { 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.

Training plan quiz

Use it with the npm packages ​

Use it with the npm packages