Tenant Application Form
Use this simple HTML tenant application form to easily gather prospective tenant details and streamline your rental approval process.
Preview
Code
HTML
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="fs-form fs-layout__2-column"
target="_top"
method="POST"
>
<div class="fs-field">
<label class="fs-label" for="applicant-name">Applicant's Name</label>
<input
class="fs-input"
id="applicant-name"
name="applicant-name"
placeholder="Enter your full name"
required
/>
</div>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="email">Email Address</label>
<input class="fs-input" id="email" name="email" required />
</div>
<div class="fs-field">
<label class="fs-label" for="phone-number">Phone Number</label>
<input class="fs-input" id="phone-number" name="phone-number" required />
</div>
</fieldset>
<div class="fs-field">
<label class="fs-label" for="date-of-birth">Date of Birth</label>
<input
class="fs-input"
id="date-of-birth"
name="date-of-birth"
placeholder="YYYY-MM-DD"
required
/>
</div>
<div class="fs-field">
<label class="fs-label">Marital Status</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="marital-status-single"
name="marital-status"
required
type="radio"
value="single"
/>
</div>
<div>
<label class="fs-label" for="marital-status-single">Single</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="marital-status-married"
name="marital-status"
required
type="radio"
value="married"
/>
</div>
<div>
<label class="fs-label" for="marital-status-married">Married</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="marital-status-divorced"
name="marital-status"
required
type="radio"
value="divorced"
/>
</div>
<div>
<label class="fs-label" for="marital-status-divorced">Divorced</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="marital-status-widowed"
name="marital-status"
required
type="radio"
value="widowed"
/>
</div>
<div>
<label class="fs-label" for="marital-status-widowed">Widowed</label>
</div>
</div>
</div>
</div>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="current-employer">Current Employer</label>
<input
class="fs-input"
id="current-employer"
name="current-employer"
placeholder="Enter your employer's name"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="income">Income</label>
<input
class="fs-input"
id="income"
name="income"
placeholder="Enter your monthly income"
required
/>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="address-1">
Previous Rental Unit Address
</label>
<input class="fs-input" id="address-1" name="address-1" />
</div>
<div class="fs-field">
<label class="fs-label" for="address-2">Address line 2</label>
<input class="fs-input" id="address-2" name="address-2" />
</div>
<div class="fs-field">
<label class="fs-label" for="city">City</label>
<input class="fs-input" id="city" name="city" />
</div>
<div class="fs-field">
<label class="fs-label" for="state">State / Province</label>
<input class="fs-input" id="state" name="state" />
</div>
<div class="fs-field">
<label class="fs-label" for="zip-code">Postal / Zip Code</label>
<input class="fs-input" id="zip-code" name="zip-code" />
</div>
<div class="fs-field">
<label class="fs-label" for="length-of-stay">Length of Stay</label>
<input
class="fs-input"
id="length-of-stay"
name="length-of-stay"
placeholder="(e.g., 1 year, 6 months)?"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="reason-for-leaving">
Reason for Leaving
</label>
<textarea
class="fs-textarea"
id="reason-for-leaving"
name="reason-for-leaving"
placeholder="Why did you leave your previous rental?"
required
></textarea>
</div>
</fieldset>
<fieldset>
<div class="fs-field">
<label class="fs-label" for="professional-references">
Professional References
</label>
<textarea
class="fs-textarea"
id="professional-references"
name="professional-references"
placeholder="Provide details of your professional references"
required
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="personal-references">
Personal References
</label>
<textarea
class="fs-textarea"
id="personal-references"
name="personal-references"
placeholder="Provide details of your personal references"
required
></textarea>
</div>
</fieldset>
<div class="fs-field">
<label class="fs-label" for="emergency-contacts">Emergency Contacts</label>
<textarea
class="fs-textarea"
id="emergency-contacts"
name="emergency-contacts"
placeholder="Provide emergency contact details (name, relationship, phone number)"
required
></textarea>
</div>
<div class="fs-checkbox-field">
<div class="fs-checkbox-wrapper">
<input
aria-describedby="credit-background-consent-description"
class="fs-checkbox"
id="credit-background-consent"
name="credit-background-consent"
required
type="checkbox"
value="agree"
/>
</div>
<div>
<label class="fs-label" for="credit-background-consent">
Consent for Credit and Background Check
</label>
<p class="fs-description" id="credit-background-consent-description">
I consent to a credit and background check as part of this application
process.
</p>
</div>
</div>
<div class="fs-button-group">
<button class="fs-button" type="submit">Submit</button>
</div>
</form>
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
/** Variables **/
:root {
--color-background: #cbd5e1;
--color-background-alt: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Open Sans", sans-serif;
--font-family-display: "Nunito Sans", sans-serif;
}
/** Base **/
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
/** Components **/
.fs-form {
display: grid;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.375rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 0.375rem;
color: white;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1rem;
padding: 1rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 3px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 1rem;
height: 2.5rem;
line-height: 1.5rem;
outline: none;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.125rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-primary);
height: 1rem;
width: 1rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch-field {
align-items: center;
column-gap: 0.75rem;
display: flex;
justify-content: space-between;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.5rem;
cursor: pointer;
height: 1.5rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.75rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
Show more
HTML/Tailwind
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="grid grid-cols-2 gap-x-6 gap-y-6"
target="_top"
method="POST"
>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="applicant-name"
>
Applicant's Name
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="applicant-name"
name="applicant-name"
placeholder="Enter your full name"
required
/>
</div>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="email"
>
Email Address
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="email"
name="email"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="phone-number"
>
Phone Number
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="phone-number"
name="phone-number"
required
/>
</div>
</fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="date-of-birth"
>
Date of Birth
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="date-of-birth"
name="date-of-birth"
placeholder="YYYY-MM-DD"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
>
Marital Status
</label>
<div class="flex flex-col gap-y-2">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="marital-status-single"
name="marital-status"
required
type="radio"
value="single"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="marital-status-single"
>
Single
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="marital-status-married"
name="marital-status"
required
type="radio"
value="married"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="marital-status-married"
>
Married
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="marital-status-divorced"
name="marital-status"
required
type="radio"
value="divorced"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="marital-status-divorced"
>
Divorced
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="marital-status-widowed"
name="marital-status"
required
type="radio"
value="widowed"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="marital-status-widowed"
>
Widowed
</label>
</div>
</div>
</div>
</div>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="current-employer"
>
Current Employer
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="current-employer"
name="current-employer"
placeholder="Enter your employer's name"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="income"
>
Income
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="income"
name="income"
placeholder="Enter your monthly income"
required
/>
</div>
</fieldset>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="address-1"
>
Previous Rental Unit Address
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="address-1"
name="address-1"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="address-2"
>
Address line 2
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="address-2"
name="address-2"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="city"
>
City
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="city"
name="city"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="state"
>
State / Province
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="state"
name="state"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="zip-code"
>
Postal / Zip Code
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="zip-code"
name="zip-code"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="length-of-stay"
>
Length of Stay
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="length-of-stay"
name="length-of-stay"
placeholder="(e.g., 1 year, 6 months)?"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="reason-for-leaving"
>
Reason for Leaving
</label>
<textarea
class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="reason-for-leaving"
name="reason-for-leaving"
placeholder="Why did you leave your previous rental?"
required
></textarea>
</div>
</fieldset>
<fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="professional-references"
>
Professional References
</label>
<textarea
class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="professional-references"
name="professional-references"
placeholder="Provide details of your professional references"
required
></textarea>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="personal-references"
>
Personal References
</label>
<textarea
class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="personal-references"
name="personal-references"
placeholder="Provide details of your personal references"
required
></textarea>
</div>
</fieldset>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="emergency-contacts"
>
Emergency Contacts
</label>
<textarea
class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="emergency-contacts"
name="emergency-contacts"
placeholder="Provide emergency contact details (name, relationship, phone number)"
required
></textarea>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
aria-describedby="credit-background-consent-description"
class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="credit-background-consent"
name="credit-background-consent"
required
type="checkbox"
value="agree"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="credit-background-consent"
>
Consent for Credit and Background Check
</label>
<p
class="mt-0.5 block text-sm text-[--color-text-muted]"
id="credit-background-consent-description"
>
I consent to a credit and background check as part of this application
process.
</p>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
class="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #cbd5e1;
--color-background-alt: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Open Sans", sans-serif;
--font-family-display: "Nunito Sans", sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}
}
Show more
React
Copy
// Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";
export function ExampleForm() {
const [state, handleSubmit] = useForm("FORM_ID");
if (state.succeeded) {
return <p>Thanks for joining!</p>;
}
return (
<form className="fs-form fs-layout__2-column" onSubmit={handleSubmit}>
<div className="fs-field">
<label className="fs-label" htmlFor="applicant-name">
Applicant's Name
</label>
<input
className="fs-input"
id="applicant-name"
name="applicant-name"
placeholder="Enter your full name"
required
/>
</div>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="email">
Email Address
</label>
<input className="fs-input" id="email" name="email" required />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="phone-number">
Phone Number
</label>
<input
className="fs-input"
id="phone-number"
name="phone-number"
required
/>
</div>
</fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="date-of-birth">
Date of Birth
</label>
<input
className="fs-input"
id="date-of-birth"
name="date-of-birth"
placeholder="YYYY-MM-DD"
required
/>
</div>
<div className="fs-field">
<label className="fs-label">Marital Status</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="marital-status-single"
name="marital-status"
required
type="radio"
value="single"
/>
</div>
<div>
<label className="fs-label" htmlFor="marital-status-single">
Single
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="marital-status-married"
name="marital-status"
required
type="radio"
value="married"
/>
</div>
<div>
<label className="fs-label" htmlFor="marital-status-married">
Married
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="marital-status-divorced"
name="marital-status"
required
type="radio"
value="divorced"
/>
</div>
<div>
<label className="fs-label" htmlFor="marital-status-divorced">
Divorced
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="marital-status-widowed"
name="marital-status"
required
type="radio"
value="widowed"
/>
</div>
<div>
<label className="fs-label" htmlFor="marital-status-widowed">
Widowed
</label>
</div>
</div>
</div>
</div>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="current-employer">
Current Employer
</label>
<input
className="fs-input"
id="current-employer"
name="current-employer"
placeholder="Enter your employer's name"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="income">
Income
</label>
<input
className="fs-input"
id="income"
name="income"
placeholder="Enter your monthly income"
required
/>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="address-1">
Previous Rental Unit Address
</label>
<input className="fs-input" id="address-1" name="address-1" />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="address-2">
Address line 2
</label>
<input className="fs-input" id="address-2" name="address-2" />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="city">
City
</label>
<input className="fs-input" id="city" name="city" />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="state">
State / Province
</label>
<input className="fs-input" id="state" name="state" />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="zip-code">
Postal / Zip Code
</label>
<input className="fs-input" id="zip-code" name="zip-code" />
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="length-of-stay">
Length of Stay
</label>
<input
className="fs-input"
id="length-of-stay"
name="length-of-stay"
placeholder="(e.g., 1 year, 6 months)?"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="reason-for-leaving">
Reason for Leaving
</label>
<textarea
className="fs-textarea"
id="reason-for-leaving"
name="reason-for-leaving"
placeholder="Why did you leave your previous rental?"
required
/>
</div>
</fieldset>
<fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="professional-references">
Professional References
</label>
<textarea
className="fs-textarea"
id="professional-references"
name="professional-references"
placeholder="Provide details of your professional references"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="personal-references">
Personal References
</label>
<textarea
className="fs-textarea"
id="personal-references"
name="personal-references"
placeholder="Provide details of your personal references"
required
/>
</div>
</fieldset>
<div className="fs-field">
<label className="fs-label" htmlFor="emergency-contacts">
Emergency Contacts
</label>
<textarea
className="fs-textarea"
id="emergency-contacts"
name="emergency-contacts"
placeholder="Provide emergency contact details (name, relationship, phone number)"
required
/>
</div>
<div className="fs-checkbox-field">
<div className="fs-checkbox-wrapper">
<input
aria-describedby="credit-background-consent-description"
className="fs-checkbox"
id="credit-background-consent"
name="credit-background-consent"
required
type="checkbox"
value="agree"
/>
</div>
<div>
<label className="fs-label" htmlFor="credit-background-consent">
Consent for Credit and Background Check
</label>
<p
className="fs-description"
id="credit-background-consent-description"
>
I consent to a credit and background check as part of this
application process.
</p>
</div>
</div>
<div class="fs-button-group">
<button className="fs-button" type="submit">
Submit
</button>
</div>
</form>
);
}
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
/** Variables **/
:root {
--color-background: #cbd5e1;
--color-background-alt: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Open Sans", sans-serif;
--font-family-display: "Nunito Sans", sans-serif;
}
/** Base **/
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
/** Components **/
.fs-form {
display: grid;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.375rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 0.375rem;
color: white;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1rem;
padding: 1rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 3px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 1rem;
height: 2.5rem;
line-height: 1.5rem;
outline: none;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.125rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-primary);
height: 1rem;
width: 1rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch-field {
align-items: center;
column-gap: 0.75rem;
display: flex;
justify-content: space-between;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.5rem;
cursor: pointer;
height: 1.5rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.75rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
Show more
React/Tailwind
Copy
// Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";
export function ExampleForm() {
const [state, handleSubmit] = useForm("FORM_ID");
if (state.succeeded) {
return <p>Thanks for joining!</p>;
}
return (
<form className="grid grid-cols-2 gap-x-6 gap-y-6" onSubmit={handleSubmit}>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="applicant-name"
>
Applicant's Name
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="applicant-name"
name="applicant-name"
placeholder="Enter your full name"
required
/>
</div>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="email"
>
Email Address
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="email"
name="email"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="phone-number"
>
Phone Number
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="phone-number"
name="phone-number"
required
/>
</div>
</fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="date-of-birth"
>
Date of Birth
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="date-of-birth"
name="date-of-birth"
placeholder="YYYY-MM-DD"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
Marital Status
</label>
<div className="flex flex-col gap-y-2">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="marital-status-single"
name="marital-status"
required
type="radio"
value="single"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="marital-status-single"
>
Single
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="marital-status-married"
name="marital-status"
required
type="radio"
value="married"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="marital-status-married"
>
Married
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="marital-status-divorced"
name="marital-status"
required
type="radio"
value="divorced"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="marital-status-divorced"
>
Divorced
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="marital-status-widowed"
name="marital-status"
required
type="radio"
value="widowed"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="marital-status-widowed"
>
Widowed
</label>
</div>
</div>
</div>
</div>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="current-employer"
>
Current Employer
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="current-employer"
name="current-employer"
placeholder="Enter your employer's name"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="income"
>
Income
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="income"
name="income"
placeholder="Enter your monthly income"
required
/>
</div>
</fieldset>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="address-1"
>
Previous Rental Unit Address
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="address-1"
name="address-1"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="address-2"
>
Address line 2
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="address-2"
name="address-2"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="city"
>
City
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="city"
name="city"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="state"
>
State / Province
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="state"
name="state"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="zip-code"
>
Postal / Zip Code
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="zip-code"
name="zip-code"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="length-of-stay"
>
Length of Stay
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="length-of-stay"
name="length-of-stay"
placeholder="(e.g., 1 year, 6 months)?"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="reason-for-leaving"
>
Reason for Leaving
</label>
<textarea
className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="reason-for-leaving"
name="reason-for-leaving"
placeholder="Why did you leave your previous rental?"
required
/>
</div>
</fieldset>
<fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="professional-references"
>
Professional References
</label>
<textarea
className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="professional-references"
name="professional-references"
placeholder="Provide details of your professional references"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="personal-references"
>
Personal References
</label>
<textarea
className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="personal-references"
name="personal-references"
placeholder="Provide details of your personal references"
required
/>
</div>
</fieldset>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="emergency-contacts"
>
Emergency Contacts
</label>
<textarea
className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="emergency-contacts"
name="emergency-contacts"
placeholder="Provide emergency contact details (name, relationship, phone number)"
required
/>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
aria-describedby="credit-background-consent-description"
className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="credit-background-consent"
name="credit-background-consent"
required
type="checkbox"
value="agree"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="credit-background-consent"
>
Consent for Credit and Background Check
</label>
<p
className="mt-0.5 block text-sm text-[--color-text-muted]"
id="credit-background-consent-description"
>
I consent to a credit and background check as part of this
application process.
</p>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
className="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
);
}
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #cbd5e1;
--color-background-alt: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Open Sans", sans-serif;
--font-family-display: "Nunito Sans", sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}
}
Show more
Get started in just a few steps. Create a free account and choose New Form. Choose from our growing list of actions, from Airtable to Zendesk and everything in between. Replace with the form endpoint in the code above with the ID from your new form. Don’t forget to include a name attribute for every input. Formspree works great with static websites, but also plays nicely with many hosting platforms like Shopify, Webflow and more. See the guides below. Contact forms that work out of the box with top website platforms.
How to use this form
Create a form on Formspree
Add actions and validation rules
Update your form's action
<form action="https://formspree.io/f/{form_id}" method="post">Tweak your form's code
Deploy your form to your hosting platform
Integration Guides
Building a Tenant Application Form
Tenant application forms are a crucial part of the rental process, helping landlords and property managers evaluate potential tenants effectively. A well-designed tenant application form simplifies the rental application process and ensures you gather all the necessary information to make informed decisions. This guide will walk you through what a tenant application form is, its key components, and how to design one that meets your needs.
What is a Tenant Application Form?
A tenant application form (or rental application form) is a document that prospective tenants fill out when they wish to rent a property. It gathers important information such as personal details, rental history, employment history, and references, which landlords use to assess whether the applicant is a good fit for the rental unit. It can also be used to collect additional information, such as marital status, pay stubs, etc.
There’s often confusion between a rental application form and a lease application, but they are distinct. While the rental application collects information to screen tenants, the lease application typically comes after tenant approval and outlines the legal agreement between the tenant and the landlord.
The tenant screening process helps identify suitable renters, reducing the risk of non-payment or damage to the property. Through the rental application process, landlords can gather the data needed to perform credit checks, contact previous landlords, and verify employment.
Key Components of a Standard Rental Application Form
When designing a standard rental application, ensure that all the relevant sections are included. These key components provide the necessary information for tenant screening and determining whether a prospective tenant meets the criteria for renting the property.
- Personal Information: This section includes the applicant’s name, contact details, marital status, and date of birth. It is important to maintain compliance with the Fair Housing Act and avoid requesting discriminatory information.
- Employment and Income: Details about the applicant’s current employer, income, and pay stubs are essential for ensuring they have the financial capability to pay rent. Include space for employment history to verify long-term stability.
- Rental History: Information on previous landlords and rental properties helps gauge whether the tenant has a positive track record. Include fields for the rental unit address, the length of stay, and the reason for leaving.
- Credit and Background Checks: Many landlords perform a credit check and request the applicant’s credit score as part of the tenant screening process. In addition to credit history, a background check might reveal any criminal history or other concerns. This helps landlords ensure the applicant meets their safety and financial reliability standards.
- References and Emergency Contacts: Professional and personal references provide additional insight into the tenant’s character and trustworthiness. Including emergency contacts is a good practice to prepare for any potential situations during the rental term.
These sections are essential for gathering information to create a comprehensive tenant screening report.
Designing an Effective Tenant Application Form
Creating an effective rental application form requires clarity and thoroughness. Consider the following tips to enhance the form’s usability for both you and your prospective tenants:
- Clarity and Simplicity: Ensure that the form is easy to read and fill out. Clear headings and instructions will guide potential tenants through the application process without confusion.
- Utilize Online Rental Applications: An online rental application process is convenient and streamlines tenant submissions. It allows landlords to access the application data quickly and securely. Most online rental applications also integrate with tenant screening services, making the tenant screening process faster and more efficient.
- Customization for Local Laws: Make sure your application form is compliant with local regulations. For instance, a California rental application may require different information than one used in another state due to specific state laws around security deposits and application fees.
- Fair Housing Compliance: Ensure the form avoids collecting information that could violate the Fair Housing Act, such as questions about race, religion, or disability status. This helps avoid any legal complications and promotes a fair application process.
Enhancing the Tenant Screening Process
The tenant screening process is a critical step in ensuring you choose a trustworthy and reliable tenant. Here’s how to optimize it:
- Credit and Background Checks: After collecting the rental application, run a credit check and a background report. These checks reveal any financial or legal issues that might impact the applicant’s ability to pay rent on time or maintain the property responsibly.
- Tenant Screening Services: Using tenant screening services simplifies the process. These services can automate background and criminal history checks and generate a detailed tenant screening report. Many online platforms provide these services for a small fee, which can be factored into the application fee.
- Application Fees and Costs: Be transparent about application fees, which cover the cost of processing the rental application and running checks. Keep fees reasonable to avoid deterring potential tenants.
- Handling Adverse Action: If the screening process reveals unfavorable information, such as a low credit score or poor rental history, you may need to take adverse action (e.g., denying the application). Ensure that any rejections are communicated professionally, along with reasons, as required by law.
Best Practices for Online Rental Applications
Many landlords prefer using online rental applications to streamline the tenant application and screening process. Here’s how to make the most of this technology:
Automated Screening
One of the greatest benefits of using online rental application platforms is the ability to automate much of the tenant screening process. With the right tools, landlords can automatically run background checks, verify rental history, and assess credit scores. This not only speeds up the process but also reduces the risk of human error during data entry or verification.
Platforms can flag issues such as poor rental history, low credit scores, or discrepancies in employment history without manual intervention. This efficiency allows landlords to quickly compare applicants and make decisions based on real-time data. Automated screening can also integrate with tenant screening services, generating detailed tenant screening reports in minutes.
Secure Submissions
With the growing concern over data privacy, ensuring that your online rental application process is secure is essential. Sensitive personal information such as credit reports, consumer reports, and background reports must be protected through encryption and secure storage. Many online rental applications are now compliant with stringent data protection regulations like GDPR or CCPA to safeguard applicants’ information.
By ensuring that your application platform meets these security standards, you not only protect your tenants’ privacy but also shield yourself from potential legal consequences in the event of a data breach. It’s also a good idea to include a clear privacy policy explaining how applicants’ data will be used and stored, which fosters transparency and trust.
Digital Lease Agreements
Once a tenant has passed the tenant screening process, the next step is moving to the lease agreement phase. Sending a lease agreement digitally saves time, eliminates the hassle of physical paperwork, and allows tenants to sign electronically. This paperless process is not only more convenient for both parties but also helps ensure that all documents are stored securely in the cloud for easy access later.
Many online rental application platforms offer integrated digital lease agreements that allow for e-signatures, making the transition from the application process to the move-in phase seamless. Such a rental agreement can also be tailored to reflect specific clauses about the rental unit, such as security deposit amounts or specific house rules, to add a personal touch, ensure clarity and prevent future disputes.
Transparency and Communication
An often-overlooked aspect of the online rental application process is communication with the potential tenant. Clear and transparent communication is essential for building trust and maintaining a positive relationship with applicants. Through online platforms, you can provide real-time updates on the status of their application, whether it’s in progress, pending additional information, or approved.
Automated notifications can help alert applicants to missing documents, upcoming deadlines, or additional steps like the payment of an application fee. Ensuring that prospective tenants are kept in the loop can significantly improve their user experience and increase the likelihood of securing a long-term, reliable renter.
Reducing Manual Paperwork and Costs
In a traditional rental process, manual paperwork can be time-consuming and lead to delays or lost documentation. Using an online rental application helps reduce these inefficiencies. Automating tasks such as data entry, document storage, and communication lowers pocket costs by minimizing labor and physical storage needs. Additionally, you can automatically track applicants’ progress through the application process, which allows you to handle multiple rental applications simultaneously without increasing administrative overhead. You can even go so far as to signing the final rental agreement with the chosen tenant virtually.
Common Mistakes to Avoid in the Tenant Application Process
While the rental application process is straightforward, landlords can make several common mistakes. Here’s what to avoid:
- Inconsistent Application Requirements: Ensure all applicants are required to submit the same information. Inconsistent application requirements can lead to biased decisions and potential legal issues.
- High Application Fees: Charging excessive application fees can deter prospective tenants. Make sure the fees reflect the actual costs of processing the application and running checks.
- Skipping References and Rental History Checks: Neglecting to check references or rental history from previous landlords can result in renting to an unreliable tenant. Always verify key information before making a decision.
- Failure to Provide Adverse Action Notices: When you deny a rental application, failing to send a notice of adverse action can result in legal trouble. Ensure that any denials are properly documented and communicated.
Final Thoughts
Creating a comprehensive tenant application form and streamlining the rental application process can greatly enhance your ability to choose the right tenants. By gathering detailed information, performing thorough tenant screening, and utilizing tenant screening services, you can ensure a smooth rental experience.
For more information on creating effective rental application forms, consider consulting professional screening services or property management resources to improve your process.
FAQ
-
What are the common uses of application forms?
Application forms are commonly used for job applications, admissions, event registrations, and service requests. They streamline the collection of important details from applicants, providing a structured process for organizations to review and manage submissions effectively.
-
What are the main benefits of application forms?
Application forms provide an organized way to collect detailed information, improve data accuracy, and speed up decision-making. With Formspree as the backend, these forms can also send email notifications and allow for instant viewing of responses on the Formspree dashboard, enhancing efficiency.
-
When are application forms needed?
Application forms are needed when collecting structured information for job opportunities, academic admissions, program enrollments, or membership requests. They ensure consistency in the data collection process, making it easier to evaluate applicants fairly and efficiently.
-
How to fill out an employment form?
To fill out an employment form, provide accurate information about your personal details, work history, education, and references. Ensure all fields are completed as requested, and if the form uses Formspree as a backend, you can trust it to notify the employer instantly and securely manage your submission.
-
How to fill out an application form for admission?
When filling out an application form for admission, include accurate details about your personal information, academic background, and any additional requirements like essays or references. Forms powered by Formspree ensure your submission is securely delivered and allows institutions to access responses instantly for timely processing.
-
How to write a job application?
To write a job application, include a professional cover letter that highlights your qualifications, skills, and experiences relevant to the role. If submitting through an application form using Formspree, you can be confident that your details will be securely processed and employers will receive instant notifications about your submission.
More application Forms
-
Simple Job Application Form
Clean, minimal job application form for easy hiring and applicant tracking
Get code -
Rental Application Form
Clean, minimal rental application form for hassle-free tenant screening and management
Get code -
Job Application Form
Minimal and intuitive job application form to attract top talent and streamline applicant submissions.
Get code