Registration 2 steps · 7 fields

Event RSVP

Yes or no first. Party size and dietary needs only appear for guests who are coming.

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

{  "id": "event-rsvp",  "title": "RSVP",  "submit": { "label": "Send RSVP" },  "steps": [    {      "id": "reply",      "title": "Your reply",      "fields": [        {          "key": "name",          "type": "text",          "label": "Full name",          "validation": { "required": true }        },        {          "key": "email",          "type": "email",          "label": "Email",          "inputMode": "email",          "validation": { "required": true }        },        {          "key": "attending",          "type": "radio",          "label": "Will you be there?",          "options": [            { "value": "yes", "label": "Yes, I’ll be there" },            { "value": "no", "label": "Sorry, I can’t make it" }          ],          "validation": { "required": true }        }      ]    },    {      "id": "details",      "title": "Your party",      "show": [{ "field": "attending", "eq": "yes" }],      "fields": [        {          "key": "partySize",          "type": "number",          "label": "How many people, including you?",          "inputMode": "numeric",          "defaultValue": 1,          "validation": { "required": true, "min": 1, "max": 10 }        },        {          "key": "guestNames",          "type": "text",          "label": "Names of your guests",          "helperText": "Leave empty if it’s just you."        },        {          "key": "dietary",          "type": "text",          "label": "Dietary restrictions in your party"        },        {          "key": "note",          "type": "textarea",          "label": "A note for the hosts",          "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.

Event RSVP

Use it with the npm packages ​

Use it with the npm packages