Event Feedback Form
Add this minimal HTML event feedback form to your website or post-event emails to gather valuable feedback from attendees. Whether it’s a conference, workshop, or social event, this form helps you understand what went well and what could be improved—informing better planning for future events.
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="event-name">Event Name</label>
<input
class="fs-input"
id="event-name"
name="event-name"
placeholder="Enter or select the event name"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="event-date">Date of the Event</label>
<input
class="fs-input"
id="event-date"
name="event-date"
placeholder="Select the event date"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="event-location">
Location (if applicable)
</label>
<input
class="fs-input"
id="event-location"
name="event-location"
placeholder="Enter or select the location"
/>
</div>
<div class="fs-field">
<label class="fs-label" for="attendee-type">Type of Attendee</label>
<select class="fs-select" id="attendee-type" name="attendee-type" required>
<option value="guest">Guest</option>
<option value="speaker">Speaker</option>
<option value="sponsor">Sponsor</option>
<option value="vendor">Vendor</option>
</select>
</div>
<div class="fs-field">
<label class="fs-label">Overall Satisfaction With the Event</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-satisfaction-excellent"
name="overall-satisfaction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="overall-satisfaction-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-satisfaction-good"
name="overall-satisfaction"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="overall-satisfaction-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-satisfaction-fair"
name="overall-satisfaction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="overall-satisfaction-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="overall-satisfaction-poor"
name="overall-satisfaction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="overall-satisfaction-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Quality of Speakers / Presenters</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="speaker-quality-excellent"
name="speaker-quality"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="speaker-quality-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="speaker-quality-good"
name="speaker-quality"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="speaker-quality-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="speaker-quality-fair"
name="speaker-quality"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="speaker-quality-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="speaker-quality-poor"
name="speaker-quality"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="speaker-quality-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Venue and Facilities</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="venue-rating-excellent"
name="venue-rating"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="venue-rating-excellent">Excellent</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="venue-rating-good"
name="venue-rating"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="venue-rating-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="venue-rating-fair"
name="venue-rating"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="venue-rating-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="venue-rating-poor"
name="venue-rating"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="venue-rating-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Event Organization and Logistics</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="event-organization-excellent"
name="event-organization"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="event-organization-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="event-organization-good"
name="event-organization"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="event-organization-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="event-organization-fair"
name="event-organization"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="event-organization-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="event-organization-poor"
name="event-organization"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="event-organization-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Usefulness of Sessions / Activities</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="session-usefulness-excellent"
name="session-usefulness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="session-usefulness-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="session-usefulness-good"
name="session-usefulness"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="session-usefulness-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="session-usefulness-fair"
name="session-usefulness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="session-usefulness-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="session-usefulness-poor"
name="session-usefulness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="session-usefulness-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Networking Opportunities</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="networking-excellent"
name="networking"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="networking-excellent">Excellent</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="networking-good"
name="networking"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="networking-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="networking-fair"
name="networking"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="networking-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="networking-poor"
name="networking"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="networking-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Food and Refreshments</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="food-rating-excellent"
name="food-rating"
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="food-rating-excellent">Excellent</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="food-rating-good"
name="food-rating"
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="food-rating-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="food-rating-fair"
name="food-rating"
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="food-rating-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="food-rating-poor"
name="food-rating"
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="food-rating-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Value for Time / Money</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="value-excellent"
name="value"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="value-excellent">Excellent</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="value-good"
name="value"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="value-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="value-fair"
name="value"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="value-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="value-poor"
name="value"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="value-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label" for="liked-most">
What Did You Enjoy Most About the Event?
</label>
<textarea
class="fs-textarea"
id="liked-most"
name="liked-most"
placeholder="Let us know what you liked most"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="improvement-suggestions">
What Could Be Improved?
</label>
<textarea
class="fs-textarea"
id="improvement-suggestions"
name="improvement-suggestions"
placeholder="Tell us what could be better next time"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="future-suggestions">
Suggestions for Future Events
</label>
<textarea
class="fs-textarea"
id="future-suggestions"
name="future-suggestions"
placeholder="Share your ideas or topics for future events"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label">Would You Attend This Event Again?</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="attend-again-yes"
name="attend-again"
required
type="radio"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="attend-again-yes">Yes</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="attend-again-no"
name="attend-again"
required
type="radio"
value="no"
/>
</div>
<div>
<label class="fs-label" for="attend-again-no">No</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Would You Recommend This Event to Others?</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="recommend-event-yes"
name="recommend-event"
required
type="radio"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="recommend-event-yes">Yes</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="recommend-event-no"
name="recommend-event"
required
type="radio"
value="no"
/>
</div>
<div>
<label class="fs-label" for="recommend-event-no">No</label>
</div>
</div>
</div>
</div>
<div class="fs-checkbox-field">
<div class="fs-checkbox-wrapper">
<input
class="fs-checkbox"
id="future-contact-consent"
name="future-contact-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="future-contact-consent">
May We Contact You About Future Events?
</label>
</div>
</div>
<div class="fs-field">
<label class="fs-label" for="email-address">Email Address (optional)</label>
<input
class="fs-input"
id="email-address"
name="email-address"
placeholder="Enter your email if you'd like to hear from us"
/>
</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-field {
align-items: center;
column-gap: 0.75rem;
display: flex;
justify-content: space-between;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.25rem;
cursor: pointer;
height: 1.25rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.5rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.75rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
Show more
HTML/Tailwind
Copy
<form
action="https://formspree.io/f/{FORM_ID}"
class="grid grid-cols-2 gap-x-6 gap-y-6"
target="_top"
method="POST"
>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="event-name"
>
Event 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="event-name"
name="event-name"
placeholder="Enter or select the event 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="event-date"
>
Date of the Event
</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="event-date"
name="event-date"
placeholder="Select the event date"
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="event-location"
>
Location (if applicable)
</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="event-location"
name="event-location"
placeholder="Enter or select the location"
/>
</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="attendee-type"
>
Type of Attendee
</label>
<select
class="bg-caret-down h-12 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] 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="attendee-type"
name="attendee-type"
required
>
<option value="guest">Guest</option>
<option value="speaker">Speaker</option>
<option value="sponsor">Sponsor</option>
<option value="vendor">Vendor</option>
</select>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Overall Satisfaction With the Event
</label>
<div class="flex flex-col gap-y-4">
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-satisfaction-excellent"
name="overall-satisfaction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="overall-satisfaction-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-satisfaction-good"
name="overall-satisfaction"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="overall-satisfaction-good"
>
Good
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-satisfaction-fair"
name="overall-satisfaction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="overall-satisfaction-fair"
>
Fair
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-satisfaction-poor"
name="overall-satisfaction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="overall-satisfaction-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Quality of Speakers / Presenters
</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="speaker-quality-excellent"
name="speaker-quality"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="speaker-quality-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="speaker-quality-good"
name="speaker-quality"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="speaker-quality-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="speaker-quality-fair"
name="speaker-quality"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="speaker-quality-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="speaker-quality-poor"
name="speaker-quality"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="speaker-quality-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Venue and Facilities
</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="venue-rating-excellent"
name="venue-rating"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="venue-rating-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-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="venue-rating-good"
name="venue-rating"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="venue-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="venue-rating-fair"
name="venue-rating"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="venue-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="venue-rating-poor"
name="venue-rating"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="venue-rating-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Event Organization and Logistics
</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="event-organization-excellent"
name="event-organization"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="event-organization-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="event-organization-good"
name="event-organization"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="event-organization-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="event-organization-fair"
name="event-organization"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="event-organization-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="event-organization-poor"
name="event-organization"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="event-organization-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Usefulness of Sessions / Activities
</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="session-usefulness-excellent"
name="session-usefulness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="session-usefulness-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="session-usefulness-good"
name="session-usefulness"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="session-usefulness-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="session-usefulness-fair"
name="session-usefulness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="session-usefulness-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="session-usefulness-poor"
name="session-usefulness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="session-usefulness-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Networking Opportunities
</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="networking-excellent"
name="networking"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="networking-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="networking-good"
name="networking"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="networking-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="networking-fair"
name="networking"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="networking-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="networking-poor"
name="networking"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="networking-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Food and Refreshments
</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="food-rating-excellent"
name="food-rating"
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="food-rating-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-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="food-rating-good"
name="food-rating"
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="food-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="food-rating-fair"
name="food-rating"
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="food-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="food-rating-poor"
name="food-rating"
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="food-rating-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
>
Value for Time / Money
</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="value-excellent"
name="value"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="value-excellent"
>
Excellent
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="value-good"
name="value"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="value-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="value-fair"
name="value"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="value-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="value-poor"
name="value"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="value-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="liked-most"
>
What Did You Enjoy Most About the Event?
</label>
<textarea
class="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="liked-most"
name="liked-most"
placeholder="Let us know what you liked most"
></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 Could Be Improved?
</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 what could be better next time"
></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="future-suggestions"
>
Suggestions for Future Events
</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="future-suggestions"
name="future-suggestions"
placeholder="Share your ideas or topics for future events"
></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]"
>
Would You Attend This Event Again?
</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="attend-again-yes"
name="attend-again"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="attend-again-yes"
>
Yes
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="attend-again-no"
name="attend-again"
required
type="radio"
value="no"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="attend-again-no"
>
No
</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]"
>
Would You Recommend This Event to Others?
</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="recommend-event-yes"
name="recommend-event"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="recommend-event-yes"
>
Yes
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="recommend-event-no"
name="recommend-event"
required
type="radio"
value="no"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="recommend-event-no"
>
No
</label>
</div>
</div>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="future-contact-consent"
name="future-contact-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="future-contact-consent"
>
May We Contact You About Future Events?
</label>
</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="email-address"
>
Email Address (optional)
</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 if you'd like to hear from us"
/>
</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;
}
}
@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="event-name">
Event Name
</label>
<input
className="fs-input"
id="event-name"
name="event-name"
placeholder="Enter or select the event name"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="event-date">
Date of the Event
</label>
<input
className="fs-input"
id="event-date"
name="event-date"
placeholder="Select the event date"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="event-location">
Location (if applicable)
</label>
<input
className="fs-input"
id="event-location"
name="event-location"
placeholder="Enter or select the location"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="attendee-type">
Type of Attendee
</label>
<select
className="fs-select"
id="attendee-type"
name="attendee-type"
required
>
<option value="guest">Guest</option>
<option value="speaker">Speaker</option>
<option value="sponsor">Sponsor</option>
<option value="vendor">Vendor</option>
</select>
</div>
<div className="fs-field">
<label className="fs-label">Overall Satisfaction With the Event</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-satisfaction-excellent"
name="overall-satisfaction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="overall-satisfaction-excellent"
>
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-satisfaction-good"
name="overall-satisfaction"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="overall-satisfaction-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-satisfaction-fair"
name="overall-satisfaction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="overall-satisfaction-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="overall-satisfaction-poor"
name="overall-satisfaction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="overall-satisfaction-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Quality of Speakers / Presenters</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="speaker-quality-excellent"
name="speaker-quality"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="speaker-quality-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="speaker-quality-good"
name="speaker-quality"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="speaker-quality-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="speaker-quality-fair"
name="speaker-quality"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="speaker-quality-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="speaker-quality-poor"
name="speaker-quality"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="speaker-quality-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Venue and Facilities</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="venue-rating-excellent"
name="venue-rating"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="venue-rating-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="venue-rating-good"
name="venue-rating"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="venue-rating-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="venue-rating-fair"
name="venue-rating"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="venue-rating-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="venue-rating-poor"
name="venue-rating"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="venue-rating-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Event Organization and Logistics</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="event-organization-excellent"
name="event-organization"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="event-organization-excellent"
>
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="event-organization-good"
name="event-organization"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="event-organization-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="event-organization-fair"
name="event-organization"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="event-organization-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="event-organization-poor"
name="event-organization"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="event-organization-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Usefulness of Sessions / Activities</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="session-usefulness-excellent"
name="session-usefulness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="session-usefulness-excellent"
>
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="session-usefulness-good"
name="session-usefulness"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="session-usefulness-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="session-usefulness-fair"
name="session-usefulness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="session-usefulness-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="session-usefulness-poor"
name="session-usefulness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="session-usefulness-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Networking Opportunities</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="networking-excellent"
name="networking"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="networking-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="networking-good"
name="networking"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="networking-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="networking-fair"
name="networking"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="networking-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="networking-poor"
name="networking"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="networking-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Food and Refreshments</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="food-rating-excellent"
name="food-rating"
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="food-rating-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="food-rating-good"
name="food-rating"
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="food-rating-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="food-rating-fair"
name="food-rating"
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="food-rating-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="food-rating-poor"
name="food-rating"
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="food-rating-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Value for Time / Money</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="value-excellent"
name="value"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="value-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="value-good"
name="value"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="value-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="value-fair"
name="value"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="value-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="value-poor"
name="value"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="value-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="liked-most">
What Did You Enjoy Most About the Event?
</label>
<textarea
className="fs-textarea"
id="liked-most"
name="liked-most"
placeholder="Let us know what you liked most"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="improvement-suggestions">
What Could Be Improved?
</label>
<textarea
className="fs-textarea"
id="improvement-suggestions"
name="improvement-suggestions"
placeholder="Tell us what could be better next time"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="future-suggestions">
Suggestions for Future Events
</label>
<textarea
className="fs-textarea"
id="future-suggestions"
name="future-suggestions"
placeholder="Share your ideas or topics for future events"
/>
</div>
<div className="fs-field">
<label className="fs-label">Would You Attend This Event Again?</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="attend-again-yes"
name="attend-again"
required
type="radio"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="attend-again-yes">
Yes
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="attend-again-no"
name="attend-again"
required
type="radio"
value="no"
/>
</div>
<div>
<label className="fs-label" htmlFor="attend-again-no">
No
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">
Would You Recommend This Event to Others?
</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="recommend-event-yes"
name="recommend-event"
required
type="radio"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="recommend-event-yes">
Yes
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="recommend-event-no"
name="recommend-event"
required
type="radio"
value="no"
/>
</div>
<div>
<label className="fs-label" htmlFor="recommend-event-no">
No
</label>
</div>
</div>
</div>
</div>
<div className="fs-checkbox-field">
<div className="fs-checkbox-wrapper">
<input
className="fs-checkbox"
id="future-contact-consent"
name="future-contact-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="future-contact-consent">
May We Contact You About Future Events?
</label>
</div>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="email-address">
Email Address (optional)
</label>
<input
className="fs-input"
id="email-address"
name="email-address"
placeholder="Enter your email if you'd like to hear from us"
/>
</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-field {
align-items: center;
column-gap: 0.75rem;
display: flex;
justify-content: space-between;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.25rem;
cursor: pointer;
height: 1.25rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.5rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 4px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.75rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1px inset;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
Show more
React/Tailwind
Copy
// Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";
export function ExampleForm() {
const [state, handleSubmit] = useForm("FORM_ID");
if (state.succeeded) {
return <p>Thanks for joining!</p>;
}
return (
<form className="grid grid-cols-2 gap-x-6 gap-y-6" onSubmit={handleSubmit}>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="event-name"
>
Event 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="event-name"
name="event-name"
placeholder="Enter or select the event 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="event-date"
>
Date of the Event
</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="event-date"
name="event-date"
placeholder="Select the event date"
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="event-location"
>
Location (if applicable)
</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="event-location"
name="event-location"
placeholder="Enter or select the location"
/>
</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="attendee-type"
>
Type of Attendee
</label>
<select
className="bg-caret-down h-12 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] 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="attendee-type"
name="attendee-type"
required
>
<option value="guest">Guest</option>
<option value="speaker">Speaker</option>
<option value="sponsor">Sponsor</option>
<option value="vendor">Vendor</option>
</select>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Overall Satisfaction With the Event
</label>
<div className="flex flex-col gap-y-4">
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-satisfaction-excellent"
name="overall-satisfaction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="overall-satisfaction-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-satisfaction-good"
name="overall-satisfaction"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="overall-satisfaction-good"
>
Good
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-satisfaction-fair"
name="overall-satisfaction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="overall-satisfaction-fair"
>
Fair
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="overall-satisfaction-poor"
name="overall-satisfaction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="overall-satisfaction-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Quality of Speakers / Presenters
</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="speaker-quality-excellent"
name="speaker-quality"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="speaker-quality-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="speaker-quality-good"
name="speaker-quality"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="speaker-quality-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="speaker-quality-fair"
name="speaker-quality"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="speaker-quality-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="speaker-quality-poor"
name="speaker-quality"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="speaker-quality-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Venue and Facilities
</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="venue-rating-excellent"
name="venue-rating"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="venue-rating-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-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="venue-rating-good"
name="venue-rating"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="venue-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="venue-rating-fair"
name="venue-rating"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="venue-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="venue-rating-poor"
name="venue-rating"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="venue-rating-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Event Organization and Logistics
</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="event-organization-excellent"
name="event-organization"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="event-organization-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="event-organization-good"
name="event-organization"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="event-organization-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="event-organization-fair"
name="event-organization"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="event-organization-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="event-organization-poor"
name="event-organization"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="event-organization-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Usefulness of Sessions / Activities
</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="session-usefulness-excellent"
name="session-usefulness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="session-usefulness-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="session-usefulness-good"
name="session-usefulness"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="session-usefulness-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="session-usefulness-fair"
name="session-usefulness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="session-usefulness-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="session-usefulness-poor"
name="session-usefulness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="session-usefulness-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Networking Opportunities
</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="networking-excellent"
name="networking"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="networking-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="networking-good"
name="networking"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="networking-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="networking-fair"
name="networking"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="networking-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="networking-poor"
name="networking"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="networking-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Food and Refreshments
</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="food-rating-excellent"
name="food-rating"
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="food-rating-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-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="food-rating-good"
name="food-rating"
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="food-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="food-rating-fair"
name="food-rating"
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="food-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="food-rating-poor"
name="food-rating"
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="food-rating-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Value for Time / Money
</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="value-excellent"
name="value"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="value-excellent"
>
Excellent
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="value-good"
name="value"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="value-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="value-fair"
name="value"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="value-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="value-poor"
name="value"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="value-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-y-2">
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="liked-most"
>
What Did You Enjoy Most About the Event?
</label>
<textarea
className="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="liked-most"
name="liked-most"
placeholder="Let us know what you liked most"
/>
</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 Could Be Improved?
</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 what could be better next time"
/>
</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="future-suggestions"
>
Suggestions for Future Events
</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="future-suggestions"
name="future-suggestions"
placeholder="Share your ideas or topics for future events"
/>
</div>
<div className="flex flex-col gap-y-2">
<label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
Would You Attend This Event Again?
</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="attend-again-yes"
name="attend-again"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="attend-again-yes"
>
Yes
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="attend-again-no"
name="attend-again"
required
type="radio"
value="no"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="attend-again-no"
>
No
</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]">
Would You Recommend This Event to Others?
</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="recommend-event-yes"
name="recommend-event"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="recommend-event-yes"
>
Yes
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="recommend-event-no"
name="recommend-event"
required
type="radio"
value="no"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="recommend-event-no"
>
No
</label>
</div>
</div>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="future-contact-consent"
name="future-contact-consent"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="future-contact-consent"
>
May We Contact You About Future Events?
</label>
</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="email-address"
>
Email Address (optional)
</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 if you'd like to hear from us"
/>
</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;
}
}
@layer utilities {
.bg-caret-down {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.bg-checkbox-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.bg-radio-checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.bg-switch-thumb {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
}
}
Show more
Get started in just a few steps. Create a free account and choose New Form. Choose from our growing list of actions, from Airtable to Zendesk and everything in between. Replace with the form endpoint in the code above with the ID from your new form. Don’t forget to include a name attribute for every input. Formspree works great with static websites, but also plays nicely with many hosting platforms like Shopify, Webflow and more. See the guides below. Follow these steps to copy and paste this form into your Shopify theme and get it working in minutes.
Sign up for a free Formspree account and create a new form.
Once created, you’ll get a unique form endpoint like
Scroll up and copy the full HTML form code shown above. Don’t forget to replace the
Go to your Shopify Admin and navigate to Online Store > Themes > Customize.
Select the page where you want the form to appear, then add a new Custom Liquid section.
Paste the copied HTML into the Custom Liquid field and save.
Scroll up and copy the CSS snippet provided on this page. These styles are optimized for the form layout and appearance.
In your Shopify Admin, go to Online Store > Themes > Actions > Edit Code.
Open the
Return to the page where you added the form. You should now see your styled Formspree form live in your Shopify store.
Test it out and then hit “Publish” to make it live for customers.
Contact forms that work out of the box with top website platforms.
How to use this form
Create a form on Formspree
Add actions and validation rules
Update your form's action
<form action="https://formspree.io/f/{form_id}" method="post">Tweak your form's code
Deploy your form to your hosting platform
How to Use This Form in Your Shopify Store
Create a Form on Formspree
https://formspree.io/f/your-form-id.
Copy the HTML from this Library Page
FORM_ID in the action attribute with your actual form ID.
Paste the Form into a Shopify Page
Copy the CSS Styles
Paste the CSS into Your Shopify Theme
assets/base.css file (or your theme’s main CSS file) and paste the copied CSS at the very end.
Save the file.
Preview and Publish
Integration Guides
What is an Event Feedback Form?
An event feedback form helps organizers gather insights from attendees after an event to understand what worked well and where there’s room for improvement. It typically includes questions about the venue, content, speakers, logistics, and overall satisfaction. Whether you’re hosting a conference, webinar, or community meetup, collecting event feedback is key to improving future experiences and demonstrating that you value your attendees’ input.
With Formspree’s event feedback form template, you can easily capture post-event reflections via a simple, customizable HTML form. Integrate it into your event website, send it in follow-up emails, or use it on-site with a tablet. Formspree’s submission handling and email notifications ensure you never miss a response, making it easier than ever to track feedback and enhance your next event.
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
-
Anonymous Feedback Form
Clean, privacy-focused anonymous feedback form for honest and unfiltered opinions.
Get code -
Event Feedback Form
Clean, insightful event feedback form for evaluating event success and planning improvements.
Get code -
Course Evaluation Form
Clean, organized course evaluation form for measuring effectiveness and improving instruction.
Get code