Survey form

Bootstrap 5 Survey component

Survey forms built with Bootstrap 5 and HTML. A variety of pre-made surveys, including multiple choice, questionnaire, checkbox survey, modal survey & more.

Basic examples

Single choice survey

Allow respondents to select a single option from a list of answers that you define using radio buttons.

How satisfied are you with our product?

Edit in sandbox 
<div class="row col-5">
  <h4 class="fw-bold text-center mt-3"></h4>
  <form class="px-4" action="">
    <p class="fw-bold">How satisfied are you with our product?</p>
    <div class="form-check mb-2">
      <input class="form-check-input" type="radio" name="exampleForm" id="radioExample1" />
      <label class="form-check-label" for="radioExample1">
        Option 1
      </label>
    </div>
    <div class="form-check mb-2">
      <input class="form-check-input" type="radio" name="exampleForm" id="radioExample2" />
      <label class="form-check-label" for="radioExample2">
        Option 2
      </label>
    </div>
    <div class="form-check mb-2">
      <input class="form-check-input" type="radio" name="exampleForm" id="radioExample3" />
      <label class="form-check-label" for="radioExample3">
        Option 3
      </label>
    </div>
  </form>
  <div class="text-end">
    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Submit</button>
  </div>
</div>

Multiple choice / Checkbox survey

Allow respondents to select one or more options from a list of answers that you define using checkboxes.

Choose one or more options

Edit in sandbox 
<div class="row col-5">
  <h4 class="fw-bold text-center mt-3"></h4>
  <form class="px-4" action="">
    <p class="fw-bold">Choose one or more options</p>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
      <label class="form-check-label" for="flexCheckDefault">
        Option 1
      </label>
    </div>

    <!-- Checked checkbox -->
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2" />
      <label class="form-check-label" for="flexCheckDefault2">
        Option 2
      </label>
    </div>

    <!-- Checked checkbox -->
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault3" />
      <label class="form-check-label" for="flexCheckDefault3">
        Option 3
      </label>
    </div>
  </form>
  <div class="card-footer text-end">
    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Submit</button>
  </div>
</div>

Survey within a card

You can put your survey inside of a card to make it stand out.

Your opinion matters

Have some ideas how to improve our product? Give us your feedback.

Your rating:

Edit in sandbox 
<div class="mx-0 mx-sm-auto">
  <div class="card">
    <div class="card-body">
      <div class="text-center">
        <i class="far fa-file-alt fa-4x mb-3 text-primary"></i>
        <p>
          <strong>Your opinion matters</strong>
        </p>
        <p>
          Have some ideas how to improve our product?
          <strong>Give us your feedback.</strong>
        </p>
      </div>

      <hr />

      <form class="px-4" action="">
        <p class="text-center"><strong>Your rating:</strong></p>

        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="exampleForm" id="radio2Example1" />
          <label class="form-check-label" for="radio2Example1">
            Very good
          </label>
        </div>
        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="exampleForm" id="radio2Example2" />
          <label class="form-check-label" for="radio2Example2">
            Good
          </label>
        </div>
        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="exampleForm" id="radio2Example3" />
          <label class="form-check-label" for="radio2Example3">
            Medicore
          </label>
        </div>
        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="exampleForm" id="radio2Example4" />
          <label class="form-check-label" for="radio2Example4">
            Bad
          </label>
        </div>
        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="exampleForm" id="radio2Example5" />
          <label class="form-check-label" for="radio2Example5">
            Very bad
          </label>
        </div>

      </form>
    </div>
    <div class="card-footer text-end">
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Submit</button>
    </div>
  </div>
</div>

Customer satisfaction survey

Customer satisfaction questionnaires are usually used to gather reviews, and sometimes at the end of a payment process.

We recommend you to add a textarea input to your survey, to let your users send more in-depth feedback.

Feedback request

Your opinion matters

Have some ideas how to improve our product? Give us your feedback.

Your rating:

What could we improve?

Edit in sandbox 
<div class="mx-0 mx-sm-auto">
  <div class="card">
    <div class="card-header bg-primary">
      <h5 class="card-title text-white mt-2" id="exampleModalLabel">Feedback request</h5>
    </div>
    <div class="modal-body">
      <div class="text-center">
        <i class="far fa-file-alt fa-4x mb-3 text-primary"></i>
        <p>
          <strong>Your opinion matters</strong>
        </p>
        <p>
          Have some ideas how to improve our product?
          <strong>Give us your feedback.</strong>
        </p>
      </div>

      <hr />

      <form class="px-4" action="">
        <p class="text-center"><strong>Your rating:</strong></p>

        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="exampleForm" id="radio3Example1" />
          <label class="form-check-label" for="radio3Example1">
            Very good
          </label>
        </div>
        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="exampleForm" id="radio3Example2" />
          <label class="form-check-label" for="radio3Example2">
            Good
          </label>
        </div>
        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="exampleForm" id="radio3Example3" />
          <label class="form-check-label" for="radio3Example3">
            Medicore
          </label>
        </div>
        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="exampleForm" id="radio3Example4" />
          <label class="form-check-label" for="radio3Example4">
            Bad
          </label>
        </div>
        <div class="form-check mb-2">
          <input class="form-check-input" type="radio" name="exampleForm" id="radio3Example5" />
          <label class="form-check-label" for="radio3Example5">
            Very bad
          </label>
        </div>

        <p class="text-center"><strong>What could we improve?</strong></p>

        <!-- Message input -->
        <div data-mdb-input-init class="form-outline mb-4">
          <textarea class="form-control" id="form4Example3" rows="4"></textarea>
          <label class="form-label" for="form4Example3">Your feedback</label>
        </div>
      </form>
    </div>
    <div class="card-footer text-end">
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Submit</button>
    </div>
  </div>
