Registration 2 steps · 9 fields

Workshop registration

Attendee details first, then attendance mode, experience level, and dietary and access needs.

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

{  "id": "workshop-registration",  "title": "Register for the workshop",  "submit": { "label": "Register" },  "steps": [    {      "id": "you",      "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": "company", "type": "text", "label": "Company" },        { "key": "jobTitle", "type": "text", "label": "Job title" }      ]    },    {      "id": "attendance",      "title": "Attendance",      "fields": [        {          "key": "attendance",          "type": "radio",          "label": "How will you attend?",          "layout": "inline",          "options": [            { "value": "in-person", "label": "In person" },            { "value": "online", "label": "Online" }          ],          "validation": { "required": true }        },        {          "key": "level",          "type": "radio",          "label": "Your experience with the topic",          "options": [            { "value": "new", "label": "New to it" },            { "value": "some", "label": "Some experience" },            { "value": "advanced", "label": "Advanced" }          ],          "validation": { "required": true }        },        {          "key": "dietary",          "type": "text",          "label": "Dietary restrictions",          "show": [{ "field": "attendance", "eq": "in-person" }]        },        {          "key": "access",          "type": "textarea",          "label": "Accessibility needs",          "rows": 2,          "helperText": "Anything that would help you take part fully."        },        {          "key": "updates",          "type": "checkbox",          "label": "Email me about future workshops"        }      ]    }  ]}

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.

Workshop registration

Use it with the npm packages ​

Use it with the npm packages