Feedback

<!-- SaveForm.io: feedback (soft) -->
<style>
[data-sf-tpl="feedback"] {
  all: revert;
  box-sizing: border-box;
  display: block;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #18181b;
  -webkit-font-smoothing: antialiased;
}
[data-sf-tpl="feedback"] *,
[data-sf-tpl="feedback"] *::before,
[data-sf-tpl="feedback"] *::after {
  box-sizing: border-box;
}
[data-sf-tpl="feedback"] input,
[data-sf-tpl="feedback"] textarea,
[data-sf-tpl="feedback"] select,
[data-sf-tpl="feedback"] button {
  font: inherit;
  color: inherit;
  margin: 0;
}
[data-sf-tpl="feedback"] button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
[data-sf-tpl="feedback"] label {
  display: block;
}
[data-sf-tpl="feedback"].sf-feedback--soft {
  max-width: 460px;
  background: #ffffff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 50px -20px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
[data-sf-tpl="feedback"] .sf-feedback__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: #0f172a;
  letter-spacing: -0.02em;
}
[data-sf-tpl="feedback"] .sf-feedback__lede {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 24px 0;
}
[data-sf-tpl="feedback"] .sf-feedback__field {
  margin-bottom: 16px;
}
[data-sf-tpl="feedback"] .sf-feedback__label {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  margin-bottom: 8px;
}
[data-sf-tpl="feedback"] .sf-feedback__rating {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
[data-sf-tpl="feedback"] .sf-feedback__rating input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
[data-sf-tpl="feedback"] .sf-feedback__rating label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  font-size: 22px;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
[data-sf-tpl="feedback"] .sf-feedback__rating label:hover {
  transform: translateY(-1px);
  background: #ffffff;
}
[data-sf-tpl="feedback"] .sf-feedback__rating input:checked + label {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border-color: #818cf8;
}
[data-sf-tpl="feedback"] .sf-feedback__input,
[data-sf-tpl="feedback"] .sf-feedback__textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  font-size: 14px;
  outline: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
[data-sf-tpl="feedback"] .sf-feedback__textarea {
  resize: vertical;
  min-height: 100px;
}
[data-sf-tpl="feedback"] .sf-feedback__input:focus,
[data-sf-tpl="feedback"] .sf-feedback__textarea:focus {
  border-color: #818cf8;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.18);
}
[data-sf-tpl="feedback"] .sf-feedback__button {
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  border: 0;
  transition: filter 120ms ease, transform 120ms ease;
}
[data-sf-tpl="feedback"] .sf-feedback__button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
[data-sf-tpl="feedback"] .sf-feedback__honey {
  position: absolute;
  left: -9999px;
}
</style>
<form
  class="sf-feedback--soft"
  data-sf-tpl="feedback"
  action="https://saveform.io/api/submit/YOUR_FORM_ID"
  method="POST"
>
  <h2 class="sf-feedback__title">How was your experience?</h2>
  <p class="sf-feedback__lede">Your feedback shapes what we build next.</p>

  <input type="text" name="_honey" class="sf-feedback__honey" tabindex="-1" autocomplete="off" />

  <div class="sf-feedback__field">
    <div class="sf-feedback__label">Rating</div>
    <div class="sf-feedback__rating">
      <input type="radio" id="sf-feedback-r1s" name="rating" value="1" required />
      <label for="sf-feedback-r1s" title="Awful">😖</label>
      <input type="radio" id="sf-feedback-r2s" name="rating" value="2" />
      <label for="sf-feedback-r2s" title="Bad">😕</label>
      <input type="radio" id="sf-feedback-r3s" name="rating" value="3" />
      <label for="sf-feedback-r3s" title="OK">😐</label>
      <input type="radio" id="sf-feedback-r4s" name="rating" value="4" />
      <label for="sf-feedback-r4s" title="Good">🙂</label>
      <input type="radio" id="sf-feedback-r5s" name="rating" value="5" />
      <label for="sf-feedback-r5s" title="Loved it">😍</label>
    </div>
  </div>

  <div class="sf-feedback__field">
    <label class="sf-feedback__label" for="sf-feedback-msg-s">Tell us more</label>
    <textarea id="sf-feedback-msg-s" class="sf-feedback__textarea" name="message" placeholder="What worked? What didn't?" required></textarea>
  </div>

  <div class="sf-feedback__field">
    <label class="sf-feedback__label" for="sf-feedback-email-s">Email (optional, so we can follow up)</label>
    <input id="sf-feedback-email-s" class="sf-feedback__input" type="email" name="email" />
  </div>

  <button class="sf-feedback__button" type="submit">Send feedback</button>
</form>