Applications 3 steps · 13 fields

Volunteer application

Interests, skills, availability and contact details, plus a parent or guardian for volunteers under 18.

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

{  "id": "volunteer-application",  "title": "Volunteer with us",  "submit": { "label": "Send application" },  "steps": [    {      "id": "interests",      "title": "How you’d like to help",      "fields": [        {          "key": "areas",          "type": "multiselect",          "label": "What would you like to help with?",          "helperText": "Pick all that apply.",          "options": [            { "value": "events", "label": "Events" },            { "value": "fundraising", "label": "Fundraising" },            { "value": "admin", "label": "Admin and office" },            { "value": "mentoring", "label": "Mentoring" },            { "value": "outreach", "label": "Community outreach" },            { "value": "anything", "label": "Wherever I’m needed" }          ],          "validation": { "required": true }        },        {          "key": "skills",          "type": "textarea",          "label": "Relevant skills or experience",          "rows": 3        },        {          "key": "why",          "type": "textarea",          "label": "Why would you like to volunteer with us?",          "rows": 3        }      ]    },    {      "id": "availability",      "title": "Availability",      "fields": [        {          "key": "slots",          "type": "multiselect",          "label": "When are you usually free?",          "helperText": "Pick all that apply.",          "options": [            { "value": "weekday-morning", "label": "Weekday mornings" },            {              "value": "weekday-afternoon",              "label": "Weekday afternoons"            },            { "value": "weekday-evening", "label": "Weekday evenings" },            { "value": "weekends", "label": "Weekends" }          ],          "validation": { "required": true }        },        {          "key": "hours",          "type": "radio",          "label": "Hours per month",          "options": [            { "value": "up-to-4", "label": "Up to 4" },            { "value": "5-10", "label": "5 to 10" },            { "value": "11-20", "label": "11 to 20" },            { "value": "20-plus", "label": "More than 20" }          ],          "validation": { "required": true }        },        {          "key": "startDate",          "type": "date",          "label": "When can you start?"        }      ]    },    {      "id": "you",      "title": "About you",      "fields": [        {          "key": "name",          "type": "text",          "label": "Full name",          "validation": { "required": true }        },        {          "key": "email",          "type": "email",          "label": "Email",          "inputMode": "email",          "validation": { "required": true }        },        {          "key": "phone",          "type": "phone",          "label": "Phone",          "inputMode": "tel",          "validation": { "required": true }        },        {          "key": "adult",          "type": "radio",          "label": "Are you 18 or older?",          "layout": "inline",          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" }          ],          "validation": { "required": true }        },        {          "key": "guardianName",          "type": "text",          "label": "Parent or guardian’s name",          "show": [{ "field": "adult", "eq": "no" }],          "validation": { "required": true }        },        {          "key": "guardianPhone",          "type": "phone",          "label": "Parent or guardian’s phone",          "inputMode": "tel",          "show": [{ "field": "adult", "eq": "no" }],          "validation": { "required": true }        },        {          "key": "heardFrom",          "type": "select",          "label": "How did you hear about us?",          "options": [            { "value": "search", "label": "Search engine" },            { "value": "social", "label": "Social media" },            { "value": "referral", "label": "Friend or colleague" },            { "value": "article", "label": "Article or podcast" },            { "value": "other", "label": "Other" }          ]        }      ]    }  ]}

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.

Volunteer application

Use it with the npm packages ​

Use it with the npm packages