Feedback 1 step · 7 fields

Feature request

Starts with the problem, then the idea, how much it hurts and how often it comes up.

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

{  "id": "feature-request",  "title": "Request a feature",  "submit": { "label": "Send request" },  "fields": [    {      "key": "area",      "type": "select",      "label": "Which part of the product?",      "options": [        { "value": "core", "label": "Core product" },        { "value": "integrations", "label": "Integrations" },        { "value": "api", "label": "API" },        { "value": "reporting", "label": "Reports and analytics" },        { "value": "account", "label": "Account and billing" },        { "value": "other", "label": "Something else" }      ],      "validation": { "required": true }    },    {      "key": "problem",      "type": "textarea",      "label": "What are you trying to do?",      "rows": 4,      "helperText": "Describe the task or problem, not the solution yet.",      "validation": { "required": true }    },    {      "key": "workaround",      "type": "textarea",      "label": "How do you handle it today?",      "rows": 3    },    {      "key": "idea",      "type": "textarea",      "label": "What would you like to see?",      "rows": 3    },    {      "key": "impact",      "type": "radio",      "label": "How much does this affect you?",      "layout": "inline",      "options": [        { "value": "nice", "label": "Nice to have" },        { "value": "slows", "label": "It slows me down" },        { "value": "blocks", "label": "It blocks my work" }      ],      "validation": { "required": true }    },    {      "key": "frequency",      "type": "radio",      "label": "How often does it come up?",      "layout": "inline",      "options": [        { "value": "daily", "label": "Daily" },        { "value": "weekly", "label": "Weekly" },        { "value": "monthly", "label": "Monthly" },        { "value": "rarely", "label": "Rarely" }      ],      "validation": { "required": true }    },    {      "key": "email",      "type": "email",      "label": "Email",      "inputMode": "email",      "helperText": "Only if you’d like us to follow up."    }  ]}

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.

Feature request

Use it with the npm packages ​

Use it with the npm packages