Lead generation 4 steps · 15 fields

Website project inquiry

For studios and freelancers. Asks about the project, scope and budget before contact details.

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

{  "id": "website-project-inquiry",  "title": "Start a website project",  "submit": { "label": "Send inquiry" },  "steps": [    {      "id": "project",      "title": "Your project",      "fields": [        {          "key": "projectType",          "type": "radio",          "label": "What do you need?",          "options": [            { "value": "new-site", "label": "A new website" },            {              "value": "redesign",              "label": "A redesign of an existing site"            },            { "value": "landing-page", "label": "A landing page" },            { "value": "online-store", "label": "An online store" },            { "value": "web-app", "label": "A web app" },            { "value": "other", "label": "Other" }          ],          "validation": { "required": true }        },        {          "key": "projectTypeOther",          "type": "text",          "label": "What kind of project is it?",          "show": [{ "field": "projectType", "eq": "other" }],          "validation": { "required": true }        },        {          "key": "currentSite",          "type": "text",          "label": "Current website",          "placeholder": "https://",          "show": [            {              "field": "projectType",              "in": ["redesign", "online-store"]            }          ]        },        {          "key": "goals",          "type": "textarea",          "label": "What should the site do for your business?",          "rows": 4,          "placeholder": "Sell online, get more bookings, look more credible…",          "validation": { "required": true }        }      ]    },    {      "id": "scope",      "title": "Scope",      "fields": [        {          "key": "services",          "type": "multiselect",          "label": "Which services do you need?",          "helperText": "Pick all that apply.",          "options": [            { "value": "design", "label": "Design" },            { "value": "development", "label": "Development" },            { "value": "copywriting", "label": "Copywriting" },            { "value": "seo", "label": "SEO" },            {              "value": "maintenance",              "label": "Hosting and maintenance"            }          ],          "validation": { "required": true }        },        {          "key": "pages",          "type": "radio",          "label": "Roughly how many pages?",          "options": [            { "value": "1-5", "label": "1 to 5" },            { "value": "6-15", "label": "6 to 15" },            { "value": "16-40", "label": "16 to 40" },            { "value": "40-plus", "label": "More than 40" },            { "value": "not-sure", "label": "Not sure yet" }          ],          "validation": { "required": true }        },        {          "key": "content",          "type": "radio",          "label": "Is your content ready?",          "options": [            {              "value": "ready",              "label": "Yes, text and images are ready"            },            { "value": "partly", "label": "Partly" },            {              "value": "need-help",              "label": "No, we need help with it"            }          ],          "validation": { "required": true }        },        {          "key": "examples",          "type": "textarea",          "label": "Sites you like",          "rows": 3,          "placeholder": "Links and what you like about each one"        }      ]    },    {      "id": "budget",      "title": "Budget and timing",      "fields": [        {          "key": "budget",          "type": "radio",          "label": "Budget",          "options": [            { "value": "under-5k", "label": "Under $5,000" },            { "value": "5k-15k", "label": "$5,000 to $15,000" },            { "value": "15k-40k", "label": "$15,000 to $40,000" },            { "value": "40k-plus", "label": "More than $40,000" },            { "value": "not-sure", "label": "Not sure yet" }          ],          "validation": { "required": true }        },        {          "key": "timeline",          "type": "radio",          "label": "When do you want to start?",          "options": [            { "value": "asap", "label": "As soon as possible" },            { "value": "1-3-months", "label": "In 1 to 3 months" },            { "value": "3-6-months", "label": "In 3 to 6 months" },            { "value": "later", "label": "Later than that" },            { "value": "flexible", "label": "I’m flexible" }          ],          "validation": { "required": true }        },        {          "key": "deadline",          "type": "date",          "label": "Hard deadline",          "helperText": "Leave empty if there isn’t one."        }      ]    },    {      "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": "company", "type": "text", "label": "Company" },        {          "key": "phone",          "type": "phone",          "label": "Phone",          "inputMode": "tel"        }      ]    }  ]}

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.

Website project inquiry

Use it with the npm packages ​

Use it with the npm packages