Bootstrap forms

Bootstrap forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized.

Bootstrap forms in Material Design are simple and eye-pleasant. While creating MDB, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.

Such constructions like predefined Form logins, Form registers, Form subscriptions or Form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.

In case you want to create your custom Form have a look at Inputs documentation where you can find plenty of elements typical for forms.

Login:


Form login

Sign in

                
<!-- Form login -->
<form>
    <p class="h5 text-center mb-4">Sign in</p>

    <div class="md-form">
        <i class="fa fa-envelope prefix grey-text"></i>
        <input type="text" id="defaultForm-email" class="form-control">
        <label for="defaultForm-email">Your email</label>
    </div>

    <div class="md-form">
        <i class="fa fa-lock prefix grey-text"></i>
        <input type="password" id="defaultForm-pass" class="form-control">
        <label for="defaultForm-pass">Your password</label>
    </div>

    <div class="text-center">
        <button class="btn btn-default">Login</button>
    </div>
</form>
<!-- Form login -->
                
            

Form register

Sign up

                
<!-- Form register -->
<form>
    <p class="h5 text-center mb-4">Sign up</p>

    <div class="md-form">
        <i class="fa fa-user prefix grey-text"></i>
        <input type="text" id="orangeForm-name" class="form-control">
        <label for="orangeForm-name">Your name</label>
    </div>
    <div class="md-form">
        <i class="fa fa-envelope prefix grey-text"></i>
        <input type="text" id="orangeForm-email" class="form-control">
        <label for="orangeForm-email">Your email</label>
    </div>

    <div class="md-form">
        <i class="fa fa-lock prefix grey-text"></i>
        <input type="password" id="orangeForm-pass" class="form-control">
        <label for="orangeForm-pass">Your password</label>
    </div>

    <div class="text-center">
        <button class="btn btn-deep-orange">Sign up</button>
    </div>

</form>
<!-- Form register -->
                
            

Form subscription

Subscribe

            
<!-- Form subscription -->
<form>
    <p class="h5 text-center mb-4">Subscribe</p>

    <div class="md-form">
        <i class="fa fa-user prefix grey-text"></i>
        <input type="text" id="form3" class="form-control">
        <label for="form3">Your name</label>
    </div>

    <div class="md-form">
        <i class="fa fa-envelope prefix grey-text"></i>
        <input type="text" id="form2" class="form-control">
        <label for="form2">Your email</label>
    </div>

    <div class="text-center">
        <button class="btn btn-indigo">Send <i class="fa fa-paper-plane-o ml-1"></i></button>
    </div>

</form>
<!-- Form subscription -->
            
            

Form contact

Write to us

            
<!-- Form contact -->
<form>

    <p class="h5 text-center mb-4">Write to us</p>

    <div class="md-form">
        <i class="fa fa-user prefix grey-text"></i>
        <input type="text" id="form3" class="form-control">
        <label for="form3">Your name</label>
    </div>

    <div class="md-form">
        <i class="fa fa-envelope prefix grey-text"></i>
        <input type="text" id="form2" class="form-control">
        <label for="form2">Your email</label>
    </div>

    <div class="md-form">
        <i class="fa fa-tag prefix grey-text"></i>
        <input type="text" id="form32" class="form-control">
        <label for="form34">Subject</label>
    </div>

    <div class="md-form">
        <i class="fa fa-pencil prefix grey-text"></i>
        <textarea type="text" id="form8" class="md-textarea" style="height: 100px"></textarea>
        <label for="form8">Your message</label>
    </div>

    <div class="text-center">
        <button class="btn btn-unique">Send <i class="fa fa-paper-plane-o ml-1"></i></button>
    </div>

</form>
<!-- Form contact -->
            
            

Form elegant MDB Pro component

Sign in

Forgot Password?

or Sign in with:

                
.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); }
                
            
            
<section class="form-elegant">

    <!--Form without header-->
    <div class="card">

        <div class="card-body mx-4">

            <!--Header-->
            <div class="text-center">
                <h3 class="dark-grey-text mb-5"><strong>Sign in</strong></h3>
            </div>

            <!--Body-->
            <div class="md-form">
                <input type="text" id="Form-email1" class="form-control">
                <label for="Form-email1">Your email</label>
            </div>

            <div class="md-form pb-3">
                <input type="password" id="Form-pass1" class="form-control">
                <label 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="fa fa-facebook blue-text text-center"></i></button>
                    <!--Twitter-->
                    <button type="button" class="btn btn-white btn-rounded mr-md-3 z-depth-1a"><i class="fa fa-twitter blue-text"></i></button>
                    <!--Google +-->
                    <button type="button" class="btn btn-white btn-rounded z-depth-1a"><i class="fa fa-google-plus blue-text"></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>
    <!--/Form without header-->

