Registration 1 step · 4 fields

Newsletter signup

Email, first name, topics and an explicit consent checkbox.

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

{  "id": "newsletter-signup",  "title": "Get the newsletter",  "submit": { "label": "Subscribe" },  "fields": [    {      "key": "email",      "type": "email",      "label": "Email",      "inputMode": "email",      "validation": { "required": true }    },    { "key": "firstName", "type": "text", "label": "First name" },    {      "key": "topics",      "type": "multiselect",      "label": "What would you like to hear about?",      "options": [        { "value": "product", "label": "Product updates" },        { "value": "guides", "label": "Guides and tutorials" },        { "value": "events", "label": "Events" },        { "value": "offers", "label": "Offers" }      ]    },    {      "key": "consent",      "type": "checkbox",      "label": "I agree to receive emails and know I can unsubscribe at any time",      "validation": { "required": true }    }  ]}

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.

Newsletter signup

Use it with the npm packages ​

Use it with the npm packages