</div>

Stepper survey

Survey that displays content as a process with defined by user milestones. Check out more in the stepper documentation.

  • 1 step1
  • 2 step2
  • 3 step3
Edit in sandbox 
<div class="card w-100">
  <div class="card-body">
    <ul class="stepper" data-mdb-stepper-init data-mdb-stepper-type="vertical">
      <li class="stepper-step stepper-active">
        <div class="stepper-head">
          <span class="stepper-head-icon"> 1 </span>
          <span class="stepper-head-text"> step1 </span>
        </div>
        <div class="stepper-content py-2">
          <div data-mdb-input-init class="form-outline">
            <input type="email" id="custom-validation-input-1" class="form-control" required />
            <label class="form-label" for="custom-validation-input-1">Your e-mail</label>
          </div>
        </div>
      </li>
      <li class="stepper-step">
        <div class="stepper-head">
          <span class="stepper-head-icon"> 2 </span>
          <span class="stepper-head-text"> step2 </span>
        </div>
        <div class="stepper-content py-2">
          <div data-mdb-input-init class="form-outline">
            <textarea class="form-control" id="form4Example5" rows="4"></textarea>
            <label class="form-label" for="form4Example5">Feedback</label>
          </div>
        </div>
      </li>
      <li class="stepper-step">
        <div class="stepper-head">
          <span class="stepper-head-icon"> 3 </span>
          <span class="stepper-head-text"> step3 </span>
        </div>
        <div class="stepper-content py-2">
          <div class="step-actions">
            <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Submit</button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

Rating survey

Survey in which you give the user an option to rate using a star rating or different icons.

How do you rate customer support:

What could we improve?

Edit in sandbox 
<div class="mx-0 mx-sm-auto">
  <div class="card">
    <div class="card-body">


      <form class="px-2" action="">
        <p class="text-center"><strong>How do you rate customer support:</strong></p>

        <ul class="h2 rating justify-content-center pb-3" data-mdb-rating-init data-mdb-toggle="rating">
          <li>
            <i class="far fa-star fa-sm text-primary" title="Bad"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Poor"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="OK"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Good"></i>
          </li>
          <li>
            <i class="far fa-star fa-sm text-primary" title="Excellent"></i>
          </li>
        </ul>

        <p class="text-center"><strong>What could we improve?</strong></p>

        <!-- Message input -->
        <div data-mdb-input-init class="form-outline mb-4">
          <textarea class="form-control" id="form4Example6" rows="4"></textarea>
          <label class="form-label" for="form4Example6">Your feedback</label>
        </div>
      </form>
    </div>
    <div class="card-footer text-end">
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Submit</button>
    </div>
  </div>
</div>

Linear scale survey

Survey with horizontaly aligned radio buttons in a form of a scale.

How do you rate customer support

Bad
Excellent
Edit in sandbox 
<!-- Card -->
<div class="mx-0 mx-sm-auto">
  <div class="text-center">
    <p>
      <strong>How do you rate customer support</strong>
    </p>
  </div>

  <div class="text-center mb-3">
    <div class="d-inline mx-3">
      Bad
    </div>

    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
        value="option1" />
      <label class="form-check-label" for="inlineRadio1">1</label>
    </div>

    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
        value="option2" />
      <label class="form-check-label" for="inlineRadio2">2</label>
    </div>

    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3"
        value="option3" />
      <label class="form-check-label" for="inlineRadio3">3</label>
    </div>

    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4"
        value="option4" />
      <label class="form-check-label" for="inlineRadio4">4</label>
    </div>

    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5"
        value="option5" />
      <label class="form-check-label" for="inlineRadio5">5</label>
    </div>

    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio6"
        value="option6" />
      <label class="form-check-label" for="inlineRadio6">6</label>

    </div>
    <div class="d-inline me-4">
      Excellent
    </div>
  </div>
  <div class="text-end">
    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Submit</button>
  </div>
</div>

Ranking survey

Ranking survey built using a buttons group.

How likely if it that you would recommend MDB to a friend or colleague?

Edit in sandbox 
<div class="mx-0 mx-sm-auto">
  <div class="text-center">
    <p>
      <strong>How likely if it that you would recommend MDB to a friend or colleague?</strong>
    </p>
  </div>
  <div data-mdb-ripple-init class="btn-toolbar justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
    <div data-mdb-ripple-init class="btn-group me-2" role="group" aria-label="First group">
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-body-tertiary">0</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-body-tertiary">1</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-body-tertiary">2</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-body-tertiary">3</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-body-tertiary">4</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-body-tertiary">5</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-body-tertiary">6</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-body-tertiary">7</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-body-tertiary">8</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-body-tertiary">9</button>
      <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-body-tertiary">10</button>
    </div>
  </div>
  <div class="text-end mt-3">
    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Submit</button>
  </div>
</div>

Range survey

Slide to choose the appropriate number that can represent the score on a range slider.

Drag the slider to select the number

Edit in sandbox 
<div class="mx-0 w-100">
  <div class="text-center">
    <p>
      <strong>Drag the slider to select the number</strong>
    </p>
  </div>
  <label for="customRange3" class="form-label">Bad</label>
  <label for="customRange3" class="form-label float-end">Excellent</label>
  <div data-mdb-range-init class="range">
    <input type="range" class="form-range" min="0" max="6" step="1" id="customRange3" />
  </div>
  <div class="text-end">
    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary mt-3">Submit</button>
  </div>
</div>