Skip to content
All templates

Surveys 3 steps · 13 fields

User research screener

Finds interview participants by role, product usage and availability.

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 · 165 lines
{  "id": "user-research-screener",  "title": "Take part in research",  "submit": { "label": "Sign me up" },  "steps": [    {      "id": "background",      "title": "About you",      "fields": [        {          "key": "role",          "type": "select",          "label": "What best describes your role?",          "options": [            { "value": "engineering", "label": "Engineering" },            { "value": "product", "label": "Product" },            { "value": "design", "label": "Design" },            { "value": "marketing", "label": "Marketing" },            { "value": "sales", "label": "Sales" },            { "value": "support", "label": "Customer support" },            { "value": "operations", "label": "Operations" },            { "value": "executive", "label": "Founder or executive" },            { "value": "other", "label": "Other" }          ],          "validation": { "required": true }        },        {          "key": "companySize",          "type": "radio",          "label": "Company size",          "options": [            { "value": "solo", "label": "Just me" },            { "value": "2-10", "label": "2 to 10" },            { "value": "11-50", "label": "11 to 50" },            { "value": "51-200", "label": "51 to 200" },            { "value": "201-1000", "label": "201 to 1,000" },            { "value": "1000-plus", "label": "More than 1,000" }          ],          "validation": { "required": true }        },        {          "key": "usage",          "type": "radio",          "label": "How often do you use our product?",          "options": [            { "value": "daily", "label": "Daily" },            { "value": "weekly", "label": "Weekly" },            { "value": "monthly", "label": "Monthly" },            { "value": "rarely", "label": "Rarely" },            { "value": "never", "label": "I haven’t used it yet" }          ],          "validation": { "required": true }        },        {          "key": "useCase",          "type": "textarea",          "label": "What do you mainly use it for?",          "rows": 3,          "show": [            {              "field": "usage",              "in": ["daily", "weekly", "monthly", "rarely"]            }          ],          "validation": { "required": true }        },        {          "key": "industry",          "type": "radio",          "label": "Do you or anyone in your household work in market research, UX or advertising?",          "layout": "inline",          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" }          ],          "validation": { "required": true }        },        {          "key": "recentStudy",          "type": "radio",          "label": "Have you taken part in a research study in the last 6 months?",          "layout": "inline",          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" }          ],          "validation": { "required": true }        }      ]    },    {      "id": "availability",      "title": "Availability",      "description": "Sessions take about 45 minutes. Participants get a $50 gift card as a thank you.",      "fields": [        {          "key": "format",          "type": "radio",          "label": "How would you like to take part?",          "layout": "inline",          "options": [            { "value": "video", "label": "Video call" },            { "value": "in-person", "label": "In person" },            { "value": "either", "label": "Either" }          ],          "validation": { "required": true }        },        {          "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": "timezone",          "type": "text",          "label": "Time zone",          "placeholder": "City or UTC offset"        }      ]    },    {      "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": "country",          "type": "text",          "label": "Country",          "helperText": "Gift cards are sent in local currency.",          "validation": { "required": true }        },        {          "key": "consent",          "type": "checkbox",          "label": "I agree to be contacted about research sessions",          "validation": { "required": true }        }      ]    }  ]}

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.

sh
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.

Formhaus is MIT licensed. Legal