Surveys 3 steps · 13 fields
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
{ "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 } } ] } ]}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/reactimport { 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.