Skip to content
All templates

Feedback 1 step · 9 fields

Cancellation survey

Why customers leave, with follow-ups for price, missing features, usability and switching to a competitor.

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 · 84 lines
{  "id": "cancellation-survey",  "title": "Before you go",  "submit": { "label": "Send and cancel" },  "fields": [    {      "key": "reason",      "type": "radio",      "label": "What’s the main reason you’re canceling?",      "options": [        { "value": "price", "label": "It’s too expensive" },        {          "value": "missing-feature",          "label": "It’s missing something I need"        },        { "value": "hard-to-use", "label": "It’s hard to use" },        { "value": "quality", "label": "Bugs or reliability problems" },        { "value": "support", "label": "I wasn’t happy with support" },        {          "value": "switching",          "label": "I’m switching to another product"        },        { "value": "no-need", "label": "I don’t need it anymore" },        { "value": "other", "label": "Other" }      ],      "validation": { "required": true }    },    {      "key": "feature",      "type": "text",      "label": "What was missing?",      "show": [{ "field": "reason", "eq": "missing-feature" }]    },    {      "key": "hardPart",      "type": "text",      "label": "What was hard to use?",      "show": [{ "field": "reason", "eq": "hard-to-use" }]    },    {      "key": "competitor",      "type": "text",      "label": "Which product are you moving to?",      "show": [{ "field": "reason", "eq": "switching" }]    },    {      "key": "fairPrice",      "type": "text",      "label": "What price would have felt fair?",      "placeholder": "$ per month",      "show": [{ "field": "reason", "eq": "price" }]    },    {      "key": "reasonOther",      "type": "text",      "label": "What’s the reason?",      "show": [{ "field": "reason", "eq": "other" }],      "validation": { "required": true }    },    {      "key": "return",      "type": "radio",      "label": "Would you consider coming back?",      "layout": "inline",      "options": [        { "value": "yes", "label": "Yes" },        { "value": "maybe", "label": "Maybe" },        { "value": "no", "label": "No" }      ],      "validation": { "required": true }    },    {      "key": "anything",      "type": "textarea",      "label": "Anything else we should know?",      "rows": 3    },    {      "key": "followUp",      "type": "checkbox",      "label": "You can email me about my answers"    }  ]}

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