Lead generation 2 steps · 10 fields

Product demo request

For SaaS sales teams. Qualifies by role, company size and timing before asking for a work email.

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

{  "id": "demo-request",  "title": "Book a demo",  "submit": { "label": "Request a demo" },  "steps": [    {      "id": "needs",      "title": "About your team",      "fields": [        {          "key": "role",          "type": "select",          "label": "What best describes your role?",          "options": [            { "value": "engineering", "label": "Engineering" },            { "value": "product", "label": "Product" },            { "value": "design", "label": "Design" },            { "value": "marketing", "label": "Marketing" },            { "value": "sales", "label": "Sales" },            { "value": "support", "label": "Customer support" },            { "value": "operations", "label": "Operations" },            { "value": "executive", "label": "Founder or executive" },            { "value": "other", "label": "Other" }          ],          "validation": { "required": true }        },        {          "key": "companySize",          "type": "radio",          "label": "Company size",          "options": [            { "value": "solo", "label": "Just me" },            { "value": "2-10", "label": "2 to 10" },            { "value": "11-50", "label": "11 to 50" },            { "value": "51-200", "label": "51 to 200" },            { "value": "201-1000", "label": "201 to 1,000" },            { "value": "1000-plus", "label": "More than 1,000" }          ],          "validation": { "required": true }        },        {          "key": "timing",          "type": "radio",          "label": "When are you looking to start?",          "options": [            { "value": "this-month", "label": "This month" },            { "value": "this-quarter", "label": "This quarter" },            { "value": "later", "label": "Later" },            { "value": "exploring", "label": "Just exploring" }          ],          "validation": { "required": true }        },        {          "key": "currentTool",          "type": "text",          "label": "What do you use today?"        },        {          "key": "agenda",          "type": "textarea",          "label": "What would you like to see in the demo?",          "rows": 3        }      ]    },    {      "id": "contact",      "title": "Your details",      "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",          "validation": { "required": true }        },        {          "key": "website",          "type": "text",          "label": "Company website",          "placeholder": "https://"        },        {          "key": "phone",          "type": "phone",          "label": "Phone",          "inputMode": "tel"        }      ]    }  ]}

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.

Product demo request

Use it with the npm packages ​

Use it with the npm packages