Operations 2 steps · 9 fields

Support request

Category, urgency and details first. Account and invoice fields only show when they’re relevant.

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

{  "id": "support-request",  "title": "Contact support",  "submit": { "label": "Send request" },  "steps": [    {      "id": "issue",      "title": "Your issue",      "fields": [        {          "key": "category",          "type": "radio",          "label": "What do you need help with?",          "options": [            { "value": "account", "label": "Account and sign-in" },            { "value": "billing", "label": "Billing" },            { "value": "bug", "label": "Something isn’t working" },            { "value": "how-to", "label": "A how-to question" },            { "value": "other", "label": "Something else" }          ],          "validation": { "required": true }        },        {          "key": "priority",          "type": "radio",          "label": "How urgent is it?",          "layout": "inline",          "helperText": "Urgent means you can’t work at all.",          "defaultValue": "normal",          "options": [            { "value": "low", "label": "Low" },            { "value": "normal", "label": "Normal" },            { "value": "urgent", "label": "Urgent" }          ],          "validation": { "required": true }        },        {          "key": "subject",          "type": "text",          "label": "Subject",          "validation": { "required": true, "maxLength": 120 }        },        {          "key": "description",          "type": "textarea",          "label": "Describe the problem",          "rows": 5,          "validation": { "required": true }        },        {          "key": "attachment",          "type": "text",          "label": "Link to a screenshot or recording",          "placeholder": "https://"        }      ]    },    {      "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": "accountId",          "type": "text",          "label": "Account email or ID, if different",          "show": [            { "field": "category", "in": ["account", "billing"] }          ]        },        {          "key": "invoice",          "type": "text",          "label": "Invoice number",          "show": [{ "field": "category", "eq": "billing" }]        }      ]    }  ]}

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.

Support request

Use it with the npm packages ​

Use it with the npm packages