Customer Satisfaction Survey
Add this minimal HTML customer satisfaction survey to your website to effortlessly collect feedback from customers and gain insights into how your business can improve their experience.
Preview
Code
HTML
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="fs-form fs-layout__2-column"
target="_top"
method="POST"
>
<div class="fs-field">
<label class="fs-label" for="full-name">Full Name</label>
<input
class="fs-input"
id="full-name"
name="full-name"
placeholder="Enter your full name"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="email-address">Email Address</label>
<input
class="fs-input"
id="email-address"
name="email-address"
placeholder="Enter your email address"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="phone-number">Phone Number</label>
<input
class="fs-input"
id="phone-number"
name="phone-number"
placeholder="Enter your phone number"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="purchase-date">
Date of Purchase/Interaction
</label>
<input
class="fs-input"
id="purchase-date"
name="purchase-date"
placeholder="Enter the date of your purchase or interaction"
required
/>
</div>
<div class="fs-field">
<label class="fs-label">Product/Service Quality</label>
<div class="fs-radio-group">
<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 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-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-very-good"
name="quality-rating"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label class="fs-label" for="quality-rating-very-good">
Very Good
</label>
</div>
</div>
<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>
</div>
<div class="fs-field">
<label class="fs-label">Ease of Use/Interaction</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="ease-of-use-poor"
name="ease-of-use"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="ease-of-use-poor">Poor</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="ease-of-use-fair"
name="ease-of-use"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="ease-of-use-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="ease-of-use-good"
name="ease-of-use"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="ease-of-use-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="ease-of-use-very-good"
name="ease-of-use"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label class="fs-label" for="ease-of-use-very-good">Very Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="ease-of-use-excellent"
name="ease-of-use"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="ease-of-use-excellent">Excellent</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Customer Service Experience</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="customer-service-poor"
name="customer-service"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="customer-service-poor">Poor</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="customer-service-fair"
name="customer-service"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="customer-service-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="customer-service-good"
name="customer-service"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="customer-service-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="customer-service-very-good"
name="customer-service"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label class="fs-label" for="customer-service-very-good">
Very Good
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="customer-service-excellent"
name="customer-service"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="customer-service-excellent">
Excellent
</label>
</div>
</div>
</div>
</div>
<div class="fs-field" style="margin-bottom: 2rem">
<label class="fs-label" for="overall-satisfaction">
Overall Satisfaction (1-5)
</label>
<input
class="fs-slider"
id="overall-satisfaction"
max="5"
min="1"
name="overall-satisfaction"
required
step="1"
type="range"
value="5"
/>
<div class="slider-label-container">
<span class="slider-label-text">1</span>
<span class="slider-label-text">2</span>
<span class="slider-label-text">3</span>
<span class="slider-label-text">4</span>
<span class="slider-label-text">5</span>
</div>
</div>
<div class="fs-field" style="margin-bottom: 2rem">
<label class="fs-label" for="nps-score">
Likelihood to Recommend (0-10)
</label>
<input
class="fs-slider"
id="nps-score"
max="10"
min="0"
name="nps-score"
required
step="1"
type="range"
value="10"
/>
<div class="slider-label-container">
<span class="slider-label-text">0</span>
<span class="slider-label-text">5</span>
<span class="slider-label-text">10</span>
</div>
</div>
<div class="fs-field">
<label class="fs-label" for="like-most">What Did You Like Most?</label>
<textarea
class="fs-textarea"
id="like-most"
name="like-most"
placeholder="Tell us what stood out to you"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="improvement-suggestions">
What Can We Improve?
</label>
<textarea
class="fs-textarea"
id="improvement-suggestions"
name="improvement-suggestions"
placeholder="Tell us how we can improve"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="additional-comments">
Additional Comments or Suggestions
</label>
<textarea
class="fs-textarea"
id="additional-comments"
name="additional-comments"
placeholder="Share anything else you'd like us to know"
></textarea>
</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 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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Quicksand:wght@300..700&display=swap'");
/** Variables **/
:root {
--color-background: #e7e7e7;
--color-background-alt: #888888;
--color-border-active: #da7105;
--color-border-default: #d1d1d1;
--color-highlight: #fdcf4c;
--color-primary: #b64e08;
--color-primary-active: #79320e;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Quicksand", sans-serif;
--font-family-display: "Lato", sans-serif;
}
/** Base **/
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
/** Components **/
.fs-form {
display: grid;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
margin: 1.5rem 0;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-fieldset-title {
color: var(--color-text-default);
font-family: var(--font-family-display);
font-size: 1.25rem;
line-height: 1.75rem;
margin-bottom: 1.5rem;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 1rem;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 1rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 9999px;
color: white;
cursor: pointer;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
padding: 0.75rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 4px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 9999px;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
height: 3rem;
line-height: 1.5rem;
outline: none;
padding-left: 1rem;
padding-right: 1rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.25rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-border-default);
height: 1.25rem;
width: 1.25rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
border-color: var(--color-border-active);
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
border-color: transparent;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.625em 1.625em;
padding-right: 2.875rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.25rem;
cursor: pointer;
height: 1.25rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.5rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.75rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
/** Utilities **/
.col-span-full {
grid-column: 1 / -1;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
.slider-label-container {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 0.25rem;
}
.slider-label-text {
font-size: 0.75rem;
color: var(--color-text-muted);
text-align: center;
white-space: nowrap;
}
Show more
HTML/Tailwind
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="grid grid-cols-2 gap-x-6 gap-y-6"
target="_top"
method="POST"
>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="full-name"
>
Full Name
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="full-name"
name="full-name"
placeholder="Enter your full name"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="email-address"
>
Email Address
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="email-address"
name="email-address"
placeholder="Enter your email address"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="phone-number"
>
Phone Number
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="phone-number"
name="phone-number"
placeholder="Enter your phone number"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="purchase-date"
>
Date of Purchase/Interaction
</label>
<input
class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="purchase-date"
name="purchase-date"
placeholder="Enter the date of your purchase or interaction"
required
/>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Product/Service Quality
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="quality-rating-poor"
name="quality-rating"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="quality-rating-poor"
>
Poor
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="quality-rating-fair"
name="quality-rating"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 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-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="quality-rating-good"
name="quality-rating"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 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-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="quality-rating-very-good"
name="quality-rating"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="quality-rating-very-good"
>
Very Good
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="quality-rating-excellent"
name="quality-rating"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="quality-rating-excellent"
>
Excellent
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Ease of Use/Interaction
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="ease-of-use-poor"
name="ease-of-use"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="ease-of-use-poor"
>
Poor
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="ease-of-use-fair"
name="ease-of-use"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="ease-of-use-fair"
>
Fair
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="ease-of-use-good"
name="ease-of-use"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="ease-of-use-good"
>
Good
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="ease-of-use-very-good"
name="ease-of-use"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="ease-of-use-very-good"
>
Very Good
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="ease-of-use-excellent"
name="ease-of-use"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="ease-of-use-excellent"
>
Excellent
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Customer Service Experience
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="customer-service-poor"
name="customer-service"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="customer-service-poor"
>
Poor
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="customer-service-fair"
name="customer-service"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="customer-service-fair"
>
Fair
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="customer-service-good"
name="customer-service"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="customer-service-good"
>
Good
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="customer-service-very-good"
name="customer-service"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="customer-service-very-good"
>
Very Good
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="customer-service-excellent"
name="customer-service"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="customer-service-excellent"
>
Excellent
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2" style="margin-bottom: 2rem">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="overall-satisfaction"
>
Overall Satisfaction (1-5)
</label>
<input
class="fs-slider"
id="overall-satisfaction"
max="5"
min="1"
name="overall-satisfaction"
required
step="1"
type="range"
value="5"
/>
<div class="slider-label-container">
<span class="slider-label-text">1</span>
<span class="slider-label-text">2</span>
<span class="slider-label-text">3</span>
<span class="slider-label-text">4</span>
<span class="slider-label-text">5</span>
</div>
</div>
<div class="flex flex-col gap-y-2" style="margin-bottom: 2rem">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="nps-score"
>
Likelihood to Recommend (0-10)
</label>
<input
class="fs-slider"
id="nps-score"
max="10"
min="0"
name="nps-score"
required
step="1"
type="range"
value="10"
/>
<div class="slider-label-container">
<span class="slider-label-text">0</span>
<span class="slider-label-text">5</span>
<span class="slider-label-text">10</span>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="like-most"
>
What Did You Like Most?
</label>
<textarea
class="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="like-most"
name="like-most"
placeholder="Tell us what stood out to you"
></textarea>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="improvement-suggestions"
>
What Can We Improve?
</label>
<textarea
class="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="improvement-suggestions"
name="improvement-suggestions"
placeholder="Tell us how we can improve"
></textarea>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="additional-comments"
>
Additional Comments or Suggestions
</label>
<textarea
class="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="additional-comments"
name="additional-comments"
placeholder="Share anything else you'd like us to know"
></textarea>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="follow-up-consent"
name="follow-up-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="follow-up-consent"
>
May We Contact You for Follow-Up?
</label>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
class="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
Show more
CSS
Copy
@import url("'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Quicksand:wght@300..700&display=swap'");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #e7e7e7;
--color-background-alt: #888888;
--color-border-active: #da7105;
--color-border-default: #d1d1d1;
--color-highlight: #fdcf4c;
--color-primary: #b64e08;
--color-primary-active: #79320e;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Quicksand", sans-serif;
--font-family-display: "Lato", sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.slider-label-container {
@apply flex justify-between w-full mt-1; /* Removed px-2.5 */
}
.slider-label-text {
@apply text-xs text-gray-500 dark:text-gray-400 text-center whitespace-nowrap; /* text-xs is 0.75rem */
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
}
}
Show more
React
Copy
// Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";
export function ExampleForm() {
const [state, handleSubmit] = useForm("FORM_ID");
if (state.succeeded) {
return <p>Thanks for joining!</p>;
}
return (
<form className="fs-form fs-layout__2-column" onSubmit={handleSubmit}>
<div className="fs-field">
<label className="fs-label" htmlFor="full-name">
Full Name
</label>
<input
className="fs-input"
id="full-name"
name="full-name"
placeholder="Enter your full name"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="email-address">
Email Address
</label>
<input
className="fs-input"
id="email-address"
name="email-address"
placeholder="Enter your email address"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="phone-number">
Phone Number
</label>
<input
className="fs-input"
id="phone-number"
name="phone-number"
placeholder="Enter your phone number"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="purchase-date">
Date of Purchase/Interaction
</label>
<input
className="fs-input"
id="purchase-date"
name="purchase-date"
placeholder="Enter the date of your purchase or interaction"
required
/>
</div>
<div className="fs-field">
<label className="fs-label">Product/Service Quality</label>
<div className="fs-radio-group">
<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 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-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-very-good"
name="quality-rating"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label className="fs-label" htmlFor="quality-rating-very-good">
Very Good
</label>
</div>
</div>
<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>
</div>
<div className="fs-field">
<label className="fs-label">Ease of Use/Interaction</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="ease-of-use-poor"
name="ease-of-use"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="ease-of-use-poor">
Poor
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="ease-of-use-fair"
name="ease-of-use"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="ease-of-use-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="ease-of-use-good"
name="ease-of-use"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="ease-of-use-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="ease-of-use-very-good"
name="ease-of-use"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label className="fs-label" htmlFor="ease-of-use-very-good">
Very Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="ease-of-use-excellent"
name="ease-of-use"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="ease-of-use-excellent">
Excellent
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Customer Service Experience</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="customer-service-poor"
name="customer-service"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="customer-service-poor">
Poor
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="customer-service-fair"
name="customer-service"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="customer-service-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="customer-service-good"
name="customer-service"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="customer-service-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="customer-service-very-good"
name="customer-service"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label className="fs-label" htmlFor="customer-service-very-good">
Very Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="customer-service-excellent"
name="customer-service"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="customer-service-excellent">
Excellent
</label>
</div>
</div>
</div>
</div>
<div
className="fs-field"
style="position: relative; margin-bottom: 2rem;"
>
<label className="fs-label" htmlFor="overall-satisfaction">
Overall Satisfaction (1-5)
</label>
<input
className="fs-slider"
defaultValue="5"
id="overall-satisfaction"
max="5"
min="1"
name="overall-satisfaction"
required
step="1"
type="range"
/>
<div className="slider-label-container">
<span className="slider-label-text">1</span>
<span className="slider-label-text">2</span>
<span className="slider-label-text">3</span>
<span className="slider-label-text">4</span>
<span className="slider-label-text">5</span>
</div>
</div>
<div
className="fs-field"
style="position: relative; margin-bottom: 2rem;"
>
<label className="fs-label" htmlFor="nps-score">
Likelihood to Recommend (0-10)
</label>
<input
className="fs-slider"
defaultValue="10"
id="nps-score"
max="10"
min="0"
name="nps-score"
required
step="1"
type="range"
/>
<div className="slider-label-container">
<span className="slider-label-text">0</span>
<span className="slider-label-text">5</span>
<span className="slider-label-text">10</span>
</div>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="like-most">
What Did You Like Most?
</label>
<textarea
className="fs-textarea"
id="like-most"
name="like-most"
placeholder="Tell us what stood out to you"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="improvement-suggestions">
What Can We Improve?
</label>
<textarea
className="fs-textarea"
id="improvement-suggestions"
name="improvement-suggestions"
placeholder="Tell us how we can improve"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="additional-comments">
Additional Comments or Suggestions
</label>
<textarea
className="fs-textarea"
id="additional-comments"
name="additional-comments"
placeholder="Share anything else you'd like us to know"
/>
</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 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=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Quicksand:wght@300..700&display=swap'");
/** Variables **/
:root {
--color-background: #e7e7e7;
--color-background-alt: #888888;
--color-border-active: #da7105;
--color-border-default: #d1d1d1;
--color-highlight: #fdcf4c;
--color-primary: #b64e08;
--color-primary-active: #79320e;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Quicksand", sans-serif;
--font-family-display: "Lato", sans-serif;
}
/** Base **/
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
/** Components **/
.fs-form {
display: grid;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
margin: 1.5rem 0;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-fieldset-title {
color: var(--color-text-default);
font-family: var(--font-family-display);
font-size: 1.25rem;
line-height: 1.75rem;
margin-bottom: 1.5rem;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 1rem;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 1rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 9999px;
color: white;
cursor: pointer;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.5rem;
padding: 0.75rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 4px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 9999px;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
height: 3rem;
line-height: 1.5rem;
outline: none;
padding-left: 1rem;
padding-right: 1rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.25rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-border-default);
height: 1.25rem;
width: 1.25rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
border-color: var(--color-border-active);
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
border-color: transparent;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.625em 1.625em;
padding-right: 2.875rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.25rem;
cursor: pointer;
height: 1.25rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.5rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.75rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
/** Utilities **/
.col-span-full {
grid-column: 1 / -1;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
.slider-label-container {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 0.25rem;
}
.slider-label-text {
font-size: 0.75rem;
color: var(--color-text-muted);
text-align: center;
white-space: nowrap;
}
Show more
React/Tailwind
Copy
// Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";
export function ExampleForm() {
const [state, handleSubmit] = useForm("FORM_ID");
if (state.succeeded) {
return <p>Thanks for joining!</p>;
}
return (
<form className="grid grid-cols-2 gap-x-6 gap-y-6" onSubmit={handleSubmit}>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="full-name"
>
Full Name
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="full-name"
name="full-name"
placeholder="Enter your full name"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="email-address"
>
Email Address
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="email-address"
name="email-address"
placeholder="Enter your email address"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="phone-number"
>
Phone Number
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="phone-number"
name="phone-number"
placeholder="Enter your phone number"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="purchase-date"
>
Date of Purchase/Interaction
</label>
<input
className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="purchase-date"
name="purchase-date"
placeholder="Enter the date of your purchase or interaction"
required
/>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Product/Service Quality
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="quality-rating-poor"
name="quality-rating"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="quality-rating-poor"
>
Poor
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="quality-rating-fair"
name="quality-rating"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 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-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="quality-rating-good"
name="quality-rating"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 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-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="quality-rating-very-good"
name="quality-rating"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="quality-rating-very-good"
>
Very Good
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="quality-rating-excellent"
name="quality-rating"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="quality-rating-excellent"
>
Excellent
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Ease of Use/Interaction
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="ease-of-use-poor"
name="ease-of-use"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="ease-of-use-poor"
>
Poor
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="ease-of-use-fair"
name="ease-of-use"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="ease-of-use-fair"
>
Fair
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="ease-of-use-good"
name="ease-of-use"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="ease-of-use-good"
>
Good
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="ease-of-use-very-good"
name="ease-of-use"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="ease-of-use-very-good"
>
Very Good
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="ease-of-use-excellent"
name="ease-of-use"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="ease-of-use-excellent"
>
Excellent
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Customer Service Experience
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="customer-service-poor"
name="customer-service"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="customer-service-poor"
>
Poor
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="customer-service-fair"
name="customer-service"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="customer-service-fair"
>
Fair
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="customer-service-good"
name="customer-service"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="customer-service-good"
>
Good
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="customer-service-very-good"
name="customer-service"
required
type="radio"
value="very-good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="customer-service-very-good"
>
Very Good
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="customer-service-excellent"
name="customer-service"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="customer-service-excellent"
>
Excellent
</label>
</div>
</div>
</div>
</div>
<div
className="flex flex-col gap-y-2"
style="position: relative; margin-bottom: 2rem;"
>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="overall-satisfaction"
>
Overall Satisfaction (1-5)
</label>
<input
className="fs-slider"
defaultValue="5"
id="overall-satisfaction"
max="5"
min="1"
name="overall-satisfaction"
required
step="1"
type="range"
/>
<div className="slider-label-container">
<span className="slider-label-text">1</span>
<span className="slider-label-text">2</span>
<span className="slider-label-text">3</span>
<span className="slider-label-text">4</span>
<span className="slider-label-text">5</span>
</div>
</div>
<div
className="flex flex-col gap-y-2"
style="position: relative; margin-bottom: 2rem;"
>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="nps-score"
>
Likelihood to Recommend (0-10)
</label>
<input
className="fs-slider"
defaultValue="10"
id="nps-score"
max="10"
min="0"
name="nps-score"
required
step="1"
type="range"
/>
<div className="slider-label-container">
<span className="slider-label-text">0</span>
<span className="slider-label-text">5</span>
<span className="slider-label-text">10</span>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="like-most"
>
What Did You Like Most?
</label>
<textarea
className="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="like-most"
name="like-most"
placeholder="Tell us what stood out to you"
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="improvement-suggestions"
>
What Can We Improve?
</label>
<textarea
className="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="improvement-suggestions"
name="improvement-suggestions"
placeholder="Tell us how we can improve"
/>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="additional-comments"
>
Additional Comments or Suggestions
</label>
<textarea
className="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="additional-comments"
name="additional-comments"
placeholder="Share anything else you'd like us to know"
/>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="follow-up-consent"
name="follow-up-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="follow-up-consent"
>
May We Contact You for Follow-Up?
</label>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
className="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
);
}
Show more
CSS
Copy
@import url("'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Quicksand:wght@300..700&display=swap'");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #e7e7e7;
--color-background-alt: #888888;
--color-border-active: #da7105;
--color-border-default: #d1d1d1;
--color-highlight: #fdcf4c;
--color-primary: #b64e08;
--color-primary-active: #79320e;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Quicksand", sans-serif;
--font-family-display: "Lato", sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.slider-label-container {
@apply flex justify-between w-full mt-1; /* Removed px-2.5 */
}
.slider-label-text {
@apply text-xs text-gray-500 dark:text-gray-400 text-center whitespace-nowrap; /* text-xs is 0.75rem */
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
}
}
Show more
Get started in just a few steps. Create a free account and choose New Form. Choose from our growing list of actions, from Airtable to Zendesk and everything in between. Replace with the form endpoint in the code above with the ID from your new form. Don’t forget to include a name attribute for every input. Formspree works great with static websites, but also plays nicely with many hosting platforms like Shopify, Webflow and more. See the guides below. Follow these steps to copy and paste this form into your Shopify theme and get it working in minutes.
Sign up for a free Formspree account and create a new form.
Once created, you’ll get a unique form endpoint like
Scroll up and copy the full HTML form code shown above. Don’t forget to replace the
Go to your Shopify Admin and navigate to Online Store > Themes > Customize.
Select the page where you want the form to appear, then add a new Custom Liquid section.
Paste the copied HTML into the Custom Liquid field and save.
Scroll up and copy the CSS snippet provided on this page. These styles are optimized for the form layout and appearance.
In your Shopify Admin, go to Online Store > Themes > Actions > Edit Code.
Open the
Return to the page where you added the form. You should now see your styled Formspree form live in your Shopify store.
Test it out and then hit “Publish” to make it live for customers.
Contact forms that work out of the box with top website platforms.
How to use this form
Create a form on Formspree
Add actions and validation rules
Update your form's action
<form action="https://formspree.io/f/{form_id}" method="post">Tweak your form's code
Deploy your form to your hosting platform
How to Use This Form in Your Shopify Store
Create a Form on Formspree
https://formspree.io/f/your-form-id.
Copy the HTML from this Library Page
FORM_ID in the action attribute with your actual form ID.
Paste the Form into a Shopify Page
Copy the CSS Styles
Paste the CSS into Your Shopify Theme
assets/base.css file (or your theme’s main CSS file) and paste the copied CSS at the very end.
Save the file.
Preview and Publish
Integration Guides
Understanding Customer Satisfaction Surveys
Understanding how customers feel about your products and services is essential for success. A customer satisfaction survey is a strategic tool designed to gather valuable insights into customer perceptions, needs, and expectations. By asking targeted satisfaction survey questions, businesses can assess their overall customer experience and identify areas for improvement.
A customer satisfaction survey goes beyond measuring overall satisfaction; it plays a pivotal role in shaping the customer journey and driving customer retention. These surveys help businesses gauge customer sentiment, capture customer feedback, and evaluate service experience across touchpoints. Whether you’re launching a new product, improving customer support, or enhancing a product feature, these surveys provide actionable insights to meet and exceed customer expectations.
Why Customer Satisfaction Surveys Matter
Collecting customer satisfaction data isn’t just about identifying problems—it’s about building a proactive feedback loop. Insights gained from effective customer satisfaction surveys empower businesses to fine-tune their operations, enhance customer loyalty, and reduce customer churn. By integrating surveys into the customer journey, businesses can create meaningful touchpoints that foster trust and engagement.
Additionally, satisfaction surveys are versatile, allowing you to explore various question types such as Likert scale questions, multiple choice questions, and open-ended questions. Tools like a customer satisfaction survey template make it easy to create an experience survey customized to specific needs. Whether using a CSAT survey to measure satisfaction or leveraging a net promoter score to gauge loyalty, surveys can serve as a foundation for continuous improvement.
In this article, we’ll explore everything from crafting the perfect customer survey question to interpreting feedback survey results. You’ll discover best practices for designing impactful surveys, leveraging survey software like Formspree for real-time feedback, and learning from customer satisfaction survey examples. Let’s dive in and unlock the power of customer feedback to transform your overall experience strategy.
When to Use a Customer Satisfaction Survey
A customer satisfaction survey is a valuable tool for businesses at various stages of the customer journey. Here are some key situations where conducting customer satisfaction surveys can yield meaningful insights:
During Product Launches or Service Updates
Launching a new product feature or updating an existing service is an opportune moment to gather customer feedback. Using a customer satisfaction survey template, businesses can collect data on customer sentiment and assess whether the new offering meets customer expectations. This ensures that businesses stay aligned with their audience’s needs and refine their approach when necessary.
After Service Interactions
After a significant service experience, such as resolving a support ticket or completing an onboarding session, businesses can deploy a feedback survey. This helps measure customer effort score and evaluate the effectiveness of customer service teams. Satisfaction survey questions focused on recent interactions provide actionable insights into how well the business is performing in terms of customer support and overall responsiveness.
Evaluating the Customer Journey
A customer satisfaction survey helps map the customer journey by identifying key pain points and moments of delight. For example, deploying an experience survey after major touchpoints can help businesses refine processes to enhance the overall experience. Questions about customer loyalty and customer retention can also help pinpoint areas where the business might be losing customers.
Key Components of a Customer Satisfaction Survey
A well-designed customer satisfaction survey includes several essential elements that ensure the feedback collected is comprehensive and actionable.
Survey Questions
The foundation of any customer satisfaction survey lies in its survey questions. These should be thoughtfully designed to capture a range of insights, from overall satisfaction to specific product features. Incorporating a mix of Likert scale questions, multiple choice questions, and open-ended questions ensures a balance of quantitative and qualitative data.
Examples of Effective Survey Questions:
- How satisfied are you with your recent interaction with our customer service team?
- On a scale of 1-10, how likely are you to recommend us to others? (Net Promoter Score)
- What could we improve about your service experience?
Rating Scale and Customer Sentiment
Using a clear rating scale helps quantify customer sentiment effectively. This can range from a 1-5 Likert scale for satisfaction levels to a binary Yes/No question for simplicity. A robust survey template will also include follow-up questions that dive deeper into the reasons behind a particular rating.
Survey Design and Format
Keeping your survey design simple and focused on recent interactions is key. A customer satisfaction survey template should prioritize clarity and brevity, ensuring higher response rates. Tools like Formspree allow businesses to create custom HTML feedback forms that are easy to embed and customize for specific needs.
Customer Satisfaction Score
The Customer Satisfaction Score (CSAT) is a widely used metric that quantifies customer satisfaction by asking a single question: “How satisfied are you with your experience?” Responses are typically collected using a Likert scale question, such as a 1-5 or 1-7 scale, where higher numbers indicate greater satisfaction.
How to Use CSAT Effectively
CSAT surveys are particularly effective after significant touchpoints, such as resolving a customer service issue or delivering a product. A well-designed CSAT survey can measure overall satisfaction and provide insights into specific product features or service experiences that need attention.
Additional Metrics and Tools
In addition to CSAT, other metrics like Net Promoter Score (NPS) and customer effort score help paint a more comprehensive picture of customer sentiment. Including these metrics in your customer satisfaction survey ensures businesses capture feedback across various dimensions of the customer experience.
Increasing Survey Effectiveness
To boost the accuracy and usefulness of your CSAT results:
- Use simple questions that are easy for customers to understand.
- Ensure your feedback form is accessible and mobile-friendly.
- Incorporate feedback into a feedback loop for continuous improvement.
By focusing on these key aspects, businesses can turn customer satisfaction data into actionable insights that drive customer loyalty and improve the overall customer experience.
Best Practices for Designing Effective Customer Satisfaction Surveys
Creating an effective customer satisfaction survey requires careful planning to ensure the data collected is both actionable and insightful. Here are some best practices to follow:
- Keep It Simple and Relevant: Avoid overwhelming respondents with too many satisfaction questions. A concise survey focused on specific recent interactions or customer expectations increases response rates. Use straightforward survey questions to capture the most important insights.
- Focus on Actionable Feedback: Design your survey to gather insights that directly inform business improvements. Include questions about customer service, product features, and overall satisfaction to highlight actionable areas. For example, Likert scale questions can measure customer sentiment, while open-ended questions provide qualitative insights.
- Personalize the Experience: Tailor your survey to the customer journey. For instance, a follow-up feedback survey after a service experience can help identify immediate improvements. Personalization improves engagement and helps customers feel their feedback is valued.
How to Develop the Right Questions for Your Survey
Crafting the right customer satisfaction survey questions is essential for collecting meaningful data. Here’s how to approach it:
Mix Question Types
Use a variety of question types to capture diverse insights:
- Likert scale questions to measure satisfaction levels.
- Multiple choice questions for structured feedback.
- Open-ended questions to encourage detailed responses.
Align Questions With Goals
Ensure each customer survey question aligns with your objectives. For instance, if you’re measuring loyalty, include Net Promoter Score (NPS). If you’re focused on reducing customer churn, ask about specific pain points.
Balance Breadth and Depth
Avoid overly broad or narrow questions. For example, instead of asking, “How do you feel about our service?” specify, “How satisfied are you with the speed of our service?”
Using Customer Satisfaction Survey Data
The value of a customer satisfaction survey lies in how you use the data collected. Here’s how to turn customer feedback into actionable insights:
- Analyze and Act: Interpret survey results to identify trends in customer sentiment and overall satisfaction. Use this data to refine processes, improve customer service, and enhance product features. A strong feedback loop ensures continuous improvement.
- Create Feedback Programs: Incorporate surveys into a formal feedback loop for regular updates. A consistent program builds customer loyalty by demonstrating a commitment to addressing feedback.
- Measure Progress: Track metrics like customer effort score, and response rates over time. These indicators help monitor the effectiveness of your customer experience strategies and highlight areas for improvement.
Tools for Conducting Customer Satisfaction Surveys
Choosing the right tools for your customer satisfaction survey is critical for seamless data collection and analysis.
Survey Software Options
Popular tools like SurveyMonkey and SurveySparrow can help simplify survey creation.
If control over your form design is important, consider creating your own custom HTML form and letting Formspree handle the data processing. It’s not that hard, especially when using a template like the example above. You can embed custom HTML forms in most web hosting environments by copy pasting the code from this page. For more info, see the integration guides at the bottom of this page.
Automate Feedback Collection
Use automation to streamline survey distribution and analysis. Tools with real-time capabilities allow you to gather immediate insights, enabling businesses to act on feedback quickly and effectively.
By using the right tools and following these practices, you can create great customer satisfaction surveys that drive measurable improvements in your overall customer experience.
How to Increase Survey Response Rates
Getting customers to participate in your customer satisfaction survey is often a challenge. Here are proven strategies to improve response rates:
Incentivize Participation
Offer small rewards, such as discounts or loyalty points, to encourage customers to complete the survey. Integrating customer loyalty programs with your feedback survey can boost engagement.
Simplify Survey Design
A simple question format with easy-to-understand survey questions reduces drop-off rates. Limit the survey length, focus on recent interactions, and ensure it is mobile-friendly to improve accessibility.
Use Personalization
Send surveys tailored to the customer’s service experience or product features. Personalization demonstrates that their opinion matters and increases the likelihood of participation.
Incorporating Customer Satisfaction Surveys Into Your Business
To maximize the impact of customer satisfaction surveys, integrate them seamlessly into your customer journey.
- Timing Matters: Send surveys at key moments, such as after a purchase, product delivery, or support interaction. Timing affects response rates and ensures feedback is relevant to recent interactions.
- Align With Business Goals: Use surveys to address specific objectives, such as enhancing customer service or reducing customer churn. For example, measuring customer sentiment after a policy change can gauge its impact on customer loyalty.
- Continuous Improvement: Incorporate surveys into a broader feedback loop for ongoing refinement of your customer experience strategies. This ensures that insights are consistently acted upon to drive positive changes.
Common Challenges in Conducting Satisfaction Surveys
While powerful, customer satisfaction surveys can encounter pitfalls. Here’s how to overcome common challenges:
Low Response Rates
Combat low participation by simplifying the survey and offering incentives. A short and focused feedback form designed with a user experience focus often yields better results.
Survey Fatigue
Avoid overwhelming customers with too many surveys. Space them out strategically and ensure each survey serves a clear purpose. Prioritize actionable satisfaction survey questions.
Bias in Feedback
Design questions to avoid leading or biased responses. For instance, use neutral phrasing for Likert scale questions and allow for open-ended feedback to capture diverse perspectives.
Leveraging Feedback for Customer Service and Support
Survey data is a goldmine for improving customer service and support processes. Here’s how to put it to work:
- Enhance Support Strategies: Analyze feedback to identify common pain points in customer support interactions. Use this data to train customer service teams and refine processes.
- Build Feedback Loops: Establish a feedback loop that shares insights with relevant teams. Regularly updating processes based on feedback reinforces a culture of continuous improvement and strengthens customer loyalty.
- Reduce Customer Churn: Proactively address issues raised in surveys to prevent customer churn. For example, if customers highlight long response times, streamline your support processes to resolve concerns faster.
The Role of Customer Satisfaction Surveys in Reducing Customer Churn
Satisfied customers are more likely to remain loyal, making customer satisfaction surveys a critical tool for reducing customer churn. You should use surveys to track changes in customer sentiment over time. Metrics like CSAT and Net Promoter Score help identify at-risk customers and address their concerns before they leave.
To reduce customer churn, it is important to establish an ongoing feedback system where survey insights inform business decisions. A robust feedback loop not only reduces churn but also enhances the overall customer experience.
Conclusion
Customer satisfaction surveys are a vital tool for understanding and improving the overall customer experience. By designing effective surveys with thoughtfully crafted satisfaction survey questions, businesses can gather actionable customer feedback that enhances customer service, fosters customer loyalty, and reduces customer churn. Whether you’re launching a new product feature, evaluating a service experience, or seeking insights to refine your operations, these surveys provide the data needed to align with customer expectations.
From using metrics like CSAT to leveraging tools like Formspree for seamless survey deployment, the possibilities for optimizing your feedback process are endless. Following best practices such as simplifying survey design, personalizing questions to the customer journey, and incorporating a robust feedback loop, ensures that your surveys deliver meaningful results.
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
-
NPS Survey Form
Clean, focused NPS survey form for quick insights into customer satisfaction and retention.
Get code -
Complaint Form
Clean, effective complaint form for capturing grievances and resolving issues quickly.
Get code -
Client Feedback Form
Clean, professional client feedback form for improving service quality and client satisfaction.
Get code