Skip to content
All templates

Feedback 1 step · 4 fields

Support satisfaction survey

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

Form definition JSON · 60 lines
{  "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"] }      ]    }  ]}

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