</section>
            
            

Form gradient MDB Pro component

Log in

Forgot Password?

Don't have an account? Sign up

                
.form-gradient .font-small {
  font-size: 0.8rem; }

.form-gradient .header {
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem; }

.form-gradient input[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid #fd9267;
  -webkit-box-shadow: 0 1px 0 0 #fd9267;
  box-shadow: 0 1px 0 0 #fd9267; }

.form-gradient input[type=text]:focus:not([readonly]) + label {
  color: #4f4f4f; }

.form-gradient input[type=password]:focus:not([readonly]) {
  border-bottom: 1px solid #fd9267;
  -webkit-box-shadow: 0 1px 0 0 #fd9267;
  box-shadow: 0 1px 0 0 #fd9267; }

.form-gradient input[type=password]:focus:not([readonly]) + label {
  color: #4f4f4f; }
                
            
            
<section class="form-gradient">

    <!--Form with header-->
    <div class="card">

        <!--Header-->
        <div class="header pt-3 peach-gradient">

            <div class="row d-flex justify-content-center">
                <h3 class="white-text mb-3 pt-3 font-bold">Log in</h3>
            </div>

            <div class="row mt-2 mb-3 d-flex justify-content-center">
                <!--Facebook-->
                <a class="icons-sm fb-ic"><i class="fa fa-facebook white-text fa-lg"> </i></a>
                <!--Twitter-->
                <a class="icons-sm tw-ic"><i class="fa fa-twitter white-text fa-lg"> </i></a>
                <!--Google +-->
                <a class="icons-sm gplus-ic"><i class="fa fa-google-plus white-text fa-lg"> </i></a>
            </div>

        </div>
        <!--Header-->

        <div class="card-body mx-4 mt-4">

            <!--Body-->
            <div class="md-form">
                <input type="text" id="Form-email3" class="form-control">
                <label for="Form-email3">Your email</label>
            </div>

            <div class="md-form pb-1 pb-md-3">
                <input type="password" id="Form-pass3" class="form-control">
                <label for="Form-pass3">Your password</label>
                <p class="font-small grey-text d-flex justify-content-end">Forgot <a href="#" class="dark-grey-text ml-1 font-bold"> Password?</a></p>
            </div>


            <!--Grid row-->
            <div class="row d-flex align-items-center mb-4">

                <!--Grid column-->
                <div class="col-md-1 col-md-5 d-flex align-items-start">
                    <div class="text-center">
                        <button type="button" class="btn btn-grey btn-rounded z-depth-1a">Log in</button>
                    </div>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-7">
                    <p class="font-small grey-text d-flex justify-content-end mt-3">Don't have an account? <a href="#" class="dark-grey-text ml-1 font-bold"> Sign up</a></p>
                </div>
                <!--Grid column-->

            </div>
            <!--Grid row-->
        </div>

    </div>
    <!--/Form with header-->

</section>
            
            

Form light MDB Pro component

Sign up

Have an account? Log in

                
.form-light .font-small {
  font-size: 0.8rem; }

.form-light [type="radio"] + label,
.form-light [type="checkbox"] + label {
  font-size: 0.8rem; }

.form-light [type="checkbox"] + label:before {
  top: 2px;
  width: 15px;
  height: 15px; }

.form-light input[type="checkbox"] + label:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  z-index: 0;
  border-radius: 1px;
  margin-top: 2px;
  -webkit-transition: 0.2s;
  transition: 0.2s; }

.form-light input[type="checkbox"]:checked + label:before {
  top: -4px;
  left: -3px;
  width: 12px;
  height: 22px;
  border-style: solid;
  border-width: 2px;
  border-color: transparent #EB3573 #EB3573 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-light .footer {
  border-bottom-left-radius: .3rem;
  border-bottom-right-radius: .3rem; }
                
            
            
<section class="form-light">

    <!--Form without header-->
    <div class="card">

        <div class="card-body mx-4">

            <!--Header-->
            <div class="text-center">
                <h3 class="pink-text mb-5"><strong>Sign up</strong></h3>
            </div>

            <!--Body-->
            <div class="md-form">
                <input type="text" id="Form-email2" class="form-control">
                <label for="Form-email2">Your email</label>
            </div>

            <div class="md-form pb-3">
                <input type="password" id="Form-pass2" class="form-control">
                <label for="Form-pass2">Your password</label>
                <div class="form-group">
                    <input type="checkbox" id="checkbox">
                    <label for="checkbox" class="grey-text">Accept the<a href="#" class="blue-text"> Terms and Conditions</a></label>
                </div>
            </div>

            <!--Grid row-->
            <div class="row d-flex align-items-center mb-4">

                <!--Grid column-->
                <div class="col-md-3 col-md-6 text-center">
                    <button type="button" class="btn btn-pink btn-block btn-rounded z-depth-1">Sign up</button>
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-6">
                    <p class="font-small grey-text d-flex justify-content-end">Have an account? <a href="#" class="blue-text ml-1"> Log in</a></p>
                </div>
                <!--Grid column-->

            </div>
            <!--Grid row-->
        </div>

        <!--Footer-->
        <div class="footer pt-3 mdb-color lighten-3">

            <div class="row d-flex justify-content-center">
                <p class="font-small white-text mb-2 pt-3">or Sign up with:</p>
            </div>

            <div class="row mt-2 mb-3 d-flex justify-content-center">
                <!--Facebook-->
                <a class="icons-sm fb-ic"><i class="fa fa-facebook white-text fa-lg"> </i></a>
                <!--Twitter-->
                <a class="icons-sm tw-ic"><i class="fa fa-twitter white-text fa-lg"> </i></a>
                <!--Google +-->
                <a class="icons-sm gplus-ic"><i class="fa fa-google-plus white-text fa-lg"> </i></a>
            </div>

        </div>
        
    </div>
    <!--/Form without header-->

</section>
            
            

Form dark MDB Pro component

SIGN UP

Have an account? Log in

                
.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=text]: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=text]: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%; }
                
            
            
