Back to Form
Form

Survey with Radio Options

#form

Live preview

Source code

html
<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-md-7">
      <div class="p-4 border rounded-4">
        <h4 class="fw-bold">Quick survey</h4>
        <p class="text-muted small">Help us improve — takes 30 seconds.</p>
        <form>
          <div class="mb-3"><label class="form-label fw-semibold">How likely are you to recommend us?</label>
            <div class="btn-group w-100 flex-wrap" role="group"><input type="radio" class="btn-check" name="nps" id="nps0"><label class="btn btn-outline-primary" for="nps0">0</label><input type="radio" class="btn-check" name="nps" id="nps1"><label class="btn btn-outline-primary" for="nps1">1</label><input type="radio" class="btn-check" name="nps" id="nps2"><label class="btn btn-outline-primary" for="nps2">2</label><input type="radio" class="btn-check" name="nps" id="nps3"><label class="btn btn-outline-primary" for="nps3">3</label><input type="radio" class="btn-check" name="nps" id="nps4"><label class="btn btn-outline-primary" for="nps4">4</label><input type="radio" class="btn-check" name="nps" id="nps5"><label class="btn btn-outline-primary" for="nps5">5</label><input type="radio" class="btn-check" name="nps" id="nps6"><label class="btn btn-outline-primary" for="nps6">6</label><input type="radio" class="btn-check" name="nps" id="nps7"><label class="btn btn-outline-primary" for="nps7">7</label><input type="radio" class="btn-check" name="nps" id="nps8"><label class="btn btn-outline-primary" for="nps8">8</label><input type="radio" class="btn-check" name="nps" id="nps9"><label class="btn btn-outline-primary" for="nps9">9</label><input type="radio" class="btn-check" name="nps" id="nps10"><label class="btn btn-outline-primary" for="nps10">10</label></div>
          </div>
          <div class="mb-3"><label class="form-label fw-semibold">What do you use most?</label>
            <div class="form-check"><input class="form-check-input" type="checkbox"><label class="form-check-label">Components</label></div>
            <div class="form-check"><input class="form-check-input" type="checkbox"><label class="form-check-label">Tutorials</label></div>
            <div class="form-check"><input class="form-check-input" type="checkbox"><label class="form-check-label">Templates</label></div>
          </div>
          <div class="mb-3"><label class="form-label fw-semibold">Comments</label><textarea class="form-control" rows="2"></textarea></div><button class="btn btn-success w-100">Submit survey</button>
        </form>
      </div>
    </div>
  </div>
</div>

More designs in this section