Survey form

Bootstrap 5 Survey component

A collection of survey forms built with the latest Bootstrap 5. Choose from a variety of pre-made surveys, such as multiple choice survey, checkbox survey, modal survey and many more.


Basic examples

Multiple choice survey

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

How satisfied are you with our product?

        
            
                    <div class="row col-5">
                      <h4 class="fw-bold text-center mt-3"></h4>
                      <form class=" bg-white 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" class="btn btn-primary">Submit</button>
                      </div>
                    </div>
                  
        
    

Checkbox survey

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" class="btn btn-primary">Submit</button>
                      </div>
                    </div>
                  
        
    

Survey within a card

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" class="btn btn-primary">Submit</button>
                        </div>
                      </div>
                    </div>
                  
        
    

Customer satisfaction survey

Radio buttons and text area tab for adding your comment.

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 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" class="btn btn-primary">Submit</button>
                        </div>
                      </div>
                    </div>
                  
        
    


Stepper survey

Survey that displays content as a process with defined by user milestones

  • 1 step1
  • 2 step2
  • 3 step3
        
            
                    <div class="card w-100">
                      <div class="card-body">
                        <ul class="stepper" data-mdb-stepper="stepper" 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 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 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" class="btn btn-primary">Submit</button>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  
        
    

Rating survey

Survey in which you give the user the option to rate with stars, or other 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-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 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" class="btn btn-primary">Submit</button>
                      </div>
                    </div>
                  </div>
                
        
    

Linear scale survey

Survey with horizontal 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" class="btn btn-primary">Submit</button>
                    </div>
                  </div>
                
        
    

Ranking survey

Ranking survey built with the 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 class="btn-toolbar justify-content-center" role="toolbar"
                      aria-label="Toolbar with button groups">
                      <div class="btn-group me-2" role="group" aria-label="First group">
                        <button type="button" class="btn btn-light">0</button>
                        <button type="button" class="btn btn-light">1</button>
                        <button type="button" class="btn btn-light">2</button>
                        <button type="button" class="btn btn-light">3</button>
                        <button type="button" class="btn btn-light">4</button>
                        <button type="button" class="btn btn-light">5</button>
                        <button type="button" class="btn btn-light">6</button>
                        <button type="button" class="btn btn-light">7</button>
                        <button type="button" class="btn btn-light">8</button>
                        <button type="button" class="btn btn-light">9</button>
                        <button type="button" class="btn btn-light">10</button>
                      </div>
                    </div>
                    <div class="text-end mt-3">
                      <button type="button" class="btn btn-primary">Submit</button>
                    </div>
                  </div>
                
        
    

Steps range survey

Slide to choose the appropriate number that can represent the score.

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 class="range">
                      <input type="range" class="form-range" min="0" max="6" step="1" id="customRange3" />
                    </div>
                    <div class="text-end">
                      <button type="button" class="btn btn-primary mt-3">Submit</button>
                    </div>
                  </div>