Feedback 2 steps · 10 fields

Testimonial request

Collects a short quote, the result a client got and permission to publish it.

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

{  "id": "testimonial-request",  "title": "Share your experience",  "submit": { "label": "Send testimonial" },  "steps": [    {      "id": "story",      "title": "Your experience",      "fields": [        {          "key": "before",          "type": "textarea",          "label": "What was the situation before you worked with us?",          "rows": 3        },        {          "key": "result",          "type": "textarea",          "label": "What changed for you?",          "rows": 3,          "validation": { "required": true }        },        {          "key": "rating",          "type": "radio",          "label": "How would you rate working with us?",          "layout": "inline",          "helperText": "1 is poor, 5 is excellent.",          "options": [            { "value": "1", "label": "1" },            { "value": "2", "label": "2" },            { "value": "3", "label": "3" },            { "value": "4", "label": "4" },            { "value": "5", "label": "5" }          ]        },        {          "key": "quote",          "type": "textarea",          "label": "Your testimonial in a sentence or two",          "rows": 3,          "validation": { "required": true, "maxLength": 400 }        }      ]    },    {      "id": "you",      "title": "About you",      "fields": [        {          "key": "name",          "type": "text",          "label": "Full name",          "validation": { "required": true }        },        { "key": "jobTitle", "type": "text", "label": "Job title" },        { "key": "company", "type": "text", "label": "Company" },        {          "key": "email",          "type": "email",          "label": "Email",          "inputMode": "email",          "helperText": "Only if we should send you the final version to approve."        },        {          "key": "permission",          "type": "radio",          "label": "How can we use your testimonial?",          "options": [            {              "value": "full",              "label": "With my name, title and company"            },            {              "value": "first-name",              "label": "With my first name only"            },            { "value": "anonymous", "label": "Anonymously" },            { "value": "private", "label": "Please don’t publish it" }          ],          "validation": { "required": true }        },        {          "key": "photo",          "type": "text",          "label": "Link to a headshot",          "placeholder": "https://",          "show": [{ "field": "permission", "eq": "full" }]        }      ]    }  ]}

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.

Testimonial request

Use it with the npm packages ​

Use it with the npm packages