Applications 4 steps · 22 fields

Pet adoption application

Home, household and experience questions for shelters and rescues.

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

{  "id": "pet-adoption-application",  "title": "Adoption application",  "submit": { "label": "Send application" },  "steps": [    {      "id": "pet",      "title": "The pet",      "fields": [        {          "key": "species",          "type": "radio",          "label": "What are you looking to adopt?",          "layout": "inline",          "options": [            { "value": "dog", "label": "Dog" },            { "value": "cat", "label": "Cat" },            { "value": "other", "label": "Other" }          ],          "validation": { "required": true }        },        {          "key": "speciesOther",          "type": "text",          "label": "What kind of animal?",          "show": [{ "field": "species", "eq": "other" }],          "validation": { "required": true }        },        {          "key": "petName",          "type": "text",          "label": "Which animal are you applying for?",          "helperText": "Name or ID from the listing. Leave empty if you’re open to suggestions."        }      ]    },    {      "id": "home",      "title": "Your home",      "fields": [        {          "key": "homeType",          "type": "radio",          "label": "Type of home",          "options": [            { "value": "house-yard", "label": "House with a yard" },            { "value": "house", "label": "House without a yard" },            { "value": "apartment", "label": "Apartment or condo" },            { "value": "other", "label": "Other" }          ],          "validation": { "required": true }        },        {          "key": "ownership",          "type": "radio",          "label": "Do you own or rent?",          "layout": "inline",          "options": [            { "value": "own", "label": "Own" },            { "value": "rent", "label": "Rent" }          ],          "validation": { "required": true }        },        {          "key": "landlord",          "type": "radio",          "label": "Does your landlord allow pets?",          "layout": "inline",          "show": [{ "field": "ownership", "eq": "rent" }],          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" },            { "value": "not-sure", "label": "Not sure" }          ],          "validation": { "required": true }        },        {          "key": "landlordContact",          "type": "text",          "label": "Landlord or property manager’s name and phone",          "helperText": "We’ll check with them that pets are allowed.",          "show": [{ "field": "ownership", "eq": "rent" }],          "validation": { "required": true }        },        {          "key": "fence",          "type": "radio",          "label": "Is your yard fenced?",          "layout": "inline",          "show": [            { "field": "species", "eq": "dog" },            { "field": "homeType", "eq": "house-yard" }          ],          "options": [            { "value": "yes", "label": "Yes" },            { "value": "partly", "label": "Partly" },            { "value": "no", "label": "No" }          ],          "validation": { "required": true }        },        {          "key": "children",          "type": "radio",          "label": "Do children live with you?",          "layout": "inline",          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "No" }          ],          "validation": { "required": true }        },        {          "key": "childrenAges",          "type": "text",          "label": "How old are they?",          "placeholder": "4 and 9",          "show": [{ "field": "children", "eq": "yes" }],          "validation": { "required": true }        },        {          "key": "household",          "type": "radio",          "label": "Does everyone you live with agree to adopting?",          "options": [            { "value": "yes", "label": "Yes" },            { "value": "no", "label": "Not yet" },            { "value": "alone", "label": "I live alone" }          ],          "validation": { "required": true }        },        {          "key": "otherPets",          "type": "textarea",          "label": "Other pets in your home",          "rows": 2,          "placeholder": "Type, age, and whether they’re spayed or neutered"        }      ]    },    {      "id": "experience",      "title": "Daily life",      "fields": [        {          "key": "experience",          "type": "radio",          "label": "Experience with pets",          "options": [            { "value": "first", "label": "This would be my first" },            { "value": "before", "label": "I’ve had pets before" },            { "value": "now", "label": "I have pets now" }          ],          "validation": { "required": true }        },        {          "key": "vet",          "type": "text",          "label": "Your vet’s name or clinic",          "helperText": "We may call them for a reference.",          "show": [{ "field": "experience", "in": ["before", "now"] }]        },        {          "key": "activity",          "type": "radio",          "label": "How active is your household?",          "show": [{ "field": "species", "eq": "dog" }],          "options": [            { "value": "home", "label": "Mostly at home" },            { "value": "walks", "label": "Daily walks" },            {              "value": "very-active",              "label": "Very active, with runs or hikes"            }          ],          "validation": { "required": true }        },        {          "key": "alone",          "type": "radio",          "label": "How many hours a day would the pet be alone?",          "options": [            { "value": "under-4", "label": "Less than 4" },            { "value": "4-8", "label": "4 to 8" },            { "value": "8-plus", "label": "More than 8" }          ],          "validation": { "required": true }        },        {          "key": "why",          "type": "textarea",          "label": "Why do you want to adopt now?",          "rows": 3        }      ]    },    {      "id": "contact",      "title": "Your details",      "fields": [        {          "key": "adult",          "type": "checkbox",          "label": "I’m 18 or older",          "validation": { "required": true }        },        {          "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": "address",          "type": "textarea",          "label": "Home address",          "rows": 2,          "helperText": "We arrange a home visit before most adoptions.",          "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.

Pet adoption application

Use it with the npm packages ​

Use it with the npm packages