Feedback Form Template

Gather valuable user insights with this intuitive and engaging feedback form.

This template provides multiple ways for users to express their opinion, including an interactive star rating system, satisfaction levels, and a comments area.

Screenshot of a feedback form with a 5-star rating component and satisfaction radio buttons.

Get Source Code → Preview →

About this Feedback Form

A good feedback form makes it easy for users to provide both quantitative and qualitative feedback. This template includes several common patterns to achieve this.

The centerpiece is a CSS-only star rating system. This clever trick uses radio buttons (type="radio") that are visually hidden. The label elements for these inputs are styled to look like stars. By using the adjacent sibling selector (~) and the :hover pseudo-class in CSS, we can make the stars light up as the user hovers over them, providing a dynamic experience without any JavaScript.

Features

Interactive Star Rating: A 5-star rating system built with pure CSS for a rich user experience.
Multiple Feedback Types: Includes standard radio buttons for overall satisfaction and a textarea for detailed comments.
Semantic and Accessible: Because the star rating is built on native radio buttons, it's fully accessible to keyboard and screen reader users.
Grouped with fieldset: Sections of the form are semantically grouped using the fieldset and legend tags.

Dependencies

None. The entire form, including the interactive star rating, uses only pure HTML and CSS.

Code

Here's the full code for the feedback form template:

/* --- Star Rating Styles --- */
.star-rating {
    display: flex;
    flex-direction: row-reverse; /* This is the trick */
    justify-content: flex-end;
}
.star-rating input[type="radio"] {
    display: none; /* Hide the actual radio buttons */
}
.star-rating label {
    font-size: 2rem;
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
}
/* When a star's radio is checked, color it and all previous stars (because of flex-direction: row-reverse) */
.star-rating input[type="radio"]:checked ~ label,
/* On hover, color the hovered star and all previous ones */
.star-rating label:hover ~ label,
.star-rating label:hover {
    color: #f5c518; /* A nice gold color */
}

/* --- Radio Button Group --- */
.radio-group .radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.radio-group input[type="radio"] {
    margin-right: 10px;
}

/* Submit button styling */
.submit-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}
</style>

<div class="feedback-form-container">
    <form action="#" method="post">
        <fieldset>
            <legend>Rate Your Experience</legend>
            <div class="star-rating">
                <input type="radio" id="star5" name="rating" value="5"><label for="star5" title="5 stars">★</label>
                <input type="radio" id="star4" name="rating" value="4"><label for="star4" title="4 stars">★</label>
                <input type="radio" id="star3" name="rating" value="3"><label for="star3" title="3 stars">★</label>
                <input type="radio" id="star2" name="rating" value="2"><label for="star2" title="2 stars">★</label>
                <input type="radio" id="star1" name="rating" value="1"><label for="star1" title="1 star">★</label>
            </div>
        </fieldset>

<fieldset>
            <legend>How satisfied are you?</legend>
            <div class="radio-group">
                <div class="radio-option">
                    <input type="radio" id="very-satisfied" name="satisfaction" value="very-satisfied">
                    <label for="very-satisfied">Very Satisfied</label>
                </div>
                <div class="radio-option">
                    <input type="radio" id="satisfied" name="satisfaction" value="satisfied">
                    <label for="satisfied">Satisfied</label>
                </div>
                 <div class="radio-option">
                    <input type="radio" id="neutral" name="satisfaction" value="neutral">
                    <label for="neutral">Neutral</label>
                </div>
                 <div class="radio-option">
                    <input type="radio" id="unsatisfied" name="satisfaction" value="unsatisfied">
                    <label for="unsatisfied">Unsatisfied</label>
                </div>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>Comments & Suggestions</legend>
            <div class="form-group">
                <label for="comments" style="display:none;">Comments</label> 
                <textarea id="comments" name="comments" placeholder="Tell us what you think..."></textarea>
            </div>
        </fieldset>
        
        <button type="submit" class="submit-btn">Submit Feedback</button>
    </form>
</div>

View Output