<!--Section: Live preview-->
<section class="form-dark">

    <!--Form without header-->
    <div class="card card-image" style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table7.jpg');">
        <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">

            <!--Header-->
            <div class="text-center">
                <h3 class="white-text mb-5 mt-4 font-bold"><strong>SIGN</strong> <a class="green-text font-bold"><strong> UP</strong></a></h3>
            </div>

            <!--Body-->
            <div class="md-form">
                <input type="text" id="Form-email5" class="form-control white-text">
                <label for="Form-email5">Your email</label>
            </div>

            <div class="md-form pb-3">
                <input type="password" id="Form-pass5" class="form-control white-text">
                <label for="Form-pass5">Your password</label>
                <div class="form-group">
                    <input type="checkbox" id="checkbox6">
                    <label for="checkbox6" class="white-text">Accept the<a href="#" class="green-text font-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 in</button>
                </div>
                <!--Grid column-->
            </div>
            <!--Grid 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-bold"> Log in</a></p>
            </div>
            <!--Grid column-->

        </div>
    </div>
    <!--/Form without header-->

</section>
<!--Section: Live preview-->
            
            

Form simple MDB Pro component

Log in

Forgot Password?

Don't have an account? Sign up

                
.form-simple .font-small {
  font-size: 0.8rem; }

.form-simple .header {
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem; }

.form-simple input[type=text]:focus:not([readonly]) {
  border-bottom: 1px solid #ff3547;
  -webkit-box-shadow: 0 1px 0 0 #ff3547;
  box-shadow: 0 1px 0 0 #ff3547; }

.form-simple input[type=text]:focus:not([readonly]) + label {
  color: #4f4f4f; }

.form-simple input[type=password]:focus:not([readonly]) {
  border-bottom: 1px solid #ff3547;
  -webkit-box-shadow: 0 1px 0 0 #ff3547;
  box-shadow: 0 1px 0 0 #ff3547; }

.form-simple input[type=password]:focus:not([readonly]) + label {
  color: #4f4f4f; }
                
            
            
<section class="form-simple">

    <!--Form with header-->
    <div class="card">

        <!--Header-->
        <div class="header pt-3 grey lighten-2">

            <div class="row d-flex justify-content-start">
                <h3 class="deep-grey-text mt-3 mb-4 pb-1 mx-5">Log in</h3>
            </div>

        </div>
        <!--Header-->

        <div class="card-body mx-4 mt-4">

            <!--Body-->
            <div class="md-form">
                <input type="text" id="Form-email4" class="form-control">
                <label for="Form-email4">Your email</label>
            </div>

            <div class="md-form pb-3">
                <input type="password" id="Form-pass4" class="form-control">
                <label for="Form-pass4">Your password</label>
                <p class="font-small grey-text d-flex justify-content-end">Forgot <a href="#" class="dark-grey-text font-bold ml-1"> Password?</a></p>
            </div>

            <div class="text-center mb-4">
                <button type="button" class="btn btn-danger btn-block z-depth-2">Log in</button>
            </div>
            <p class="font-small grey-text d-flex justify-content-center">Don't have an account? <a href="#" class="dark-grey-text font-bold ml-1"> Sign up</a></p>

        </div>

    </div>
    <!--/Form with header-->

</section>