How to Create a Feedback Form on Shopify Without App | Easy & Simple Tutorial

<style>
  .feedback-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 25px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-family: inherit;
    font-size: 17px;
  }

  /* Added margin-left and margin-right */
  #feedback-form-container {
    margin-left: 10px;
    margin-right: 10px;
  }

  .feedback-form h2 {
    text-align: center;
    font-size: 22px;
    margin-bottom: 15px;
    color: #111;
  }

  .feedback-form p {
    text-align: center;
    color: #666;
    margin-bottom: 25px;
    font-size: 17px;
  }

  .feedback-form input,
  .feedback-form textarea,
  .feedback-form select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 17px;
  }

  .feedback-form button {
    width: 100%;
    padding: 14px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .feedback-form button:hover {
    background: #848484;
  }

  .feedback-success {
    text-align: center;
    background: #e8f9f0;
    border: 1px solid #a3e4b0;
    color: #2c662d;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 17px;
    display: none;
  }

  @media (max-width: 768px) {
    .feedback-form { padding: 15px; }
  }
</style>

<div id="feedback-form-container">
  {% if form.posted_successfully? %}
    <div class="feedback-success" style="display:block;">
      Thank you! Your feedback has been successfully submitted.
    </div>
  {% endif %}

  <form class="feedback-form" method="post" action="/contact#feedback-form">
    <h2>We’d Love Your Feedback</h2>
    <p>Your thoughts help us improve our Shopify tutorials.</p>

    <input type="hidden" name="form_type" value="contact">
    <input type="hidden" name="utf8" value="✓">

    <input type="text" name="contact[name]" placeholder="Your Name" required>
    <input type="email" name="contact[email]" placeholder="Your Email" required>

    <select name="contact[rating]" required>
      <option value="">Rate the quality of service provided</option>
      <option value="5">⭐⭐⭐⭐⭐ Excellent</option>
      <option value="4">⭐⭐⭐⭐ Good</option>
      <option value="3">⭐⭐⭐ Average</option>
      <option value="2">⭐⭐ Poor</option>
      <option value="1">⭐ Very Poor</option>
    </select>

    <textarea name="contact[body]" rows="4" placeholder="Share your feedback..." required></textarea>

    <button type="submit">Submit Feedback</button>
  </form>
</div>