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.
<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
<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="flexCheckDefault" />
<label class="form-check-label" for="flexCheckDefault">
Option 2
</label>
</div>
<!-- Checked checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
<label class="form-check-label" for="flexCheckDefault">
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.
<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="radioExample1" />
<label class="form-check-label" for="radioExample1">
Very good
</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">
Good
</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">
Medicore
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="exampleForm" id="radioExample4" />
<label class="form-check-label" for="radioExample4">
Bad
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="exampleForm" id="radioExample5" />
<label class="form-check-label" for="radioExample5">
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.
<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="radioExample1" />
<label class="form-check-label" for="radioExample1">
Very good
</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">
Good
</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">
Medicore
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="exampleForm" id="radioExample4" />
<label class="form-check-label" for="radioExample4">
Bad
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="exampleForm" id="radioExample5" />
<label class="form-check-label" for="radioExample5">
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>
Modal survey
Survey in a pop-up window with the possibility of adding your comment.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-mdb-toggle="modal"
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" class="close text-white" data-mdb-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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="radioExample1" />
<label class="form-check-label" for="radioExample1">
Very good
</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">
Good
</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">
Medicore
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="exampleForm" id="radioExample4" />
<label class="form-check-label" for="radioExample4">
Bad
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="radio" name="exampleForm" id="radioExample5" />
<label class="form-check-label" for="radioExample5">
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="modal-footer">
<button type="button" class="btn btn-outline-primary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
Stepper survey
Survey that displays content as a process with defined by user milestones
-
step1
-
step2
-
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="form4Example3" rows="4"></textarea>
<label class="form-label" for="form4Example3">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.
<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="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>
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>