Client Feedback Form
Add this minimal HTML client feedback form to your website to easily collect thoughtful reviews, suggestions, and ratings from your clients. It’s a great way to understand client needs, measure satisfaction, and identify areas for improvement—whether you’re running an agency, consulting firm, or service-based business.
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">Client Information</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 (optional)"
/>
</div>
<div class="fs-field">
<label class="fs-label" for="company-name">Company Name</label>
<input
class="fs-input"
id="company-name"
name="company-name"
placeholder="Enter your company 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 (optional)"
/>
</div>
</fieldset>
<fieldset>
<legend class="fs-fieldset-title">Project Details</legend>
<div class="fs-field">
<label class="fs-label" for="project-service">
Project / Service Received
</label>
<input
class="fs-input"
id="project-service"
name="project-service"
placeholder="Enter the project or service name"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="completion-date">
Date of Service Completion
</label>
<input
class="fs-input"
id="completion-date"
name="completion-date"
placeholder="Select the date service was completed"
required
/>
</div>
</fieldset>
<fieldset>
<legend class="fs-fieldset-title">Feedback</legend>
<div class="fs-field">
<label class="fs-label">Overall Satisfaction</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-satisfaction-very-satisfied"
name="overall-satisfaction"
required
type="radio"
value="very-satisfied"
/>
</div>
<div>
<label class="fs-label" for="overall-satisfaction-very-satisfied">
Very Satisfied
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-satisfaction-satisfied"
name="overall-satisfaction"
required
type="radio"
value="satisfied"
/>
</div>
<div>
<label class="fs-label" for="overall-satisfaction-satisfied">
Satisfied
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-satisfaction-neutral"
name="overall-satisfaction"
required
type="radio"
value="neutral"
/>
</div>
<div>
<label class="fs-label" for="overall-satisfaction-neutral">
Neutral
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-satisfaction-dissatisfied"
name="overall-satisfaction"
required
type="radio"
value="dissatisfied"
/>
</div>
<div>
<label class="fs-label" for="overall-satisfaction-dissatisfied">
Dissatisfied
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-satisfaction-very-dissatisfied"
name="overall-satisfaction"
required
type="radio"
value="very-dissatisfied"
/>
</div>
<div>
<label
class="fs-label"
for="overall-satisfaction-very-dissatisfied"
>
Very Dissatisfied
</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Quality of Service/Product</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="quality-rating-excellent"
name="quality-rating"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="quality-rating-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="quality-rating-good"
name="quality-rating"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="quality-rating-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="quality-rating-fair"
name="quality-rating"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="quality-rating-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="quality-rating-poor"
name="quality-rating"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="quality-rating-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Communication and Responsiveness</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="communication-excellent"
name="communication"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="communication-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="communication-good"
name="communication"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="communication-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="communication-fair"
name="communication"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="communication-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="communication-poor"
name="communication"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="communication-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Timeliness of Delivery</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="timeliness-excellent"
name="timeliness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="timeliness-excellent">Excellent</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="timeliness-good"
name="timeliness"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="timeliness-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="timeliness-fair"
name="timeliness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="timeliness-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="timeliness-poor"
name="timeliness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="timeliness-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Professionalism of Staff</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="professionalism-excellent"
name="professionalism"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="professionalism-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="professionalism-good"
name="professionalism"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="professionalism-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="professionalism-fair"
name="professionalism"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="professionalism-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="professionalism-poor"
name="professionalism"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="professionalism-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Value for Money</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="value-for-money-excellent"
name="value-for-money"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="value-for-money-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="value-for-money-good"
name="value-for-money"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="value-for-money-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="value-for-money-fair"
name="value-for-money"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="value-for-money-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="value-for-money-poor"
name="value-for-money"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="value-for-money-poor">Poor</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend class="fs-fieldset-title">Additional Comments</legend>
<div class="fs-field">
<label class="fs-label" for="liked-most">
What Did You Like Most About Working With Us?
</label>
<textarea
class="fs-textarea"
id="liked-most"
name="liked-most"
placeholder="Let us know what stood out to you"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="improvements">What Could We Improve?</label>
<textarea
class="fs-textarea"
id="improvements"
name="improvements"
placeholder="Share any areas where we could do better"
></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="Add any other feedback you'd like to share"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label">Would You Recommend Us to Others?</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="recommendation-yes"
name="recommendation"
required
type="radio"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="recommendation-yes">Yes</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="recommendation-no"
name="recommendation"
required
type="radio"
value="no"
/>
</div>
<div>
<label class="fs-label" for="recommendation-no">No</label>
</div>
</div>
</div>
</div>
</fieldset>
<div class="fs-checkbox-field">
<div class="fs-checkbox-wrapper">
<input
class="fs-checkbox"
id="testimonial-consent"
name="testimonial-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="testimonial-consent">
Man We Use Your Feedback as a Testimonial?
</label>
</div>
</div>
<div class="fs-checkbox-field">
<div class="fs-checkbox-wrapper">
<input
class="fs-checkbox"
id="follow-up-consent"
name="follow-up-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="follow-up-consent">
May We Contact You for a Follow-Up?
</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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/** Variables **/
:root {
--color-background: #cbd5e1;
--color-background-alt: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Inter", 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;
font-weight: 500;
line-height: 1.75rem;
margin-bottom: 1.5rem;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.375rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 0.375rem;
color: white;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1rem;
padding: 1rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 3px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
height: 2.5rem;
line-height: 1.5rem;
outline: none;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.125rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-text-default);
height: 1rem;
width: 1rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch-field {
align-items: center;
column-gap: 0.75rem;
display: flex;
justify-content: space-between;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.5rem;
cursor: pointer;
height: 1.5rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.75rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
Show more
HTML/Tailwind
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="grid grid-cols-2 gap-x-6 gap-y-6"
target="_top"
method="POST"
>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
>
Client Information
</legend>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="full-name"
>
Full Name
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="full-name"
name="full-name"
placeholder="Enter your full name (optional)"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="company-name"
>
Company Name
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="company-name"
name="company-name"
placeholder="Enter your company name"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="email-address"
>
Email Address
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="email-address"
name="email-address"
placeholder="Enter your email address (optional)"
/>
</div>
</fieldset>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
>
Project Details
</legend>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="project-service"
>
Project / Service Received
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="project-service"
name="project-service"
placeholder="Enter the project or service name"
required
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="completion-date"
>
Date of Service Completion
</label>
<input
class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="completion-date"
name="completion-date"
placeholder="Select the date service was completed"
required
/>
</div>
</fieldset>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
>
Feedback
</legend>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
>
Overall Satisfaction
</label>
<div class="flex flex-col gap-y-2">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="overall-satisfaction-very-satisfied"
name="overall-satisfaction"
required
type="radio"
value="very-satisfied"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="overall-satisfaction-very-satisfied"
>
Very Satisfied
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="overall-satisfaction-satisfied"
name="overall-satisfaction"
required
type="radio"
value="satisfied"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="overall-satisfaction-satisfied"
>
Satisfied
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="overall-satisfaction-neutral"
name="overall-satisfaction"
required
type="radio"
value="neutral"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="overall-satisfaction-neutral"
>
Neutral
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="overall-satisfaction-dissatisfied"
name="overall-satisfaction"
required
type="radio"
value="dissatisfied"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="overall-satisfaction-dissatisfied"
>
Dissatisfied
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="overall-satisfaction-very-dissatisfied"
name="overall-satisfaction"
required
type="radio"
value="very-dissatisfied"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="overall-satisfaction-very-dissatisfied"
>
Very Dissatisfied
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
>
Quality of Service/Product
</label>
<div class="flex flex-col gap-y-2">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="quality-rating-excellent"
name="quality-rating"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="quality-rating-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="quality-rating-good"
name="quality-rating"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="quality-rating-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="quality-rating-fair"
name="quality-rating"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="quality-rating-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="quality-rating-poor"
name="quality-rating"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="quality-rating-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
>
Communication and Responsiveness
</label>
<div class="flex flex-col gap-y-2">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="communication-excellent"
name="communication"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="communication-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="communication-good"
name="communication"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="communication-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="communication-fair"
name="communication"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="communication-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="communication-poor"
name="communication"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="communication-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
>
Timeliness of Delivery
</label>
<div class="flex flex-col gap-y-2">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="timeliness-excellent"
name="timeliness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="timeliness-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="timeliness-good"
name="timeliness"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="timeliness-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="timeliness-fair"
name="timeliness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="timeliness-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="timeliness-poor"
name="timeliness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="timeliness-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
>
Professionalism of Staff
</label>
<div class="flex flex-col gap-y-2">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="professionalism-excellent"
name="professionalism"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="professionalism-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="professionalism-good"
name="professionalism"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="professionalism-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="professionalism-fair"
name="professionalism"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="professionalism-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="professionalism-poor"
name="professionalism"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="professionalism-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
>
Value for Money
</label>
<div class="flex flex-col gap-y-2">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="value-for-money-excellent"
name="value-for-money"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="value-for-money-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="value-for-money-good"
name="value-for-money"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="value-for-money-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="value-for-money-fair"
name="value-for-money"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="value-for-money-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="value-for-money-poor"
name="value-for-money"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="value-for-money-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
>
Additional Comments
</legend>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="liked-most"
>
What Did You Like Most About Working With Us?
</label>
<textarea
class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="liked-most"
name="liked-most"
placeholder="Let us know what stood out to you"
></textarea>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="improvements"
>
What Could We Improve?
</label>
<textarea
class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="improvements"
name="improvements"
placeholder="Share any areas where we could do better"
></textarea>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="additional-comments"
>
Additional Comments or Suggestions
</label>
<textarea
class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="additional-comments"
name="additional-comments"
placeholder="Add any other feedback you'd like to share"
></textarea>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
>
Would You Recommend Us to Others?
</label>
<div class="flex flex-col gap-y-2">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="recommendation-yes"
name="recommendation"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="recommendation-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="recommendation-no"
name="recommendation"
required
type="radio"
value="no"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="recommendation-no"
>
No
</label>
</div>
</div>
</div>
</div>
</fieldset>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="testimonial-consent"
name="testimonial-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="testimonial-consent"
>
Man We Use Your Feedback as a Testimonial?
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="follow-up-consent"
name="follow-up-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="follow-up-consent"
>
May We Contact You for a Follow-Up?
</label>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
class="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #cbd5e1;
--color-background-alt: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Inter", sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}
}
Show more
React
Copy
// Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";
export function ExampleForm() {
const [state, handleSubmit] = useForm("FORM_ID");
if (state.succeeded) {
return <p>Thanks for joining!</p>;
}
return (
<form className="fs-form fs-layout__2-column" onSubmit={handleSubmit}>
<fieldset>
<legend className="fs-fieldset-title">Client Information</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 (optional)"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="company-name">
Company Name
</label>
<input
className="fs-input"
id="company-name"
name="company-name"
placeholder="Enter your company 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 (optional)"
/>
</div>
</fieldset>
<fieldset>
<legend className="fs-fieldset-title">Project Details</legend>
<div className="fs-field">
<label className="fs-label" htmlFor="project-service">
Project / Service Received
</label>
<input
className="fs-input"
id="project-service"
name="project-service"
placeholder="Enter the project or service name"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="completion-date">
Date of Service Completion
</label>
<input
className="fs-input"
id="completion-date"
name="completion-date"
placeholder="Select the date service was completed"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="fs-fieldset-title">Feedback</legend>
<div className="fs-field">
<label className="fs-label">Overall Satisfaction</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-satisfaction-very-satisfied"
name="overall-satisfaction"
required
type="radio"
value="very-satisfied"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="overall-satisfaction-very-satisfied"
>
Very Satisfied
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-satisfaction-satisfied"
name="overall-satisfaction"
required
type="radio"
value="satisfied"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="overall-satisfaction-satisfied"
>
Satisfied
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-satisfaction-neutral"
name="overall-satisfaction"
required
type="radio"
value="neutral"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="overall-satisfaction-neutral"
>
Neutral
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-satisfaction-dissatisfied"
name="overall-satisfaction"
required
type="radio"
value="dissatisfied"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="overall-satisfaction-dissatisfied"
>
Dissatisfied
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-satisfaction-very-dissatisfied"
name="overall-satisfaction"
required
type="radio"
value="very-dissatisfied"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="overall-satisfaction-very-dissatisfied"
>
Very Dissatisfied
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Quality of Service/Product</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="quality-rating-excellent"
name="quality-rating"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="quality-rating-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="quality-rating-good"
name="quality-rating"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="quality-rating-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="quality-rating-fair"
name="quality-rating"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="quality-rating-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="quality-rating-poor"
name="quality-rating"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="quality-rating-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Communication and Responsiveness</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="communication-excellent"
name="communication"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="communication-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="communication-good"
name="communication"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="communication-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="communication-fair"
name="communication"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="communication-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="communication-poor"
name="communication"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="communication-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Timeliness of Delivery</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="timeliness-excellent"
name="timeliness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="timeliness-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="timeliness-good"
name="timeliness"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="timeliness-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="timeliness-fair"
name="timeliness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="timeliness-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="timeliness-poor"
name="timeliness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="timeliness-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Professionalism of Staff</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="professionalism-excellent"
name="professionalism"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="professionalism-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="professionalism-good"
name="professionalism"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="professionalism-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="professionalism-fair"
name="professionalism"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="professionalism-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="professionalism-poor"
name="professionalism"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="professionalism-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Value for Money</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="value-for-money-excellent"
name="value-for-money"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="value-for-money-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="value-for-money-good"
name="value-for-money"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="value-for-money-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="value-for-money-fair"
name="value-for-money"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="value-for-money-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="value-for-money-poor"
name="value-for-money"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="value-for-money-poor">
Poor
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend className="fs-fieldset-title">Additional Comments</legend>
<div className="fs-field">
<label className="fs-label" htmlFor="liked-most">
What Did You Like Most About Working With Us?
</label>
<textarea
className="fs-textarea"
id="liked-most"
name="liked-most"
placeholder="Let us know what stood out to you"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="improvements">
What Could We Improve?
</label>
<textarea
className="fs-textarea"
id="improvements"
name="improvements"
placeholder="Share any areas where we could do better"
/>
</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="Add any other feedback you'd like to share"
/>
</div>
<div className="fs-field">
<label className="fs-label">Would You Recommend Us to Others?</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="recommendation-yes"
name="recommendation"
required
type="radio"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="recommendation-yes">
Yes
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="recommendation-no"
name="recommendation"
required
type="radio"
value="no"
/>
</div>
<div>
<label className="fs-label" htmlFor="recommendation-no">
No
</label>
</div>
</div>
</div>
</div>
</fieldset>
<div className="fs-checkbox-field">
<div className="fs-checkbox-wrapper">
<input
className="fs-checkbox"
id="testimonial-consent"
name="testimonial-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="testimonial-consent">
Man We Use Your Feedback as a Testimonial?
</label>
</div>
</div>
<div className="fs-checkbox-field">
<div className="fs-checkbox-wrapper">
<input
className="fs-checkbox"
id="follow-up-consent"
name="follow-up-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="follow-up-consent">
May We Contact You for a Follow-Up?
</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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/** Variables **/
:root {
--color-background: #cbd5e1;
--color-background-alt: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Inter", 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;
font-weight: 500;
line-height: 1.75rem;
margin-bottom: 1.5rem;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.375rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 0.375rem;
color: white;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1rem;
padding: 1rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 3px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
height: 2.5rem;
line-height: 1.5rem;
outline: none;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.125rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-text-default);
height: 1rem;
width: 1rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch-field {
align-items: center;
column-gap: 0.75rem;
display: flex;
justify-content: space-between;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.5rem;
cursor: pointer;
height: 1.5rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.75rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
Show more
React/Tailwind
Copy
// Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";
export function ExampleForm() {
const [state, handleSubmit] = useForm("FORM_ID");
if (state.succeeded) {
return <p>Thanks for joining!</p>;
}
return (
<form className="grid grid-cols-2 gap-x-6 gap-y-6" onSubmit={handleSubmit}>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
Client Information
</legend>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="full-name"
>
Full Name
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="full-name"
name="full-name"
placeholder="Enter your full name (optional)"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="company-name"
>
Company Name
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="company-name"
name="company-name"
placeholder="Enter your company name"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="email-address"
>
Email Address
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="email-address"
name="email-address"
placeholder="Enter your email address (optional)"
/>
</div>
</fieldset>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
Project Details
</legend>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="project-service"
>
Project / Service Received
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="project-service"
name="project-service"
placeholder="Enter the project or service name"
required
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="completion-date"
>
Date of Service Completion
</label>
<input
className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="completion-date"
name="completion-date"
placeholder="Select the date service was completed"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
Feedback
</legend>
<div className="flex flex-col gap-y-1.5">
<label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
Overall Satisfaction
</label>
<div className="flex flex-col gap-y-2">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="overall-satisfaction-very-satisfied"
name="overall-satisfaction"
required
type="radio"
value="very-satisfied"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="overall-satisfaction-very-satisfied"
>
Very Satisfied
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="overall-satisfaction-satisfied"
name="overall-satisfaction"
required
type="radio"
value="satisfied"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="overall-satisfaction-satisfied"
>
Satisfied
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="overall-satisfaction-neutral"
name="overall-satisfaction"
required
type="radio"
value="neutral"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="overall-satisfaction-neutral"
>
Neutral
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="overall-satisfaction-dissatisfied"
name="overall-satisfaction"
required
type="radio"
value="dissatisfied"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="overall-satisfaction-dissatisfied"
>
Dissatisfied
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="overall-satisfaction-very-dissatisfied"
name="overall-satisfaction"
required
type="radio"
value="very-dissatisfied"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="overall-satisfaction-very-dissatisfied"
>
Very Dissatisfied
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-1.5">
<label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
Quality of Service/Product
</label>
<div className="flex flex-col gap-y-2">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="quality-rating-excellent"
name="quality-rating"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="quality-rating-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="quality-rating-good"
name="quality-rating"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="quality-rating-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="quality-rating-fair"
name="quality-rating"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="quality-rating-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="quality-rating-poor"
name="quality-rating"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="quality-rating-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-1.5">
<label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
Communication and Responsiveness
</label>
<div className="flex flex-col gap-y-2">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="communication-excellent"
name="communication"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="communication-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="communication-good"
name="communication"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="communication-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="communication-fair"
name="communication"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="communication-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="communication-poor"
name="communication"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="communication-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-1.5">
<label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
Timeliness of Delivery
</label>
<div className="flex flex-col gap-y-2">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="timeliness-excellent"
name="timeliness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="timeliness-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="timeliness-good"
name="timeliness"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="timeliness-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="timeliness-fair"
name="timeliness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="timeliness-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="timeliness-poor"
name="timeliness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="timeliness-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-1.5">
<label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
Professionalism of Staff
</label>
<div className="flex flex-col gap-y-2">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="professionalism-excellent"
name="professionalism"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="professionalism-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="professionalism-good"
name="professionalism"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="professionalism-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="professionalism-fair"
name="professionalism"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="professionalism-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="professionalism-poor"
name="professionalism"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="professionalism-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-1.5">
<label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
Value for Money
</label>
<div className="flex flex-col gap-y-2">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="value-for-money-excellent"
name="value-for-money"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="value-for-money-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="value-for-money-good"
name="value-for-money"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="value-for-money-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="value-for-money-fair"
name="value-for-money"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="value-for-money-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="value-for-money-poor"
name="value-for-money"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="value-for-money-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
Additional Comments
</legend>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="liked-most"
>
What Did You Like Most About Working With Us?
</label>
<textarea
className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="liked-most"
name="liked-most"
placeholder="Let us know what stood out to you"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="improvements"
>
What Could We Improve?
</label>
<textarea
className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="improvements"
name="improvements"
placeholder="Share any areas where we could do better"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="additional-comments"
>
Additional Comments or Suggestions
</label>
<textarea
className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
id="additional-comments"
name="additional-comments"
placeholder="Add any other feedback you'd like to share"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
Would You Recommend Us to Others?
</label>
<div className="flex flex-col gap-y-2">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="recommendation-yes"
name="recommendation"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="recommendation-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-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="recommendation-no"
name="recommendation"
required
type="radio"
value="no"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="recommendation-no"
>
No
</label>
</div>
</div>
</div>
</div>
</fieldset>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="testimonial-consent"
name="testimonial-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="testimonial-consent"
>
Man We Use Your Feedback as a Testimonial?
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
id="follow-up-consent"
name="follow-up-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="follow-up-consent"
>
May We Contact You for a Follow-Up?
</label>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
className="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
);
}
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #cbd5e1;
--color-background-alt: #64748b;
--color-border-active: #64748b;
--color-border-default: #94a3b8;
--color-highlight: #cbd5e1;
--color-primary: #1e293b;
--color-primary-active: #090f1d;
--color-text-default: #0f172a;
--color-text-muted: #475569;
--font-family-body: "Inter", sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
}
}
Show more
Get started in just a few steps. Create a free account and choose New Form. Choose from our growing list of actions, from Airtable to Zendesk and everything in between. Replace with the form endpoint in the code above with the ID from your new form. Don’t forget to include a name attribute for every input. Formspree works great with static websites, but also plays nicely with many hosting platforms like Shopify, Webflow and more. See the guides below. 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 a Client Feedback Form?
A client feedback form helps businesses collect insights from clients about the services they’ve received, the quality of communication, results delivered, and overall satisfaction. This form is especially valuable for agencies, consultants, freelancers, or service providers looking to improve client relationships and service offerings. Gathering structured client feedback regularly helps identify strengths, address concerns early, and build trust over time.
With Formspree’s client feedback form template, you can quickly set up a clean and professional feedback form on your website or send it via email after a project or milestone. It’s fully customizable and requires no backend setup, with submissions sent directly to your inbox. Formspree’s built-in spam protection and storage options also make managing feedback hassle-free, so you can focus on delivering outstanding client experiences.
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
-
Client Feedback Form
Clean, professional client feedback form for improving service quality and client satisfaction.
Get code -
Anonymous Feedback Form
Clean, privacy-focused anonymous feedback form for honest and unfiltered opinions.
Get code -
Event Feedback Form
Clean, insightful event feedback form for evaluating event success and planning improvements.
Get code