Course Evaluation Form
Add this minimal HTML course evaluation form to your website or learning platform to gather student feedback after classes or training sessions. This form helps educators and institutions understand what’s working and what needs improvement—making it easier to refine course content and enhance learning outcomes.
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="course-title">Course Title</label>
<input
class="fs-input"
id="course-title"
name="course-title"
placeholder="Enter or select the course title"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="instructor-name">Instructor Name</label>
<input
class="fs-input"
id="instructor-name"
name="instructor-name"
placeholder="Enter or select the instructor's name"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="evaluation-date">Date of Evaluation</label>
<input
class="fs-input"
id="evaluation-date"
name="evaluation-date"
placeholder="Select the date of evaluation"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="term">Term / Semester</label>
<input
class="fs-input"
id="term"
name="term"
placeholder="e.g., Fall 2024"
required
/>
</div>
<div class="fs-field">
<label class="fs-label">Overall Course Satisfaction</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="course-satisfaction-excellent"
name="course-satisfaction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="course-satisfaction-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="course-satisfaction-good"
name="course-satisfaction"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="course-satisfaction-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="course-satisfaction-fair"
name="course-satisfaction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="course-satisfaction-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="course-satisfaction-poor"
name="course-satisfaction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="course-satisfaction-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Instructor’s Effectiveness</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="instructor-effectiveness-excellent"
name="instructor-effectiveness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="instructor-effectiveness-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="instructor-effectiveness-good"
name="instructor-effectiveness"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="instructor-effectiveness-good">
Good
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="instructor-effectiveness-fair"
name="instructor-effectiveness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="instructor-effectiveness-fair">
Fair
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="instructor-effectiveness-poor"
name="instructor-effectiveness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="instructor-effectiveness-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Clarity of Instruction</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="clarity-of-instruction-excellent"
name="clarity-of-instruction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="clarity-of-instruction-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="clarity-of-instruction-good"
name="clarity-of-instruction"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="clarity-of-instruction-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="clarity-of-instruction-fair"
name="clarity-of-instruction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="clarity-of-instruction-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="clarity-of-instruction-poor"
name="clarity-of-instruction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="clarity-of-instruction-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Course Materials and Resources</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="course-materials-excellent"
name="course-materials"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="course-materials-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="course-materials-good"
name="course-materials"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="course-materials-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="course-materials-fair"
name="course-materials"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="course-materials-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="course-materials-poor"
name="course-materials"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="course-materials-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Usefulness of Assignments / Projects</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="assignments-usefulness-excellent"
name="assignments-usefulness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="assignments-usefulness-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="assignments-usefulness-good"
name="assignments-usefulness"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="assignments-usefulness-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="assignments-usefulness-fair"
name="assignments-usefulness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="assignments-usefulness-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="assignments-usefulness-poor"
name="assignments-usefulness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="assignments-usefulness-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Class Engagement / Participation</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="class-engagement-excellent"
name="class-engagement"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="class-engagement-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="class-engagement-good"
name="class-engagement"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="class-engagement-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="class-engagement-fair"
name="class-engagement"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="class-engagement-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="class-engagement-poor"
name="class-engagement"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="class-engagement-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Pace of the Course</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="course-pace-too-fast"
name="course-pace"
required
type="radio"
value="too-fast"
/>
</div>
<div>
<label class="fs-label" for="course-pace-too-fast">Too Fast</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="course-pace-just-right"
name="course-pace"
required
type="radio"
value="just-right"
/>
</div>
<div>
<label class="fs-label" for="course-pace-just-right">
Just Right
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="course-pace-too-slow"
name="course-pace"
required
type="radio"
value="too-slow"
/>
</div>
<div>
<label class="fs-label" for="course-pace-too-slow">Too Slow</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label">Fairness of Grading</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="grading-fairness-excellent"
name="grading-fairness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label class="fs-label" for="grading-fairness-excellent">
Excellent
</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="grading-fairness-good"
name="grading-fairness"
required
type="radio"
value="good"
/>
</div>
<div>
<label class="fs-label" for="grading-fairness-good">Good</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="grading-fairness-fair"
name="grading-fairness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label class="fs-label" for="grading-fairness-fair">Fair</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="grading-fairness-poor"
name="grading-fairness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label class="fs-label" for="grading-fairness-poor">Poor</label>
</div>
</div>
</div>
</div>
<div class="fs-field">
<label class="fs-label" for="liked-most">
What Did You Like Most About the Course?
</label>
<textarea
class="fs-textarea"
id="liked-most"
name="liked-most"
placeholder="Share what you enjoyed most about this course"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="needs-improvement">
What Could Be Improved?
</label>
<textarea
class="fs-textarea"
id="needs-improvement"
name="needs-improvement"
placeholder="Let us know what could be improved"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="future-suggestions">
Suggestions for Future Offerings
</label>
<textarea
class="fs-textarea"
id="future-suggestions"
name="future-suggestions"
placeholder="Share ideas or suggestions for future course offerings"
></textarea>
</div>
<div class="fs-field">
<label class="fs-label">Would You Recommend This Course to Others?</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="recommend-course-yes"
name="recommend-course"
required
type="radio"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="recommend-course-yes">Yes</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="recommend-course-no"
name="recommend-course"
required
type="radio"
value="no"
/>
</div>
<div>
<label class="fs-label" for="recommend-course-no">No</label>
</div>
</div>
</div>
</div>
<div class="fs-checkbox-field">
<div class="fs-checkbox-wrapper">
<input
class="fs-checkbox"
id="share-feedback"
name="share-feedback"
type="checkbox"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="share-feedback">
May We Share Your Feedback With the Instructor?
</label>
</div>
</div>
<div class="fs-field">
<label class="fs-label">
Would You Take Another Course With This Instructor?
</label>
<div class="fs-radio-group">
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="take-again-yes"
name="take-again"
required
type="radio"
value="yes"
/>
</div>
<div>
<label class="fs-label" for="take-again-yes">Yes</label>
</div>
</div>
<div class="fs-radio-field">
<div class="fs-radio-wrapper">
<input
class="fs-radio"
id="take-again-no"
name="take-again"
required
type="radio"
value="no"
/>
</div>
<div>
<label class="fs-label" for="take-again-no">No</label>
</div>
</div>
</div>
</div>
<div class="fs-button-group">
<button class="fs-button" type="submit">Submit</button>
</div>
</form>
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/** Variables **/
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Figtree", system-ui, sans-serif;
--font-family-display: "Poppins", system-ui, 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="course-title"
>
Course Title
</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="course-title"
name="course-title"
placeholder="Enter or select the course title"
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="instructor-name"
>
Instructor 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="instructor-name"
name="instructor-name"
placeholder="Enter or select the instructor's 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="evaluation-date"
>
Date of Evaluation
</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="evaluation-date"
name="evaluation-date"
placeholder="Select the date of evaluation"
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="term"
>
Term / Semester
</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="term"
name="term"
placeholder="e.g., Fall 2024"
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]"
>
Overall Course Satisfaction
</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="course-satisfaction-excellent"
name="course-satisfaction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="course-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="course-satisfaction-good"
name="course-satisfaction"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="course-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="course-satisfaction-fair"
name="course-satisfaction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="course-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="course-satisfaction-poor"
name="course-satisfaction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="course-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]"
>
Instructor’s Effectiveness
</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="instructor-effectiveness-excellent"
name="instructor-effectiveness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="instructor-effectiveness-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="instructor-effectiveness-good"
name="instructor-effectiveness"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="instructor-effectiveness-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="instructor-effectiveness-fair"
name="instructor-effectiveness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="instructor-effectiveness-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="instructor-effectiveness-poor"
name="instructor-effectiveness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="instructor-effectiveness-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]"
>
Clarity of Instruction
</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="clarity-of-instruction-excellent"
name="clarity-of-instruction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="clarity-of-instruction-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="clarity-of-instruction-good"
name="clarity-of-instruction"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="clarity-of-instruction-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="clarity-of-instruction-fair"
name="clarity-of-instruction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="clarity-of-instruction-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="clarity-of-instruction-poor"
name="clarity-of-instruction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="clarity-of-instruction-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]"
>
Course Materials and Resources
</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="course-materials-excellent"
name="course-materials"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="course-materials-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="course-materials-good"
name="course-materials"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="course-materials-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="course-materials-fair"
name="course-materials"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="course-materials-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="course-materials-poor"
name="course-materials"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="course-materials-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 Assignments / Projects
</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="assignments-usefulness-excellent"
name="assignments-usefulness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="assignments-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="assignments-usefulness-good"
name="assignments-usefulness"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="assignments-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="assignments-usefulness-fair"
name="assignments-usefulness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="assignments-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="assignments-usefulness-poor"
name="assignments-usefulness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="assignments-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]"
>
Class Engagement / Participation
</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="class-engagement-excellent"
name="class-engagement"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="class-engagement-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="class-engagement-good"
name="class-engagement"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="class-engagement-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="class-engagement-fair"
name="class-engagement"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="class-engagement-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="class-engagement-poor"
name="class-engagement"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="class-engagement-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]"
>
Pace of the Course
</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="course-pace-too-fast"
name="course-pace"
required
type="radio"
value="too-fast"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="course-pace-too-fast"
>
Too Fast
</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="course-pace-just-right"
name="course-pace"
required
type="radio"
value="just-right"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="course-pace-just-right"
>
Just Right
</label>
</div>
</div>
<div class="flex gap-x-2">
<div class="flex h-5 items-center">
<input
class="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="course-pace-too-slow"
name="course-pace"
required
type="radio"
value="too-slow"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="course-pace-too-slow"
>
Too Slow
</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]"
>
Fairness of Grading
</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="grading-fairness-excellent"
name="grading-fairness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="grading-fairness-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="grading-fairness-good"
name="grading-fairness"
required
type="radio"
value="good"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="grading-fairness-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="grading-fairness-fair"
name="grading-fairness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="grading-fairness-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="grading-fairness-poor"
name="grading-fairness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="grading-fairness-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 Like Most About the Course?
</label>
<textarea
class="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="liked-most"
name="liked-most"
placeholder="Share what you enjoyed most about this course"
></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="needs-improvement"
>
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="needs-improvement"
name="needs-improvement"
placeholder="Let us know what could be improved"
></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 Offerings
</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 ideas or suggestions for future course offerings"
></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 Recommend This Course 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-course-yes"
name="recommend-course"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="recommend-course-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-course-no"
name="recommend-course"
required
type="radio"
value="no"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="recommend-course-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="share-feedback"
name="share-feedback"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="share-feedback"
>
May We Share Your Feedback With the Instructor?
</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]"
>
Would You Take Another Course With This Instructor?
</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="take-again-yes"
name="take-again"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="take-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="take-again-no"
name="take-again"
required
type="radio"
value="no"
/>
</div>
<div>
<label
class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
for="take-again-no"
>
No
</label>
</div>
</div>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
class="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Figtree", system-ui, sans-serif;
--font-family-display: "Poppins", system-ui, 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="course-title">
Course Title
</label>
<input
className="fs-input"
id="course-title"
name="course-title"
placeholder="Enter or select the course title"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="instructor-name">
Instructor Name
</label>
<input
className="fs-input"
id="instructor-name"
name="instructor-name"
placeholder="Enter or select the instructor's name"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="evaluation-date">
Date of Evaluation
</label>
<input
className="fs-input"
id="evaluation-date"
name="evaluation-date"
placeholder="Select the date of evaluation"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="term">
Term / Semester
</label>
<input
className="fs-input"
id="term"
name="term"
placeholder="e.g., Fall 2024"
required
/>
</div>
<div className="fs-field">
<label className="fs-label">Overall Course Satisfaction</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="course-satisfaction-excellent"
name="course-satisfaction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="course-satisfaction-excellent"
>
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="course-satisfaction-good"
name="course-satisfaction"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="course-satisfaction-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="course-satisfaction-fair"
name="course-satisfaction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="course-satisfaction-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="course-satisfaction-poor"
name="course-satisfaction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="course-satisfaction-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Instructor’s Effectiveness</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="instructor-effectiveness-excellent"
name="instructor-effectiveness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="instructor-effectiveness-excellent"
>
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="instructor-effectiveness-good"
name="instructor-effectiveness"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="instructor-effectiveness-good"
>
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="instructor-effectiveness-fair"
name="instructor-effectiveness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="instructor-effectiveness-fair"
>
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="instructor-effectiveness-poor"
name="instructor-effectiveness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="instructor-effectiveness-poor"
>
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Clarity of Instruction</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="clarity-of-instruction-excellent"
name="clarity-of-instruction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="clarity-of-instruction-excellent"
>
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="clarity-of-instruction-good"
name="clarity-of-instruction"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="clarity-of-instruction-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="clarity-of-instruction-fair"
name="clarity-of-instruction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="clarity-of-instruction-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="clarity-of-instruction-poor"
name="clarity-of-instruction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="clarity-of-instruction-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Course Materials and Resources</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="course-materials-excellent"
name="course-materials"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="course-materials-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="course-materials-good"
name="course-materials"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="course-materials-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="course-materials-fair"
name="course-materials"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="course-materials-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="course-materials-poor"
name="course-materials"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="course-materials-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Usefulness of Assignments / Projects</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="assignments-usefulness-excellent"
name="assignments-usefulness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="fs-label"
htmlFor="assignments-usefulness-excellent"
>
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="assignments-usefulness-good"
name="assignments-usefulness"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="assignments-usefulness-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="assignments-usefulness-fair"
name="assignments-usefulness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="assignments-usefulness-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="assignments-usefulness-poor"
name="assignments-usefulness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="assignments-usefulness-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Class Engagement / Participation</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="class-engagement-excellent"
name="class-engagement"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="class-engagement-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="class-engagement-good"
name="class-engagement"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="class-engagement-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="class-engagement-fair"
name="class-engagement"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="class-engagement-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="class-engagement-poor"
name="class-engagement"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="class-engagement-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Pace of the Course</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="course-pace-too-fast"
name="course-pace"
required
type="radio"
value="too-fast"
/>
</div>
<div>
<label className="fs-label" htmlFor="course-pace-too-fast">
Too Fast
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="course-pace-just-right"
name="course-pace"
required
type="radio"
value="just-right"
/>
</div>
<div>
<label className="fs-label" htmlFor="course-pace-just-right">
Just Right
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="course-pace-too-slow"
name="course-pace"
required
type="radio"
value="too-slow"
/>
</div>
<div>
<label className="fs-label" htmlFor="course-pace-too-slow">
Too Slow
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label">Fairness of Grading</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="grading-fairness-excellent"
name="grading-fairness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label className="fs-label" htmlFor="grading-fairness-excellent">
Excellent
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="grading-fairness-good"
name="grading-fairness"
required
type="radio"
value="good"
/>
</div>
<div>
<label className="fs-label" htmlFor="grading-fairness-good">
Good
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="grading-fairness-fair"
name="grading-fairness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label className="fs-label" htmlFor="grading-fairness-fair">
Fair
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="grading-fairness-poor"
name="grading-fairness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label className="fs-label" htmlFor="grading-fairness-poor">
Poor
</label>
</div>
</div>
</div>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="liked-most">
What Did You Like Most About the Course?
</label>
<textarea
className="fs-textarea"
id="liked-most"
name="liked-most"
placeholder="Share what you enjoyed most about this course"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="needs-improvement">
What Could Be Improved?
</label>
<textarea
className="fs-textarea"
id="needs-improvement"
name="needs-improvement"
placeholder="Let us know what could be improved"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="future-suggestions">
Suggestions for Future Offerings
</label>
<textarea
className="fs-textarea"
id="future-suggestions"
name="future-suggestions"
placeholder="Share ideas or suggestions for future course offerings"
/>
</div>
<div className="fs-field">
<label className="fs-label">
Would You Recommend This Course to Others?
</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="recommend-course-yes"
name="recommend-course"
required
type="radio"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="recommend-course-yes">
Yes
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="recommend-course-no"
name="recommend-course"
required
type="radio"
value="no"
/>
</div>
<div>
<label className="fs-label" htmlFor="recommend-course-no">
No
</label>
</div>
</div>
</div>
</div>
<div className="fs-checkbox-field">
<div className="fs-checkbox-wrapper">
<input
className="fs-checkbox"
id="share-feedback"
name="share-feedback"
type="checkbox"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="share-feedback">
May We Share Your Feedback With the Instructor?
</label>
</div>
</div>
<div className="fs-field">
<label className="fs-label">
Would You Take Another Course With This Instructor?
</label>
<div className="fs-radio-group">
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="take-again-yes"
name="take-again"
required
type="radio"
value="yes"
/>
</div>
<div>
<label className="fs-label" htmlFor="take-again-yes">
Yes
</label>
</div>
</div>
<div className="fs-radio-field">
<div className="fs-radio-wrapper">
<input
className="fs-radio"
id="take-again-no"
name="take-again"
required
type="radio"
value="no"
/>
</div>
<div>
<label className="fs-label" htmlFor="take-again-no">
No
</label>
</div>
</div>
</div>
</div>
<div class="fs-button-group">
<button className="fs-button" type="submit">
Submit
</button>
</div>
</form>
);
}
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/** Variables **/
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Figtree", system-ui, sans-serif;
--font-family-display: "Poppins", system-ui, 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="course-title"
>
Course Title
</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="course-title"
name="course-title"
placeholder="Enter or select the course title"
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="instructor-name"
>
Instructor 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="instructor-name"
name="instructor-name"
placeholder="Enter or select the instructor's 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="evaluation-date"
>
Date of Evaluation
</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="evaluation-date"
name="evaluation-date"
placeholder="Select the date of evaluation"
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="term"
>
Term / Semester
</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="term"
name="term"
placeholder="e.g., Fall 2024"
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]">
Overall Course Satisfaction
</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="course-satisfaction-excellent"
name="course-satisfaction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="course-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="course-satisfaction-good"
name="course-satisfaction"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="course-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="course-satisfaction-fair"
name="course-satisfaction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="course-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="course-satisfaction-poor"
name="course-satisfaction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="course-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]">
Instructor’s Effectiveness
</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="instructor-effectiveness-excellent"
name="instructor-effectiveness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="instructor-effectiveness-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="instructor-effectiveness-good"
name="instructor-effectiveness"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="instructor-effectiveness-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="instructor-effectiveness-fair"
name="instructor-effectiveness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="instructor-effectiveness-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="instructor-effectiveness-poor"
name="instructor-effectiveness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="instructor-effectiveness-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]">
Clarity of Instruction
</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="clarity-of-instruction-excellent"
name="clarity-of-instruction"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="clarity-of-instruction-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="clarity-of-instruction-good"
name="clarity-of-instruction"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="clarity-of-instruction-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="clarity-of-instruction-fair"
name="clarity-of-instruction"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="clarity-of-instruction-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="clarity-of-instruction-poor"
name="clarity-of-instruction"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="clarity-of-instruction-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]">
Course Materials and Resources
</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="course-materials-excellent"
name="course-materials"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="course-materials-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="course-materials-good"
name="course-materials"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="course-materials-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="course-materials-fair"
name="course-materials"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="course-materials-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="course-materials-poor"
name="course-materials"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="course-materials-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 Assignments / Projects
</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="assignments-usefulness-excellent"
name="assignments-usefulness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="assignments-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="assignments-usefulness-good"
name="assignments-usefulness"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="assignments-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="assignments-usefulness-fair"
name="assignments-usefulness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="assignments-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="assignments-usefulness-poor"
name="assignments-usefulness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="assignments-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]">
Class Engagement / Participation
</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="class-engagement-excellent"
name="class-engagement"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="class-engagement-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="class-engagement-good"
name="class-engagement"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="class-engagement-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="class-engagement-fair"
name="class-engagement"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="class-engagement-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="class-engagement-poor"
name="class-engagement"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="class-engagement-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]">
Pace of the Course
</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="course-pace-too-fast"
name="course-pace"
required
type="radio"
value="too-fast"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="course-pace-too-fast"
>
Too Fast
</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="course-pace-just-right"
name="course-pace"
required
type="radio"
value="just-right"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="course-pace-just-right"
>
Just Right
</label>
</div>
</div>
<div className="flex gap-x-2">
<div className="flex h-5 items-center">
<input
className="checked:bg-radio-checked h-5 w-5 rounded-full border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
id="course-pace-too-slow"
name="course-pace"
required
type="radio"
value="too-slow"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="course-pace-too-slow"
>
Too Slow
</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]">
Fairness of Grading
</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="grading-fairness-excellent"
name="grading-fairness"
required
type="radio"
value="excellent"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="grading-fairness-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="grading-fairness-good"
name="grading-fairness"
required
type="radio"
value="good"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="grading-fairness-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="grading-fairness-fair"
name="grading-fairness"
required
type="radio"
value="fair"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="grading-fairness-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="grading-fairness-poor"
name="grading-fairness"
required
type="radio"
value="poor"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="grading-fairness-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 Like Most About the Course?
</label>
<textarea
className="resize-y appearance-none rounded-xl border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
id="liked-most"
name="liked-most"
placeholder="Share what you enjoyed most about this course"
/>
</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="needs-improvement"
>
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="needs-improvement"
name="needs-improvement"
placeholder="Let us know what could be improved"
/>
</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 Offerings
</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 ideas or suggestions for future course offerings"
/>
</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 Course 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-course-yes"
name="recommend-course"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="recommend-course-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-course-no"
name="recommend-course"
required
type="radio"
value="no"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="recommend-course-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="share-feedback"
name="share-feedback"
type="checkbox"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="share-feedback"
>
May We Share Your Feedback With the Instructor?
</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]">
Would You Take Another Course With This Instructor?
</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="take-again-yes"
name="take-again"
required
type="radio"
value="yes"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="take-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="take-again-no"
name="take-again"
required
type="radio"
value="no"
/>
</div>
<div>
<label
className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
htmlFor="take-again-no"
>
No
</label>
</div>
</div>
</div>
</div>
<div class="col-span-full flex flex-row-reverse gap-x-6">
<button
className="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
type="submit"
>
Submit
</button>
</div>
</form>
);
}
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #e7e7e7;
--color-background-alt: #bdb4fe;
--color-border-active: #5b26db;
--color-border-default: #d1d1d1;
--color-highlight: #bdb4fe;
--color-primary: #5b26db;
--color-primary-active: #401c96;
--color-text-default: #262626;
--color-text-muted: #4f4f4f;
--font-family-body: "Figtree", system-ui, sans-serif;
--font-family-display: "Poppins", system-ui, 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 a Course Evaluation Form?
A course evaluation form is used by educational institutions, trainers, and instructors to gather student feedback at the end of a course or program. The form typically includes questions about course content, teaching effectiveness, clarity of instruction, and overall satisfaction. This feedback is critical for identifying what students found valuable and what could be improved, allowing educators to continually refine their teaching methods and curriculum.
Formspree offers a ready-made course evaluation form template that you can embed in your learning portal or send directly to students. The form is easy to customize with your own questions and rating scales. With Formspree handling submissions and delivering responses straight to your inbox, you can stay focused on delivering better learning experiences while capturing honest, actionable feedback from your students.
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
-
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 -
Open House Feedback Form
Clean, helpful open house feedback form for capturing attendee thoughts and contact preferences.
Get code