Lead generation 1 step · 4 fields

Contact form

Name, email, topic and message. The form almost every website needs.

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

{  "id": "contact-form",  "title": "Contact us",  "submit": { "label": "Send message" },  "fields": [    {      "key": "name",      "type": "text",      "label": "Name",      "validation": { "required": true }    },    {      "key": "email",      "type": "email",      "label": "Email",      "inputMode": "email",      "validation": { "required": true }    },    {      "key": "topic",      "type": "select",      "label": "Topic",      "options": [        { "value": "question", "label": "General question" },        { "value": "sales", "label": "Sales" },        { "value": "support", "label": "Support" },        { "value": "press", "label": "Press and media" },        { "value": "other", "label": "Other" }      ]    },    {      "key": "message",      "type": "textarea",      "label": "Message",      "rows": 5,      "validation": { "required": true, "maxLength": 2000 }    }  ]}

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.

Contact form

Use it with the npm packages ​

Use it with the npm packages