Quizzes 6 steps · 13 fields

Agency fit quiz

Qualifies leads in a few taps and sends small budgets to a free guides signup instead of a sales call.

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 · 155 lines

{  "id": "agency-fit-quiz",  "title": "Are we a good fit?",  "submit": { "label": "Send" },  "steps": [    {      "id": "stage",      "title": "Where is your business today?",      "next": false,      "fields": [        {          "key": "stage",          "type": "radio",          "label": "Business stage",          "options": [            { "value": "idea", "label": "Just an idea" },            { "value": "launched", "label": "Launched, no revenue yet" },            { "value": "growing", "label": "Growing" },            { "value": "established", "label": "Established" }          ],          "validation": { "required": true },          "autoAdvance": true        }      ]    },    {      "id": "need",      "title": "What do you need most?",      "fields": [        {          "key": "need",          "type": "radio",          "label": "Main need",          "options": [            { "value": "brand", "label": "Brand and identity" },            { "value": "website", "label": "Website" },            { "value": "product", "label": "App or product design" },            { "value": "marketing", "label": "Marketing and growth" },            { "value": "other", "label": "Something else" }          ],          "validation": { "required": true }        },        {          "key": "needOther",          "type": "text",          "label": "What do you need?",          "show": [{ "field": "need", "eq": "other" }],          "validation": { "required": true }        }      ]    },    {      "id": "timeline",      "title": "When do you want to start?",      "next": false,      "fields": [        {          "key": "timeline",          "type": "radio",          "label": "Timeline",          "options": [            { "value": "asap", "label": "As soon as possible" },            { "value": "1-3-months", "label": "In 1 to 3 months" },            { "value": "3-6-months", "label": "In 3 to 6 months" },            { "value": "later", "label": "Later or not sure yet" }          ],          "validation": { "required": true },          "autoAdvance": true        }      ]    },    {      "id": "budget",      "title": "What budget do you have in mind?",      "next": false,      "fields": [        {          "key": "budget",          "type": "radio",          "label": "Budget",          "options": [            { "value": "under-5k", "label": "Under $5,000" },            { "value": "5k-15k", "label": "$5,000 to $15,000" },            { "value": "15k-40k", "label": "$15,000 to $40,000" },            { "value": "40k-plus", "label": "More than $40,000" }          ],          "validation": { "required": true },          "autoAdvance": true        }      ],      "routes": [        {          "to": "resources",          "show": [{ "field": "budget", "eq": "under-5k" }]        },        { "to": "call" }      ]    },    {      "id": "resources",      "title": "We’ll send you our free guides",      "description": "Our projects usually start at $5,000. These guides will get you a long way on your own.",      "fields": [        {          "key": "guideEmail",          "type": "email",          "label": "Email",          "inputMode": "email",          "validation": { "required": true }        },        { "key": "firstName", "type": "text", "label": "First name" },        {          "key": "consent",          "type": "checkbox",          "label": "Email me the guides and occasional tips",          "validation": { "required": true }        }      ],      "routes": [{ "to": null }]    },    {      "id": "call",      "title": "Book a call",      "description": "Looks like a good fit. Leave your details and we’ll suggest a time.",      "fields": [        {          "key": "name",          "type": "text",          "label": "Full name",          "validation": { "required": true }        },        {          "key": "email",          "type": "email",          "label": "Work email",          "inputMode": "email",          "validation": { "required": true }        },        { "key": "company", "type": "text", "label": "Company" },        {          "key": "website",          "type": "text",          "label": "Website",          "placeholder": "https://"        },        {          "key": "context",          "type": "textarea",          "label": "Anything we should know before the call?",          "rows": 3        }      ]    }  ]}

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.

Agency fit quiz

Use it with the npm packages ​

Use it with the npm packages