Web Designer Wall

Snippets Animation

Bootstrap 5 Feedback Reactions Form with Emoji Rating

A five-step emoji feedback form with an optional comment box and a thank-you confirmation. Choose a face, add a note and send.

Bootstrap 5 No jQuery Mar 2020 2.5K views 

<section class="wdw-stage">
  <div class="container" style="max-width:520px">
    <form class="wdw-card p-4 p-md-5" id="feedback" novalidate>
      <div class="text-center mb-4">
        <span class="wdw-eyebrow">Feedback</span>
        <h2 class="wdw-heading h3 mt-1 mb-2">How was your experience?</h2>
        <p class="wdw-muted mb-0">Your answer helps us make the product better.</p>
      </div>
      <fieldset class="mb-4">
        <legend class="visually-hidden">Rate your experience</legend>
        <div class="row row-cols-5 g-2 text-center">
        <div class="col">
          <input class="btn-check" type="radio" name="mood" id="mood-angry" value="Awful" autocomplete="off">
          <label class="mood mood-angry" for="mood-angry">
            <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle class="face" cx="12" cy="12" r="10"/><path d="M7.5 8.5l3 1.2M16.5 8.5l-3 1.2" /><circle cx="9" cy="11.5" r=".6" fill="currentColor"/><circle cx="15" cy="11.5" r=".6" fill="currentColor"/><path d="M8.5 16.5c1-1.2 2.2-1.8 3.5-1.8s2.5.6 3.5 1.8"/></svg>
            <span>Awful</span>
          </label>
        </div>
        <div class="col">
          <input class="btn-check" type="radio" name="mood" id="mood-sad" value="Bad" autocomplete="off">
          <label class="mood mood-sad" for="mood-sad">
            <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle class="face" cx="12" cy="12" r="10"/><path d="M7.8 10.5q1.2 1 2.4 0M13.8 10.5q1.2 1 2.4 0"/><path d="M8.8 16c1-1 2-1.5 3.2-1.5s2.200.5 3.200 1.500"/></svg>
            <span>Bad</span>
          </label>
        </div>
        <div class="col">
          <input class="btn-check" type="radio" name="mood" id="mood-ok" value="Okay" autocomplete="off">
          <label class="mood mood-ok" for="mood-ok">
            <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle class="face" cx="12" cy="12" r="10"/><circle cx="9" cy="10.5" r=".7" fill="currentColor"/><circle cx="15" cy="10.5" r=".7" fill="currentColor"/><path d="M9 15.5h6"/></svg>
            <span>Okay</span>
          </label>
        </div>
        <div class="col">
          <input class="btn-check" type="radio" name="mood" id="mood-good" value="Good" autocomplete="off" checked>
          <label class="mood mood-good" for="mood-good">
            <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle class="face" cx="12" cy="12" r="10"/><circle cx="9" cy="10.5" r=".7" fill="currentColor"/><circle cx="15" cy="10.5" r=".7" fill="currentColor"/><path d="M8.5 14c1 1.400 2.200 2 3.500 2s2.500-.6 3.500-2"/></svg>
            <span>Good</span>
          </label>
        </div>
        <div class="col">
          <input class="btn-check" type="radio" name="mood" id="mood-happy" value="Amazing" autocomplete="off">
          <label class="mood mood-happy" for="mood-happy">
            <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle class="face" cx="12" cy="12" r="10"/><path d="M7.800 11q1.200-1.800 2.400 0M13.800 11q1.200-1.800 2.400 0"/><path d="M8 13.500h8c0 2.400-1.800 3.800-4 3.800s-4-1.400-4-3.800z" fill="currentColor"/></svg>
            <span>Amazing</span>
          </label>
        </div>
        </div>
      </fieldset>
      <div class="mb-4">
        <label class="form-label fw-semibold" for="fb-note">Anything else you'd like to share? <span class="text-body-secondary fw-normal">(optional)</span></label>
        <textarea class="form-control" id="fb-note" rows="3" placeholder="Tell us what worked and what didn't"></textarea>
      </div>
      <button class="btn btn-primary rounded-pill w-100" type="submit">Send feedback</button>
      <div class="text-center d-none py-3" id="fb-thanks" role="status">
        <div class="wdw-icon mb-3 mx-auto"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.500l4.500 4.500L19 7.500"/></svg></div>
        <h3 class="h5 fw-bold mb-1">Thanks for your feedback</h3>
        <p class="wdw-muted mb-3">You rated us <strong class="text-body-emphasis" id="fb-rating"></strong>.</p>
        <button class="btn btn-outline-primary rounded-pill px-4" type="button" id="fb-again">Send another</button>
      </div>
    </form>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Related snippets

More animation snippets