Lead generation 3 steps · 12 fields

Photography booking inquiry

Shoot type, date, location and coverage, so you can quote before the first call.

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

{  "id": "photography-inquiry",  "title": "Book a shoot",  "submit": { "label": "Check availability" },  "steps": [    {      "id": "shoot",      "title": "The shoot",      "fields": [        {          "key": "shootType",          "type": "radio",          "label": "What are we photographing?",          "options": [            { "value": "wedding", "label": "Wedding" },            { "value": "couple", "label": "Engagement or couple" },            { "value": "family", "label": "Family" },            { "value": "portrait", "label": "Portraits or headshots" },            { "value": "event", "label": "Event" },            { "value": "commercial", "label": "Product or commercial" },            { "value": "other", "label": "Other" }          ],          "validation": { "required": true }        },        {          "key": "shootTypeOther",          "type": "text",          "label": "What kind of shoot?",          "show": [{ "field": "shootType", "eq": "other" }],          "validation": { "required": true }        },        {          "key": "date",          "type": "date",          "label": "Date",          "helperText": "Leave empty if you don’t have a date yet."        },        {          "key": "location",          "type": "text",          "label": "Location",          "placeholder": "City or venue",          "validation": { "required": true }        }      ]    },    {      "id": "details",      "title": "Details",      "fields": [        {          "key": "coverage",          "type": "radio",          "label": "How much coverage do you need?",          "options": [            { "value": "under-2h", "label": "Up to 2 hours" },            { "value": "2-4h", "label": "2 to 4 hours" },            { "value": "4-8h", "label": "4 to 8 hours" },            { "value": "8h-plus", "label": "More than 8 hours" },            { "value": "not-sure", "label": "Not sure yet" }          ],          "validation": { "required": true }        },        {          "key": "guests",          "type": "number",          "label": "Approximate number of guests",          "inputMode": "numeric",          "show": [{ "field": "shootType", "in": ["wedding", "event"] }],          "validation": { "min": 1, "max": 5000 }        },        {          "key": "budget",          "type": "radio",          "label": "Budget",          "options": [            { "value": "under-1k", "label": "Under $1,000" },            { "value": "1k-2500", "label": "$1,000 to $2,500" },            { "value": "2500-5k", "label": "$2,500 to $5,000" },            { "value": "5k-plus", "label": "More than $5,000" },            { "value": "not-sure", "label": "Not sure yet" }          ]        },        {          "key": "notes",          "type": "textarea",          "label": "Tell us a bit more",          "rows": 4,          "placeholder": "Style you like, who’s in the photos, must-have shots…"        }      ]    },    {      "id": "contact",      "title": "Your details",      "fields": [        {          "key": "name",          "type": "text",          "label": "Full name",          "validation": { "required": true }        },        {          "key": "email",          "type": "email",          "label": "Email",          "inputMode": "email",          "validation": { "required": true }        },        {          "key": "phone",          "type": "phone",          "label": "Phone",          "inputMode": "tel"        },        {          "key": "heardFrom",          "type": "select",          "label": "How did you hear about us?",          "options": [            { "value": "search", "label": "Search engine" },            { "value": "social", "label": "Social media" },            { "value": "referral", "label": "Friend or colleague" },            { "value": "venue", "label": "A venue or planner" },            { "value": "article", "label": "Article or podcast" },            { "value": "other", "label": "Other" }          ]        }      ]    }  ]}

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.

Photography booking inquiry

Use it with the npm packages ​

Use it with the npm packages