Feedback 1 step · 4 fields
Resolution, CSAT and customer effort after a support conversation, with a follow-up when it went badly.
Get a hosted link and a responses inbox in a minute. No backend, no credit card.
Or set it up yourself
Live preview
{ "id": "support-satisfaction-survey", "title": "How did we do?", "submit": { "label": "Send feedback" }, "fields": [ { "key": "resolved", "type": "radio", "label": "Was your issue resolved?", "layout": "inline", "options": [ { "value": "yes", "label": "Yes" }, { "value": "partly", "label": "Partly" }, { "value": "no", "label": "No" } ], "validation": { "required": true } }, { "key": "csat", "type": "radio", "label": "How satisfied are you with the help you got?", "layout": "inline", "helperText": "1 means very dissatisfied, 5 means very satisfied.", "options": [ { "value": "1", "label": "1" }, { "value": "2", "label": "2" }, { "value": "3", "label": "3" }, { "value": "4", "label": "4" }, { "value": "5", "label": "5" } ], "validation": { "required": true } }, { "key": "effort", "type": "radio", "label": "We made it easy for you to handle your issue", "layout": "inline", "helperText": "1 means strongly disagree, 7 means strongly agree.", "options": [ { "value": "1", "label": "1" }, { "value": "2", "label": "2" }, { "value": "3", "label": "3" }, { "value": "4", "label": "4" }, { "value": "5", "label": "5" }, { "value": "6", "label": "6" }, { "value": "7", "label": "7" } ] }, { "key": "improve", "type": "textarea", "label": "What could we have done better?", "rows": 3, "showAny": [ { "field": "csat", "in": ["1", "2", "3"] }, { "field": "resolved", "in": ["partly", "no"] } ] } ]}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.