Applications 3 steps · 16 fields

Job application

Role, contact details, resume, experience, work eligibility and start date for a single opening.

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

{  "id": "job-application",  "title": "Apply for this role",  "submit": { "label": "Submit application" },  "steps": [    {      "id": "contact",      "title": "Your details",      "fields": [        {          "key": "position",          "type": "select",          "label": "Which role are you applying for?",          "helperText": "Pick the role from our careers page.",          "options": [            {              "value": "frontend-engineer",              "label": "Frontend engineer"            },            { "value": "product-designer", "label": "Product designer" },            { "value": "account-manager", "label": "Account manager" },            { "value": "general", "label": "General application" }          ],          "validation": { "required": true }        },        {          "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"        },        {          "key": "location",          "type": "text",          "label": "Where are you based?",          "placeholder": "City and country",          "validation": { "required": true }        }      ]    },    {      "id": "experience",      "title": "Experience",      "fields": [        {          "key": "resume",          "type": "text",          "label": "Link to your resume",          "placeholder": "https://",          "helperText": "A shared Google Drive or Dropbox PDF works. Make sure anyone with the link can view it.",          "validation": { "required": true }        },        {          "key": "linkedin",          "type": "text",          "label": "LinkedIn profile",          "placeholder": "https://linkedin.com/in/"        },        {          "key": "portfolio",          "type": "text",          "label": "Portfolio, GitHub or personal site",          "placeholder": "https://"        },        {          "key": "years",          "type": "radio",          "label": "Years of relevant experience",          "options": [            { "value": "0-1", "label": "Less than 1" },            { "value": "1-2", "label": "1 to 2" },            { "value": "3-5", "label": "3 to 5" },            { "value": "6-10", "label": "6 to 10" },            { "value": "10-plus", "label": "More than 10" }          ],          "validation": { "required": true }        },        {          "key": "motivation",          "type": "textarea",          "label": "Why are you interested in this role?",          "rows": 4,          "validation": { "required": true, "maxLength": 1500 }        }      ]    },    {      "id": "logistics",      "title": "Work setup and start date",      "fields": [        {          "key": "authorized",          "type": "radio",          "label": "Are you legally authorized to work in the US?",          "layout": "inline",          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" }          ],          "validation": { "required": true }        },        {          "key": "sponsorship",          "type": "radio",          "label": "Will you now or in the future require visa sponsorship?",          "layout": "inline",          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" }          ],          "validation": { "required": true }        },        {          "key": "workSetup",          "type": "radio",          "label": "Preferred work setup",          "options": [            { "value": "on-site", "label": "On-site" },            { "value": "hybrid", "label": "Hybrid" },            { "value": "remote", "label": "Remote" },            { "value": "any", "label": "No preference" }          ],          "validation": { "required": true }        },        {          "key": "startDate",          "type": "date",          "label": "Earliest start date"        },        {          "key": "salary",          "type": "text",          "label": "Salary expectation",          "placeholder": "$85,000 a year"        },        {          "key": "heardFrom",          "type": "select",          "label": "How did you hear about this role?",          "options": [            { "value": "linkedin", "label": "LinkedIn" },            { "value": "job-board", "label": "A job board" },            { "value": "referral", "label": "Someone who works here" },            { "value": "website", "label": "Our website" },            { "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.

Job application

Use it with the npm packages ​

Use it with the npm packages