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?

        
            
        <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

        
            
        <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:

        
            
        <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?

        
            
        <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
        
            
        <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?

        
            
        <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
        
            
        <!-- 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?

        
            
        <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

        
            
        <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>