Modal Form
Bootstrap 5 Modal Form component
Bootstrap modal forms are displayed-on-action pop-up forms that are used for gathering data from website visitors, to register or log users.Using them alongside valuable content might bring a lot of business value to your project.
However, you should remember that using them in a spammy manner might have a completely different outcome - a drop in UX quality and frustration of your users.
Examples of Bootstrap modal form use:
- Email signup
- Register modal
- Contact form
Simple modal login
Guide your users to log in to their accounts.
<!-- 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="#staticBackdrop1">
Launch modal login form
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog d-flex justify-content-center">
<div class="modal-content w-75">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel1">Sign in</h5>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<form>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="email1" class="form-control" />
<label class="form-label" for="email1">Email address</label>
</div>
<!-- password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="password1" class="form-control" />
<label class="form-label" for="password1">Password</label>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
Simple modal register
Guide your users to create an account.
<!-- 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="#staticBackdrop2">
Launch modal register form
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog d-flex justify-content-center">
<div class="modal-content w-75">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">Sign up</h5>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<form>
<!-- Name input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="name2" class="form-control" />
<label class="form-label" for="name2">Name</label>
</div>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="email2" class="form-control" />
<label class="form-label" for="email2">Email address</label>
</div>
<!-- password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="password2" class="form-control" />
<label class="form-label" for="password2">Password</label>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block">Sign up</button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
Simple modal subscription
Use a simple modal subscription in which the user will be able to subscribe to the newsletter list.
<!-- 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="#staticBackdrop3">
Launch modal subscription form
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop3" tabindex="-1" aria-labelledby="exampleModalLabel3" aria-hidden="true">
<div class="modal-dialog d-flex justify-content-center">
<div class="modal-content w-75">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel3">Subscribe</h5>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<form>
<!-- Name input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="name3" class="form-control" />
<label class="form-label" for="name3">Name</label>
</div>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="email3" class="form-control" />
<label class="form-label" for="email3">Email address</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="checkbox3" checked />
<label class="form-check-label" for="checkbox3">
I have read and agree to the terms
</label>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block">Send</button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
Simple modal contact
Use modal contact to display a window with textarea and forms where the user can enter the necessary details.
<!-- 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="#staticBackdrop4">
Launch modal contact form
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop4" tabindex="-1" aria-labelledby="exampleModalLabel4" aria-hidden="true">
<div class="modal-dialog d-flex justify-content-center">
<div class="modal-content w-75">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel4">Write to us</h5>
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<form>
<!-- Name input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="text" id="name4" class="form-control" />
<label class="form-label" for="name4">Name</label>
</div>
<!-- Email input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="email" id="email4" class="form-control" />
<label class="form-label" for="email4">Email address</label>
</div>
<!-- textarea input -->
<div data-mdb-input-init class="form-outline mb-4">
<textarea id="textarea4" rows="4" class="form-control"></textarea>
<label class="form-label" for="textarea4">Your message</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-center mb-4">
<input class="form-check-input me-2" type="checkbox" value="" id="checkbox4" checked />
<label class="form-check-label" for="checkbox4">
Send me a copy of this message
</label>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block">Send</button>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->
Modal with avatar
The login modal can be combined with the avatar 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="#staticBackdrop5">
Launch modal login form
</button>
<!-- Modal -->
<div class="modal top fade" id="staticBackdrop5" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">
<div class="modal-dialog modal-dialog-centered text-center d-flex justify-content-center">
<div class="modal-content w-75">
<div class="modal-body p-4">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.webp" alt="avatar" class="rounded-circle position-absolute top-0 start-50 translate-middle h-50" />
<form>
<div>
<h5 class="pt-5 my-3">Maria Doe</h5>
<!-- password input -->
<div data-mdb-input-init class="form-outline mb-4">
<input type="password" id="password1" class="form-control" />
<label class="form-label" for="password1">Password</label>
</div>
<!-- Submit button -->
<button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Modal -->