Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Feedback Form</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;1,600&display=swap" rel="stylesheet" />
  <style>
    body {
      font-family: 'Montserrat', sans-serif;
    }
    .feedback-card {
      background-color: #fffaf4;
      border-radius: 1rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      padding: 1.5rem;
      margin-bottom: 1rem;
      text-align: center;
      transition: transform 0.3s ease;
    }
    .feedback-card:hover {
      transform: translateY(-4px);
    }
    .feedback-avatar {
      font-size: 2rem;
      margin-bottom: 0.5rem;
    }
    .feedback-stars {
      color: #f7b731;
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
    }
    .feedback-quote {
      font-style: italic;
      color: #3e3e3e;
      font-size: 1.125rem;
      margin-bottom: 0.5rem;
    }
    .feedback-name {
      color: #6f6f6f;
      font-size: 0.95rem;
    }
  </style>
</head>
<body class="bg-[#f7f3ef] px-4 py-10">

  <div class="max-w-2xl mx-auto">
    <h1 class="text-3xl font-bold text-[#3e3e3e] mb-6 text-center">Leave Your Feedback</h1>

    <form id="feedbackForm" class="bg-white p-6 rounded-xl shadow-md space-y-4">
      <input type="text" name="quote" placeholder="Your short quote (1–2 sentences)" required class="w-full p-3 border rounded-md focus:outline-none" />
      
      <select name="stars" required class="w-full p-3 border rounded-md focus:outline-none">
        <option value="">Select Star Rating</option>
        <option value="★ ★ ★ ★ ★">★ ★ ★ ★ ★</option>
        <option value="★ ★ ★ ★ ☆">★ ★ ★ ★ ☆</option>
        <option value="★ ★ ★ ☆ ☆">★ ★ ★ ☆ ☆</option>
        <option value="★ ★ ☆ ☆ ☆">★ ★ ☆ ☆ ☆</option>
        <option value="★ ☆ ☆ ☆ ☆">★ ☆ ☆ ☆ ☆</option>
      </select>

      <input type="text" name="name" placeholder="Your name or role (e.g., Student, Coffee Lover)" required class="w-full p-3 border rounded-md focus:outline-none" />
      
      <input type="text" name="avatar" placeholder="Optional icon (e.g., ☕, 🍵)" class="w-full p-3 border rounded-md focus:outline-none" />

      <button type="submit" class="w-full bg-[#a47148] hover:bg-[#8f5d36] text-white py-3 rounded-md font-semibold transition">
        Submit Feedback
      </button>
    </form>

    
    <p id="thankYouMsg" style="
      display: none;
      background-color: #e6dfd4;
      color: #3e3e3e;
      padding: 15px;
      border-radius: 10px;
      margin-top: 20px;
      font-style: italic;
      text-align: center;
    ">
      Thank you so much for your feedback! We truly appreciate your support and insights—it helps us improve and serve you better.
    </p>

    
    <div id="feedbackDisplay" class="mt-10 space-y-4">
      
    </div>
  </div>

  <script>
    const form = document.getElementById('feedbackForm');
    const display = document.getElementById('feedbackDisplay');
    const thankYouMsg = document.getElementById('thankYouMsg');

    form.addEventListener('submit', function (e) {
      e.preventDefault();

      const avatar = form.avatar.value.trim() || "☕";
      const quote = form.quote.value;
      const stars = form.stars.value;
      const name = form.name.value;

      const card = document.createElement('div');
      card.className = 'feedback-card';
      card.innerHTML = `
        <div class="feedback-avatar">${avatar}</div>
        <div class="feedback-stars">${stars}</div>
        <div class="feedback-quote">“${quote}”</div>
        <div class="feedback-name">— ${name}</div>
      `;

      display.prepend(card);
      form.reset();

      // Show thank you message
      thankYouMsg.style.display = 'block';
      setTimeout(() => {
        thankYouMsg.style.display = 'none';
      }, 6000); // Hide after 6s
    });
  </script>

</body>
</html>

Mug's Mood Coffee and Tea Shop

e-commerce