Open House Feedback Form
Add this minimal HTML open house feedback form to your website or tablets at property showings to collect honest feedback from potential buyers or renters. It helps real estate agents and property managers understand visitor impressions, answer follow-up questions, and improve future showings based on real input.
Preview
Code
HTML
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="fs-form fs-layout__2-column"
target="_top"
method="POST"
>
<fieldset>
<legend class="fs-fieldset-title">Your Details</legend>
<div class="fs-field">
<label class="fs-label" for="full-name">Full Name</label>
<input
class="fs-input"
id="full-name"
name="full-name"
placeholder="Enter your full name"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="email-address">Email Address</label>
<input
class="fs-input"
id="email-address"
name="email-address"
placeholder="Enter your email address"
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"
placeholder="Enter your phone number"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="visit-date">Date of Visit</label>
<input
class="fs-input"
id="visit-date"
name="visit-date"
placeholder="Select the date of your visit"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="property-address">
Property Address Visited
</label>
<textarea
class="fs-textarea"
id="property-address"
name="property-address"
placeholder="Enter or select the property address"
required
></textarea>
</div>
</fieldset>
<fieldset>
<legend class="fs-fieldset-title">Property Feedback</legend>
<div class="fs-field">
<label class="fs-label">Overall Impression of the Property</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-impression-excellent"
name="overall-impression"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="overall-impression-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-impression-good"
name="overall-impression"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="overall-impression-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-impression-fair"
name="overall-impression"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="overall-impression-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-impression-poor"
name="overall-impression"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="overall-impression-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Curb Appeal / Exterior Condition</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="curb-appeal-excellent"
name="curb-appeal"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="curb-appeal-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="curb-appeal-good"
name="curb-appeal"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="curb-appeal-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="curb-appeal-fair"
name="curb-appeal"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="curb-appeal-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="curb-appeal-poor"
name="curb-appeal"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="curb-appeal-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Interior Condition</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="interior-condition-excellent"
name="interior-condition"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="interior-condition-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="interior-condition-good"
name="interior-condition"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="interior-condition-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="interior-condition-fair"
name="interior-condition"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="interior-condition-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="interior-condition-poor"
name="interior-condition"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="interior-condition-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Room Layout and Size</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="room-layout-excellent"
name="room-layout"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="room-layout-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="room-layout-good"
name="room-layout"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="room-layout-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="room-layout-fair"
name="room-layout"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="room-layout-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="room-layout-poor"
name="room-layout"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="room-layout-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Neighborhood Appeal</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="neighborhood-appeal-excellent"
name="neighborhood-appeal"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="neighborhood-appeal-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="neighborhood-appeal-good"
name="neighborhood-appeal"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="neighborhood-appeal-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="neighborhood-appeal-fair"
name="neighborhood-appeal"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="neighborhood-appeal-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="neighborhood-appeal-poor"
name="neighborhood-appeal"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="neighborhood-appeal-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Price Perception</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="price-perception-too-high"
name="price-perception"
required
type="radio"
value="too-high"
/>
</div>
<div>
<label class="fs-label" for="price-perception-too-high">
Too High
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="price-perception-just-right"
name="price-perception"
required
type="radio"
value="just-right"
/>
</div>
<div>
<label class="fs-label" for="price-perception-just-right">
Just Right
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="price-perception-bargain"
name="price-perception"
required
type="radio"
value="bargain"
/>
</div>
<div>
<label class="fs-label" for="price-perception-bargain">
Bargain
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend class="fs-fieldset-title">Additional Notes</legend>
<div class="fs-field">
<label class="fs-label" for="liked-most">
What Did You Like Most About the Property?
</label>
<textarea
class="fs-textarea"
id="liked-most"
name="liked-most"
placeholder="Share what you liked most about the property"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="property-concerns">
What Concerns Do You Have About the Property?
</label>
<textarea
class="fs-textarea"
id="property-concerns"
name="property-concerns"
placeholder="Let us know what concerns you may have"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="additional-comments">
Additional Comments or Suggestions
</label>
<textarea
class="fs-textarea"
id="additional-comments"
name="additional-comments"
placeholder="Share any other thoughts or feedback"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label">Are You Working With a Realtor?</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="working-with-realtor-yes"
name="working-with-realtor"
required
type="radio"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="working-with-realtor-yes">Yes</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="working-with-realtor-no"
name="working-with-realtor"
required
type="radio"
value="no"
/>
</div>
<div>
<label class="fs-label" for="working-with-realtor-no">No</label>
</div>
</div>
</div>
</div>
</fieldset>
<div class="fs-field">
<label class="fs-label">Are You Interested in Making an Offer?</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="interested-in-offer-yes"
name="interested-in-offer"
required
type="radio"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="interested-in-offer-yes">Yes</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="interested-in-offer-no"
name="interested-in-offer"
required
type="radio"
value="no"
/>
</div>
<div>
<label class="fs-label" for="interested-in-offer-no">No</label>
</div>
</div>
</div>
</div>
<div class="fs-checkbox-field">
<div class="fs-checkbox-wrapper">
<input
class="fs-checkbox"
id="contact-consent"
name="contact-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="contact-consent">
May We Contact You About Similar Properties?
</label>
</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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Quicksand:wght@300..700&display=swap'");
/** Variables **/
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Quicksand", sans-serif;
--font-family-display: "Lato", 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;
margin: 1.5rem 0;
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-fieldset-title {
color: var(--color-text-default);
font-family: var(--font-family-display);
font-size: 1.25rem;
line-height: 1.75rem;
margin-bottom: 1.5rem;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 1rem;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 1rem;
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: 9999px;
color: white;
cursor: pointer;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
padding: 0.75rem 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: 4px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 9999px;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
height: 3rem;
line-height: 1.5rem;
outline: none;
padding-left: 1rem;
padding-right: 1rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.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.25rem;
}
.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-border-default);
height: 1.25rem;
width: 1.25rem;
}
.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 {
border-color: var(--color-border-active);
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
border-color: transparent;
}
.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.75rem center;
background-repeat: no-repeat;
background-size: 1.625em 1.625em;
padding-right: 2.875rem;
}
.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='2.75' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.25rem;
cursor: pointer;
height: 1.25rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.5rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.75rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
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 1px inset;
}
.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"
>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]"
>
Your Details
</legend>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="full-name"
>
Full Name
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="full-name"
name="full-name"
placeholder="Enter your full name"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="email-address"
>
Email Address
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="email-address"
name="email-address"
placeholder="Enter your email address"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="phone-number"
>
Phone Number
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="phone-number"
name="phone-number"
placeholder="Enter your phone number"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="visit-date"
>
Date of Visit
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="visit-date"
name="visit-date"
placeholder="Select the date of your visit"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="property-address"
>
Property Address Visited
</label>
<textarea
class="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
id="property-address"
name="property-address"
placeholder="Enter or select the property address"
required
></textarea>
</div>
</fieldset>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]"
>
Property Feedback
</legend>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Overall Impression of the Property
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-impression-excellent"
name="overall-impression"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="overall-impression-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-impression-good"
name="overall-impression"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="overall-impression-good"
>
Good
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-impression-fair"
name="overall-impression"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="overall-impression-fair"
>
Fair
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-impression-poor"
name="overall-impression"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="overall-impression-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Curb Appeal / Exterior Condition
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="curb-appeal-excellent"
name="curb-appeal"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="curb-appeal-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="curb-appeal-good"
name="curb-appeal"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="curb-appeal-good"
>
Good
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="curb-appeal-fair"
name="curb-appeal"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="curb-appeal-fair"
>
Fair
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="curb-appeal-poor"
name="curb-appeal"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="curb-appeal-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Interior Condition
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interior-condition-excellent"
name="interior-condition"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="interior-condition-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interior-condition-good"
name="interior-condition"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="interior-condition-good"
>
Good
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interior-condition-fair"
name="interior-condition"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="interior-condition-fair"
>
Fair
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interior-condition-poor"
name="interior-condition"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="interior-condition-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Room Layout and Size
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="room-layout-excellent"
name="room-layout"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="room-layout-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="room-layout-good"
name="room-layout"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="room-layout-good"
>
Good
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="room-layout-fair"
name="room-layout"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="room-layout-fair"
>
Fair
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="room-layout-poor"
name="room-layout"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="room-layout-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Neighborhood Appeal
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="neighborhood-appeal-excellent"
name="neighborhood-appeal"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="neighborhood-appeal-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="neighborhood-appeal-good"
name="neighborhood-appeal"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="neighborhood-appeal-good"
>
Good
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="neighborhood-appeal-fair"
name="neighborhood-appeal"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="neighborhood-appeal-fair"
>
Fair
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="neighborhood-appeal-poor"
name="neighborhood-appeal"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="neighborhood-appeal-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Price Perception
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="price-perception-too-high"
name="price-perception"
required
type="radio"
value="too-high"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="price-perception-too-high"
>
Too High
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="price-perception-just-right"
name="price-perception"
required
type="radio"
value="just-right"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="price-perception-just-right"
>
Just Right
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="price-perception-bargain"
name="price-perception"
required
type="radio"
value="bargain"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="price-perception-bargain"
>
Bargain
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]"
>
Additional Notes
</legend>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="liked-most"
>
What Did You Like Most About the Property?
</label>
<textarea
class="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
id="liked-most"
name="liked-most"
placeholder="Share what you liked most about the property"
></textarea>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="property-concerns"
>
What Concerns Do You Have About the Property?
</label>
<textarea
class="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
id="property-concerns"
name="property-concerns"
placeholder="Let us know what concerns you may have"
></textarea>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="additional-comments"
>
Additional Comments or Suggestions
</label>
<textarea
class="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
id="additional-comments"
name="additional-comments"
placeholder="Share any other thoughts or feedback"
></textarea>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Are You Working With a Realtor?
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="working-with-realtor-yes"
name="working-with-realtor"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="working-with-realtor-yes"
>
Yes
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="working-with-realtor-no"
name="working-with-realtor"
required
type="radio"
value="no"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="working-with-realtor-no"
>
No
</label>
</div>
</div>
</div>
</div>
</fieldset>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Are You Interested in Making an Offer?
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interested-in-offer-yes"
name="interested-in-offer"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="interested-in-offer-yes"
>
Yes
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interested-in-offer-no"
name="interested-in-offer"
required
type="radio"
value="no"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="interested-in-offer-no"
>
No
</label>
</div>
</div>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="contact-consent"
name="contact-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="contact-consent"
>
May We Contact You About Similar Properties?
</label>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
class="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
Show more
CSS
Copy
@import url("'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Quicksand:wght@300..700&display=swap'");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Quicksand", sans-serif;
--font-family-display: "Lato", 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='2.75' 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}>
<fieldset>
<legend className="fs-fieldset-title">Your Details</legend>
<div className="fs-field">
<label className="fs-label" htmlFor="full-name">
Full Name
</label>
<input
className="fs-input"
id="full-name"
name="full-name"
placeholder="Enter your full name"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="email-address">
Email Address
</label>
<input
className="fs-input"
id="email-address"
name="email-address"
placeholder="Enter your email address"
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"
placeholder="Enter your phone number"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="visit-date">
Date of Visit
</label>
<input
className="fs-input"
id="visit-date"
name="visit-date"
placeholder="Select the date of your visit"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="property-address">
Property Address Visited
</label>
<textarea
className="fs-textarea"
id="property-address"
name="property-address"
placeholder="Enter or select the property address"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="fs-fieldset-title">Property Feedback</legend>
<div className="fs-field">
<label className="fs-label">Overall Impression of the Property</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-impression-excellent"
name="overall-impression"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="overall-impression-excellent"
>
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-impression-good"
name="overall-impression"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="overall-impression-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-impression-fair"
name="overall-impression"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="overall-impression-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-impression-poor"
name="overall-impression"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="overall-impression-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Curb Appeal / Exterior Condition</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="curb-appeal-excellent"
name="curb-appeal"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="curb-appeal-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="curb-appeal-good"
name="curb-appeal"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="curb-appeal-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="curb-appeal-fair"
name="curb-appeal"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="curb-appeal-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="curb-appeal-poor"
name="curb-appeal"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="curb-appeal-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Interior Condition</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="interior-condition-excellent"
name="interior-condition"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="interior-condition-excellent"
>
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="interior-condition-good"
name="interior-condition"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="interior-condition-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="interior-condition-fair"
name="interior-condition"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="interior-condition-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="interior-condition-poor"
name="interior-condition"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="interior-condition-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Room Layout and Size</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="room-layout-excellent"
name="room-layout"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="room-layout-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="room-layout-good"
name="room-layout"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="room-layout-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="room-layout-fair"
name="room-layout"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="room-layout-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="room-layout-poor"
name="room-layout"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="room-layout-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Neighborhood Appeal</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="neighborhood-appeal-excellent"
name="neighborhood-appeal"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="neighborhood-appeal-excellent"
>
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="neighborhood-appeal-good"
name="neighborhood-appeal"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="neighborhood-appeal-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="neighborhood-appeal-fair"
name="neighborhood-appeal"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="neighborhood-appeal-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="neighborhood-appeal-poor"
name="neighborhood-appeal"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="neighborhood-appeal-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Price Perception</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="price-perception-too-high"
name="price-perception"
required
type="radio"
value="too-high"
/>
</div>
<div>
<label className="fs-label" htmlFor="price-perception-too-high">
Too High
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="price-perception-just-right"
name="price-perception"
required
type="radio"
value="just-right"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="price-perception-just-right"
>
Just Right
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="price-perception-bargain"
name="price-perception"
required
type="radio"
value="bargain"
/>
</div>
<div>
<label className="fs-label" htmlFor="price-perception-bargain">
Bargain
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend className="fs-fieldset-title">Additional Notes</legend>
<div className="fs-field">
<label className="fs-label" htmlFor="liked-most">
What Did You Like Most About the Property?
</label>
<textarea
className="fs-textarea"
id="liked-most"
name="liked-most"
placeholder="Share what you liked most about the property"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="property-concerns">
What Concerns Do You Have About the Property?
</label>
<textarea
className="fs-textarea"
id="property-concerns"
name="property-concerns"
placeholder="Let us know what concerns you may have"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="additional-comments">
Additional Comments or Suggestions
</label>
<textarea
className="fs-textarea"
id="additional-comments"
name="additional-comments"
placeholder="Share any other thoughts or feedback"
/>
</div>
<div className="fs-field">
<label className="fs-label">Are You Working With a Realtor?</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="working-with-realtor-yes"
name="working-with-realtor"
required
type="radio"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="working-with-realtor-yes">
Yes
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="working-with-realtor-no"
name="working-with-realtor"
required
type="radio"
value="no"
/>
</div>
<div>
<label className="fs-label" htmlFor="working-with-realtor-no">
No
</label>
</div>
</div>
</div>
</div>
</fieldset>
<div className="fs-field">
<label className="fs-label">
Are You Interested in Making an Offer?
</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="interested-in-offer-yes"
name="interested-in-offer"
required
type="radio"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="interested-in-offer-yes">
Yes
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="interested-in-offer-no"
name="interested-in-offer"
required
type="radio"
value="no"
/>
</div>
<div>
<label className="fs-label" htmlFor="interested-in-offer-no">
No
</label>
</div>
</div>
</div>
</div>
<div className="fs-checkbox-field">
<div className="fs-checkbox-wrapper">
<input
className="fs-checkbox"
id="contact-consent"
name="contact-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="contact-consent">
May We Contact You About Similar Properties?
</label>
</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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Quicksand:wght@300..700&display=swap'");
/** Variables **/
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Quicksand", sans-serif;
--font-family-display: "Lato", 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;
margin: 1.5rem 0;
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-fieldset-title {
color: var(--color-text-default);
font-family: var(--font-family-display);
font-size: 1.25rem;
line-height: 1.75rem;
margin-bottom: 1.5rem;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 1rem;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 1rem;
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: 9999px;
color: white;
cursor: pointer;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
padding: 0.75rem 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: 4px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 9999px;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
height: 3rem;
line-height: 1.5rem;
outline: none;
padding-left: 1rem;
padding-right: 1rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.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.25rem;
}
.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-border-default);
height: 1.25rem;
width: 1.25rem;
}
.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 {
border-color: var(--color-border-active);
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
border-color: transparent;
}
.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.75rem center;
background-repeat: no-repeat;
background-size: 1.625em 1.625em;
padding-right: 2.875rem;
}
.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='2.75' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.25rem;
cursor: pointer;
height: 1.25rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.5rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.75rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
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 1px inset;
}
.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}>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]">
Your Details
</legend>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="full-name"
>
Full Name
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="full-name"
name="full-name"
placeholder="Enter your full name"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="email-address"
>
Email Address
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="email-address"
name="email-address"
placeholder="Enter your email address"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="phone-number"
>
Phone Number
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="phone-number"
name="phone-number"
placeholder="Enter your phone number"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="visit-date"
>
Date of Visit
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="visit-date"
name="visit-date"
placeholder="Select the date of your visit"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="property-address"
>
Property Address Visited
</label>
<textarea
className="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
id="property-address"
name="property-address"
placeholder="Enter or select the property address"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]">
Property Feedback
</legend>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Overall Impression of the Property
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-impression-excellent"
name="overall-impression"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="overall-impression-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-impression-good"
name="overall-impression"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="overall-impression-good"
>
Good
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-impression-fair"
name="overall-impression"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="overall-impression-fair"
>
Fair
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-impression-poor"
name="overall-impression"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="overall-impression-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Curb Appeal / Exterior Condition
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="curb-appeal-excellent"
name="curb-appeal"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="curb-appeal-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="curb-appeal-good"
name="curb-appeal"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="curb-appeal-good"
>
Good
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="curb-appeal-fair"
name="curb-appeal"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="curb-appeal-fair"
>
Fair
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="curb-appeal-poor"
name="curb-appeal"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="curb-appeal-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Interior Condition
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interior-condition-excellent"
name="interior-condition"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="interior-condition-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interior-condition-good"
name="interior-condition"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="interior-condition-good"
>
Good
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interior-condition-fair"
name="interior-condition"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="interior-condition-fair"
>
Fair
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interior-condition-poor"
name="interior-condition"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="interior-condition-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Room Layout and Size
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="room-layout-excellent"
name="room-layout"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="room-layout-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="room-layout-good"
name="room-layout"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="room-layout-good"
>
Good
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="room-layout-fair"
name="room-layout"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="room-layout-fair"
>
Fair
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="room-layout-poor"
name="room-layout"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="room-layout-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Neighborhood Appeal
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="neighborhood-appeal-excellent"
name="neighborhood-appeal"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="neighborhood-appeal-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="neighborhood-appeal-good"
name="neighborhood-appeal"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="neighborhood-appeal-good"
>
Good
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="neighborhood-appeal-fair"
name="neighborhood-appeal"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="neighborhood-appeal-fair"
>
Fair
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="neighborhood-appeal-poor"
name="neighborhood-appeal"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="neighborhood-appeal-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Price Perception
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="price-perception-too-high"
name="price-perception"
required
type="radio"
value="too-high"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="price-perception-too-high"
>
Too High
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="price-perception-just-right"
name="price-perception"
required
type="radio"
value="just-right"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="price-perception-just-right"
>
Just Right
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="price-perception-bargain"
name="price-perception"
required
type="radio"
value="bargain"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="price-perception-bargain"
>
Bargain
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]">
Additional Notes
</legend>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="liked-most"
>
What Did You Like Most About the Property?
</label>
<textarea
className="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
id="liked-most"
name="liked-most"
placeholder="Share what you liked most about the property"
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="property-concerns"
>
What Concerns Do You Have About the Property?
</label>
<textarea
className="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
id="property-concerns"
name="property-concerns"
placeholder="Let us know what concerns you may have"
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="additional-comments"
>
Additional Comments or Suggestions
</label>
<textarea
className="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
id="additional-comments"
name="additional-comments"
placeholder="Share any other thoughts or feedback"
/>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Are You Working With a Realtor?
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="working-with-realtor-yes"
name="working-with-realtor"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="working-with-realtor-yes"
>
Yes
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="working-with-realtor-no"
name="working-with-realtor"
required
type="radio"
value="no"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="working-with-realtor-no"
>
No
</label>
</div>
</div>
</div>
</div>
</fieldset>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Are You Interested in Making an Offer?
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interested-in-offer-yes"
name="interested-in-offer"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="interested-in-offer-yes"
>
Yes
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="interested-in-offer-no"
name="interested-in-offer"
required
type="radio"
value="no"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="interested-in-offer-no"
>
No
</label>
</div>
</div>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="contact-consent"
name="contact-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="contact-consent"
>
May We Contact You About Similar Properties?
</label>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
className="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
);
}
Show more
CSS
Copy
@import url("'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Quicksand:wght@300..700&display=swap'");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Quicksand", sans-serif;
--font-family-display: "Lato", 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='2.75' 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. Follow these steps to copy and paste this form into your Shopify theme and get it working in minutes.
Sign up for a free Formspree account and create a new form.
Once created, you’ll get a unique form endpoint like
Scroll up and copy the full HTML form code shown above. Don’t forget to replace the
Go to your Shopify Admin and navigate to Online Store > Themes > Customize.
Select the page where you want the form to appear, then add a new Custom Liquid section.
Paste the copied HTML into the Custom Liquid field and save.
Scroll up and copy the CSS snippet provided on this page. These styles are optimized for the form layout and appearance.
In your Shopify Admin, go to Online Store > Themes > Actions > Edit Code.
Open the
Return to the page where you added the form. You should now see your styled Formspree form live in your Shopify store.
Test it out and then hit “Publish” to make it live for customers.
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
How to Use This Form in Your Shopify Store
Create a Form on Formspree
https://formspree.io/f/your-form-id.
Copy the HTML from this Library Page
FORM_ID in the action attribute with your actual form ID.
Paste the Form into a Shopify Page
Copy the CSS Styles
Paste the CSS into Your Shopify Theme
assets/base.css file (or your theme’s main CSS file) and paste the copied CSS at the very end.
Save the file.
Preview and Publish
Integration Guides
What is an Open House Feedback Form?
An open house feedback form is used by real estate agents and property managers to gather impressions from visitors during or after an open house showing. It typically includes questions about the property’s condition, pricing, layout, and the visitor’s interest level. This form helps agents identify common concerns, track potential leads, and adjust their selling strategy based on real feedback from prospective buyers or renters.
Formspree’s open house feedback form template makes it easy to collect visitor input right from your website or on-site using a tablet or mobile device. With real-time email notifications and secure submission handling, you can follow up with interested leads faster and use the feedback to improve future showings. Formspree takes care of the backend so you can focus on closing deals and serving your clients better.
FAQ
-
What are feedback forms?
Feedback forms are online tools used to collect opinions, reviews, or suggestions from users, customers, or employees. A well-designed feedback form helps improve products, services, or experiences. With Formspree as the backend, these forms are easy to embed, notify you instantly of submissions, and allow real-time response viewing via the Formspree dashboard.
-
How do I create a feedback form?
To create a feedback form, start by choosing fields like name, email, rating scales, and open-ended comment sections. You can build your own or customize a template and connect it to Formspree for effortless backend functionality, instant email notifications, and organized submission tracking.
-
What information should be collected in a feedback form?
A feedback form should collect details like the user's name, contact info (optional), their experience rating, and open-ended responses for comments or suggestions. Using Formspree, you can customize the fields to suit your needs and instantly receive feedback submissions via email or dashboard access.
-
What are the subtypes of feedback forms?
Subtypes of feedback forms include customer feedback forms, employee feedback forms, product feedback forms, event feedback forms, and website feedback forms. All of these can be built with Formspree-powered templates that are flexible, mobile-friendly, and support instant response notifications.
-
Who should use feedback forms?
Businesses, educational institutions, nonprofits, developers, and event organizers should use feedback forms to gather insights and improve their offerings. Formspree makes it easy to integrate feedback forms into your website and provides instant alerts for each submission, enabling quick action on valuable feedback.
-
What are the 5 R's of feedback?
The 5 R's of feedback are: Respect, Relevance, Responsiveness, Responsibility, and Relationship. These principles guide how feedback should be given and received to foster constructive communication, especially in organizational or team environments.
-
What is action feedback?
Action feedback is input that focuses on specific behaviors or outcomes, encouraging measurable improvement or change. It helps guide decision-making and performance adjustments. When collected through a Formspree-powered feedback form, action feedback is immediately available for review and follow-up.
More feedback Forms
-
Course Evaluation Form
Clean, organized course evaluation form for measuring effectiveness and improving instruction.
Get code -
Open House Feedback Form
Clean, helpful open house feedback form for capturing attendee thoughts and contact preferences.
Get code -
Customer Satisfaction Survey
Clean, user-friendly customer satisfaction survey for insights into customer experience and service quality.
Get code