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.
<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" 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.
<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.
<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.
<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>
Modal survey
Survey in a pop-up window using the modal component.
<!-- Button trigger modal -->
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog mx-0 mx-sm-auto">
<div class="modal-content">
<div class="modal-header bg-primary">
<h5 class="modal-title text-white" id="exampleModalLabel">Feedback request</h5>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close text-white" data-mdb-dismiss="modal" aria-label="Close"></button>
</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="radio4Example1" />
<label class="form-check-label" for="radio4Example1">
Very good
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="exampleForm" id="radio4Example2" />
<label class="form-check-label" for="radio4Example2">
Good
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="exampleForm" id="radio4Example3" />
<label class="form-check-label" for="radio4Example3">
Medicore
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="exampleForm" id="radio4Example4" />
<label class="form-check-label" for="radio4Example4">
Bad
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="exampleForm" id="radio4Example5" />
<label class="form-check-label" for="radio4Example5">
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="form4Example4" rows="4"></textarea>
<label class="form-label" for="form4Example4">Your feedback</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
Stepper survey
Survey that displays content as a process with defined by user milestones. Check out more in the stepper documentation.
-
step1
-
step2
-
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.
<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 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-button-init data-mdb-ripple-init class="btn-toolbar justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
<div data-mdb-button-init 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-light">0</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">1</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">2</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">3</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">4</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">5</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">6</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">7</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">8</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">9</button>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-light">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>