Intake 2 steps · 13 fields

Legal consultation request

Area of law, deadline, a short summary and a conflict check. Nothing confidential up front.

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

{  "id": "legal-consultation-request",  "title": "Request a consultation",  "submit": { "label": "Request a consultation" },  "steps": [    {      "id": "matter",      "title": "Your matter",      "fields": [        {          "key": "area",          "type": "select",          "label": "Area of law",          "options": [            { "value": "family", "label": "Family and divorce" },            { "value": "employment", "label": "Employment" },            { "value": "housing", "label": "Landlord and tenant" },            { "value": "immigration", "label": "Immigration" },            { "value": "business", "label": "Business and contracts" },            {              "value": "estates",              "label": "Estate planning and probate"            },            { "value": "personal-injury", "label": "Personal injury" },            { "value": "criminal", "label": "Criminal defense" },            { "value": "other", "label": "Something else or not sure" }          ],          "validation": { "required": true }        },        {          "key": "state",          "type": "text",          "label": "Which state is this matter in?",          "validation": { "required": true }        },        {          "key": "side",          "type": "radio",          "label": "Which describes you best?",          "options": [            { "value": "claimant", "label": "I want to bring a claim" },            {              "value": "respondent",              "label": "A claim was brought against me"            },            { "value": "neither", "label": "Neither, or I’m not sure" }          ]        },        {          "key": "urgency",          "type": "radio",          "label": "Is there a deadline?",          "options": [            { "value": "two-weeks", "label": "Yes, within 2 weeks" },            { "value": "later", "label": "Yes, later than that" },            { "value": "none", "label": "No deadline" },            { "value": "not-sure", "label": "I’m not sure" }          ],          "validation": { "required": true }        },        {          "key": "deadlineDate",          "type": "date",          "label": "Deadline date",          "helperText": "A court date, filing deadline or the date on a letter you received.",          "show": [{ "field": "urgency", "in": ["two-weeks", "later"] }]        },        {          "key": "otherParty",          "type": "text",          "label": "Name of the other party",          "helperText": "Person or company, if there is one. We use it to check for conflicts of interest."        },        {          "key": "summary",          "type": "textarea",          "label": "What do you need help with?",          "rows": 3,          "helperText": "A few sentences is enough. Please don’t share confidential details until we confirm we can help.",          "validation": { "required": true, "maxLength": 500 }        }      ]    },    {      "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",          "validation": { "required": true }        },        {          "key": "meeting",          "type": "radio",          "label": "How would you like to meet?",          "layout": "inline",          "options": [            { "value": "in-person", "label": "In person" },            { "value": "video", "label": "Video call" },            { "value": "phone", "label": "Phone" }          ],          "validation": { "required": true }        },        {          "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": "article", "label": "Article or podcast" },            { "value": "other", "label": "Other" }          ]        },        {          "key": "notClient",          "type": "checkbox",          "label": "I understand that sending this form does not make me a client",          "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.

Legal consultation request

Use it with the npm packages ​

Use it with the npm packages