→ Anonymous
→ Customer Feedback Modal

Customer Feedback Modal

A customizable feedback modal that helps collect user opinions about your website or service. Features rating system, text input fields, and smooth animations.

This Example is contributed by Anonymous, on 03-Apr-2025. It is responsive.

Feedback Form Survey Rating System Modal Dialog

Author Anonymous

Fork Fullscreen

<div class="feedback-modal-container" id="feedbackModal">
  <div class="feedback-modal">
    <div class="feedback-modal-header">
      <h2>We Value Your Feedback</h2>
      <button class="close-btn" id="closeModal">&times;</button>
    </div>
    <div class="feedback-modal-body">
      <form id="feedbackForm">
        <div class="feedback-question">
          <p>How would you rate your experience?</p>
          <div class="rating-container">
            <div class="rating-option">
              <input type="radio" id="rating1" name="rating" value="1">
              <label for="rating1">1</label>
            </div>
            <div class="rating-option">
              <input type="radio" id="rating2" name="rating" value="2">
              <label for="rating2">2</label>
            </div>
            <div class="rating-option">
              <input type="radio" id="rating3" name="rating" value="3">
              <label for="rating3">3</label>
            </div>
            <div class="rating-option">
              <input type="radio" id="rating4" name="rating" value="4">
              <label for="rating4">4</label>
            </div>
            <div class="rating-option">
              <input type="radio" id="rating5" name="rating" value="5">
              <label for="rating5">5</label>
            </div>
          </div>
          <div class="rating-labels">
            <span>Poor</span>
            <span>Excellent</span>
          </div>
        </div>
        
        <div class="feedback-question">
          <label for="feedbackType">What are you providing feedback about?</label>
          <select id="feedbackType" name="feedbackType" required>
            <option value="" disabled selected>Select an option</option>
            <option value="website">Website Design</option>
            <option value="content">Content</option>
            <option value="functionality">Functionality</option>
            <option value="customer-service">Customer Service</option>
            <option value="other">Other</option>
          </select>
        </div>
        
        <div class="feedback-question">
          <label for="feedbackText">Tell us more about your experience:</label>
          <textarea id="feedbackText" name="feedbackText" rows="4" placeholder="Your feedback helps us improve"></textarea>
        </div>
        
        <div class="feedback-question">
          <label for="email">Email (optional):</label>
          <input type="email" id="email" name="email" placeholder="your@email.com">
          <small>We'll only use this to follow up on your feedback if needed.</small>
        </div>
        
        <div class="form-actions">
          <button type="submit" class="submit-btn">Submit Feedback</button>
        </div>
      </form>
    </div>
    <div class="feedback-modal-success" id="successMessage">
      <div class="success-icon">✓</div>
      <h3>Thank You!</h3>
      <p>Your feedback has been submitted successfully.</p>
      <button class="close-success-btn" id="closeSuccess">Close</button>
    </div>
  </div>
</div>

<button id="openFeedback" class="feedback-trigger">Give Feedback</button>

Related Examples

Customer Feedback Form CSS Example

Author:
Anonymous

6 months ago
Interactive Feedback Form with Star Rating System
Collect valuable user feedback with this elegant form featuring an interactive star rating system and comment field for detailed insights.

Author:
Alexis Rivera

6 months ago
Customer Feedback Form Css Example

Author:
Anonymous

7 months ago
Star Rating Component with Feedback
Boost user engagement with our interactive star rating component. Capture precise feedback with a dynamic rating system and customizable visual cues.

Author:
David Wilson

7 months ago
Star Rating Component with Feedback
Get user feedback with the interactive star rating. Perfect for engaging customers.

Author:
David Wilson

7 months ago
Email Signup Form with Floating Label Animation
Boost your email list with this eye-catching newsletter subscription form featuring social proof and gradient animations

Author:
Emily Thompson

7 months ago
Star Rating System For Product Reviews
A responsive star rating component that allows users to provide feedback on a scale of 1 to 5 stars, featuring interactive hover effects and selection capability.

Author:
Morgan Reynolds

5 months ago
User-Friendly Cookie Notification Card with Accept/Decline Controls
GDPR-compliant cookie consent modal with intuitive user controls. Perfect for websites needing to implement cookie consent in a user-friendly, non-intrusive way.

Author:
Mert Yılmaz

6 months ago
Responsive Modal Popup with Overlay Effect
A responsive modal popup that works across all device sizes. Features a smooth fade-in animation, backdrop overlay, and close button for better user experience.

Author:
Bishnu Thapa

4 months ago
Contact Form with Real-time Validation

Author:
Anonymous

6 months ago
Customer Product Review Card with Rating System
A customizable product review card displaying customer feedback, star ratings, and user information to build trust with potential buyers.

Author:
Marcus Thornton

5 months ago
FeedBack Form

Author:
Anonymous

7 months ago

Didn't find component you were looking for?

Search from 500+ components