Modal Form
Bootstrap Modal Form
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
Bootstrap modal forms are displayed-on-action pop-up forms that are used for gathering data from website visitors and 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
See also: Modal Core Documentation, Modal Styles and Modal Templates.
Simple modal login
Guide your users to login on their account.
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="defaultForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="defaultForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default">Login</button>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalLoginForm">Launch
Modal Login Form</a>
</div>
Simple modal register
Guide your users to create an account.
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-name">Your name</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-email">Your email</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange">Sign up</button>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalRegisterForm">Launch
Modal Register Form</a>
</div>
Simple modal subscription
Use a simple modal subscription in which the user will be able to subscribe to the newsetter list.
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate">
<label data-error="wrong" data-success="right" for="form3">Your name</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate">
<label data-error="wrong" data-success="right" for="form2">Your email</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-indigo">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalSubscriptionForm">Launch
Modal Subscription Form</a>
</div>
Simple modal contact
Use modal contact to display a window with textarea and forms where the user can enter the necessary details.
<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Write to us</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form34" class="form-control validate">
<label data-error="wrong" data-success="right" for="form34">Your name</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form29" class="form-control validate">
<label data-error="wrong" data-success="right" for="form29">Your email</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-tag prefix grey-text"></i>
<input type="text" id="form32" class="form-control validate">
<label data-error="wrong" data-success="right" for="form32">Subject</label>
</div>
<div class="md-form">
<i class="fas fa-pencil prefix grey-text"></i>
<textarea type="text" id="form8" class="md-textarea form-control" rows="4"></textarea>
<label data-error="wrong" data-success="right" for="form8">Your message</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-unique">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalContactForm">Launch
Modal Contact Form</a>
</div>
Cascading modal register / login MDB Pro component
Use a modal that contains both a login and registration window.
<!--Modal: Login / Register Form-->
<div class="modal fade" id="modalLRForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs md-tabs tabs-2 light-blue darken-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel7" role="tab"><i class="fas fa-user mr-1"></i>
Login</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel8" role="tab"><i class="fas fa-user-plus mr-1"></i>
Register</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!--Panel 7-->
<div class="tab-pane fade in show active" id="panel7" role="tabpanel">
<!--Body-->
<div class="modal-body mb-1">
<div class="md-form form-sm mb-5">
<i class="fas fa-envelope prefix"></i>
<input type="email" id="modalLRInput10" class="form-control form-control-sm validate">
<label data-error="wrong" data-success="right" for="modalLRInput10">Your email</label>
</div>
<div class="md-form form-sm mb-4">
<i class="fas fa-lock prefix"></i>
<input type="password" id="modalLRInput11" class="form-control form-control-sm validate">
<label data-error="wrong" data-success="right" for="modalLRInput11">Your password</label>
</div>
<div class="text-center mt-2">
<button class="btn btn-info">Log in <i class="fas fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-center text-md-right mt-1">
<p>Not a member? <a href="#" class="blue-text">Sign Up</a></p>
<p>Forgot <a href="#" class="blue-text">Password?</a></p>
</div>
<button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Panel 7-->
<!--Panel 8-->
<div class="tab-pane fade" id="panel8" role="tabpanel">
<!--Body-->
<div class="modal-body">
<div class="md-form form-sm mb-5">
<i class="fas fa-envelope prefix"></i>
<input type="email" id="modalLRInput12" class="form-control form-control-sm validate">
<label data-error="wrong" data-success="right" for="modalLRInput12">Your email</label>
</div>
<div class="md-form form-sm mb-5">
<i class="fas fa-lock prefix"></i>
<input type="password" id="modalLRInput13" class="form-control form-control-sm validate">
<label data-error="wrong" data-success="right" for="modalLRInput13">Your password</label>
</div>
<div class="md-form form-sm mb-4">
<i class="fas fa-lock prefix"></i>
<input type="password" id="modalLRInput14" class="form-control form-control-sm validate">
<label data-error="wrong" data-success="right" for="modalLRInput14">Repeat password</label>
</div>
<div class="text-center form-sm mt-2">
<button class="btn btn-info">Sign up <i class="fas fa-sign-in ml-1"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options text-right">
<p class="pt-1">Already have an account? <a href="#" class="blue-text">Log In</a></p>
</div>
<button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Close</button>
</div>
</div>
<!--/.Panel 8-->
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Login / Register Form-->
<div class="text-center">
<a href="" class="btn btn-default btn-rounded my-3" data-toggle="modal" data-target="#modalLRForm">Launch
Modal LogIn/Register</a>
</div>
Modal with avatar
The login modal can be combined with the avatar component.
Maria Doe
<!--Modal: Login with Avatar Form-->
<div class="modal fade" id="modalLoginAvatar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog cascading-modal modal-avatar modal-sm" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.webp" alt="avatar" class="rounded-circle img-responsive">
</div>
<!--Body-->
<div class="modal-body text-center mb-1">
<h5 class="mt-1 mb-2">Maria Doe</h5>
<div class="md-form ml-0 mr-0">
<input type="password" type="text" id="form29" class="form-control form-control-sm validate ml-0">
<label data-error="wrong" data-success="right" for="form29" class="ml-0">Enter password</label>
</div>
<div class="text-center mt-4">
<button class="btn btn-cyan mt-1">Login <i class="fas fa-sign-in ml-1"></i></button>
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Login with Avatar Form-->
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#modalLoginAvatar">Launch
Modal Login with Avatar</a>
</div>
Subscription modal with an orange header
Use a subscription modal with a clear header.
<div class="modal fade" id="orangeModalSubscription" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-notify modal-warning" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header text-center">
<h4 class="modal-title white-text w-100 font-weight-bold py-2">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate">
<label data-error="wrong" data-success="right" for="form3">Your name</label>
</div>
<div class="md-form">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate">
<label data-error="wrong" data-success="right" for="form2">Your email</label>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-outline-warning waves-effect">Send <i class="fas fa-paper-plane-o ml-1"></i></a>
</div>
</div>
<!--/.Content-->
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#orangeModalSubscription">Launch
modal Subscription</a>
</div>
.modal-notify .modal-header {
border-radius: 3px 3px 0 0;
}
.modal-notify .modal-content {
border-radius: 3px;
}
Elegant modal login MDB Pro component
The elegant modal login is built according to the concept of material design. Use it to make logging into your website a pleasure.
<!-- Modal -->
<div class="modal fade" id="elegantModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<!--Content-->
<div class="modal-content form-elegant">
<!--Header-->
<div class="modal-header text-center">
<h3 class="modal-title w-100 dark-grey-text font-weight-bold my-3" id="myModalLabel"><strong>Sign in</strong></h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mx-4">
<!--Body-->
<div class="md-form mb-5">
<input type="email" id="Form-email1" class="form-control validate">
<label data-error="wrong" data-success="right" for="Form-email1">Your email</label>
</div>
<div class="md-form pb-3">
<input type="password" id="Form-pass1" class="form-control validate">
<label data-error="wrong" data-success="right" for="Form-pass1">Your password</label>
<p class="font-small blue-text d-flex justify-content-end">Forgot <a href="#" class="blue-text ml-1">
Password?</a></p>
</div>
<div class="text-center mb-3">
<button type="button" class="btn blue-gradient btn-block btn-rounded z-depth-1a">Sign in</button>
</div>
<p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2"> or Sign in
with:</p>
<div class="row my-3 d-flex justify-content-center">
<!--Facebook-->
<button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-facebook-f text-center"></i></button>
<!--Twitter-->
<button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fab fa-twitter"></i></button>
<!--Google +-->
<button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fab fa-google-plus-g"></i></button>
</div>
</div>
<!--Footer-->
<div class="modal-footer mx-5 pt-3 mb-1">
<p class="font-small grey-text d-flex justify-content-end">Not a member? <a href="#" class="blue-text ml-1">
Sign Up</a></p>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal -->
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#elegantModalForm">Launch
modal Login Form</a>
</div>
.form-elegant .font-small {
font-size: 0.8rem; }
.form-elegant .z-depth-1a {
-webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }
.form-elegant .z-depth-1-half,
.form-elegant .btn:hover {
-webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }
.form-elegant .modal-header {
border-bottom: none; }
.modal-dialog .form-elegant .btn .fab {
color: #2196f3!important; }
.form-elegant .modal-body, .form-elegant .modal-footer {
font-weight: 400; }
Dark modal register MDB Pro component
To create a dark modal register use the following code.
<!-- Modal -->
<div class="modal fade" id="darkModalForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog form-dark" role="document">
<!--Content-->
<div class="modal-content card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).webp');">
<div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
<!--Header-->
<div class="modal-header text-center pb-4">
<h3 class="modal-title w-100 white-text font-weight-bold" id="myModalLabel"><strong>SIGN</strong> <a
class="green-text font-weight-bold"><strong> UP</strong></a></h3>
<button type="button" class="close white-text" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<!--Body-->
<div class="md-form mb-5">
<input type="email" id="Form-email5" class="form-control validate white-text">
<label data-error="wrong" data-success="right" for="Form-email5">Your email</label>
</div>
<div class="md-form pb-3">
<input type="password" id="Form-pass5" class="form-control validate white-text">
<label data-error="wrong" data-success="right" for="Form-pass5">Your password</label>
<div class="form-group mt-4">
<input class="form-check-input" type="checkbox" id="checkbox624">
<label for="checkbox624" class="white-text form-check-label">Accept the<a href="#" class="green-text font-weight-bold">
Terms and Conditions</a></label>
</div>
</div>
<!--Grid row-->
<div class="row d-flex align-items-center mb-4">
<!--Grid column-->
<div class="text-center mb-3 col-md-12">
<button type="button" class="btn btn-success btn-block btn-rounded z-depth-1">Sign up</button>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<p class="font-small white-text d-flex justify-content-end">Have an account? <a href="#" class="green-text ml-1 font-weight-bold">
Log in</a></p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!-- Modal -->
<div class="text-center">
<a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#darkModalForm">Launch modal
register Form</a>
</div>
.form-dark .font-small {
font-size: 0.8rem; }
.form-dark [type="radio"] + label,
.form-dark [type="checkbox"] + label {
font-size: 0.8rem; }
.form-dark [type="checkbox"] + label:before {
top: 2px;
width: 15px;
height: 15px; }
.form-dark .md-form label {
color: #fff; }
.form-dark input[type=email]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851; }
.form-dark input[type=email]:focus:not([readonly]) + label {
color: #fff; }
.form-dark input[type=password]:focus:not([readonly]) {
border-bottom: 1px solid #00C851;
-webkit-box-shadow: 0 1px 0 0 #00C851;
box-shadow: 0 1px 0 0 #00C851; }
.form-dark input[type=password]:focus:not([readonly]) + label {
color: #fff; }
.form-dark input[type="checkbox"] + label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 17px;
height: 17px;
z-index: 0;
border: 1.5px solid #fff;
border-radius: 1px;
margin-top: 2px;
-webkit-transition: 0.2s;
transition: 0.2s; }
.form-dark input[type="checkbox"]:checked + label:before {
top: -4px;
left: -3px;
width: 12px;
height: 22px;
border-style: solid;
border-width: 2px;
border-color: transparent #00c851 #00c851 transparent;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
-webkit-backface-visibility: hidden;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%; }
.form-dark .modal-header {
border-bottom: none;
}