Lead generation 3 steps · 13 fields

Rental showing request

For landlords and property managers. Property, move-in date, household, income, pets and showing times.

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

{  "id": "rental-showing-request",  "title": "Request a showing",  "submit": { "label": "Request a showing" },  "steps": [    {      "id": "move",      "title": "The property and your move",      "fields": [        {          "key": "property",          "type": "text",          "label": "Which property?",          "placeholder": "Address or listing ID",          "helperText": "Leave empty if you came from the listing page."        },        {          "key": "moveIn",          "type": "date",          "label": "Earliest move-in date",          "validation": { "required": true }        },        {          "key": "term",          "type": "radio",          "label": "How long do you want to rent?",          "options": [            {              "value": "under-12-months",              "label": "Less than 12 months"            },            { "value": "12-months", "label": "12 months" },            {              "value": "over-12-months",              "label": "More than 12 months"            },            { "value": "flexible", "label": "I’m flexible" }          ],          "validation": { "required": true }        },        {          "key": "occupants",          "type": "number",          "label": "How many people will live there?",          "inputMode": "numeric",          "validation": { "required": true, "min": 1, "max": 20 }        },        {          "key": "income",          "type": "radio",          "label": "Combined monthly household income",          "helperText": "Before tax. We usually look for about three times the rent.",          "options": [            { "value": "under-3k", "label": "Under $3,000" },            { "value": "3k-5k", "label": "$3,000 to $4,999" },            { "value": "5k-8k", "label": "$5,000 to $7,999" },            { "value": "8k-plus", "label": "$8,000 or more" }          ],          "validation": { "required": true }        },        {          "key": "pets",          "type": "radio",          "label": "Do you have pets?",          "layout": "inline",          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" }          ],          "validation": { "required": true }        },        {          "key": "petDetails",          "type": "text",          "label": "What pets?",          "show": [{ "field": "pets", "eq": "yes" }],          "placeholder": "One small dog",          "validation": { "required": true }        },        {          "key": "smoking",          "type": "radio",          "label": "Does anyone in your household smoke?",          "layout": "inline",          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" }          ]        }      ]    },    {      "id": "showing",      "title": "Showing",      "fields": [        {          "key": "slots",          "type": "multiselect",          "label": "When are you usually free?",          "helperText": "Pick all that apply.",          "options": [            { "value": "weekday-morning", "label": "Weekday mornings" },            {              "value": "weekday-afternoon",              "label": "Weekday afternoons"            },            { "value": "weekday-evening", "label": "Weekday evenings" },            { "value": "weekends", "label": "Weekends" }          ],          "validation": { "required": true }        },        {          "key": "questions",          "type": "textarea",          "label": "Questions about the property",          "rows": 3        }      ]    },    {      "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 }        }      ]    }  ]}

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.

Rental showing request

Use it with the npm packages ​

Use it with the npm packages