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.

You can use material design version or default bootstrap style.

Login:

Login:



Form login

Sign in

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

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

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

    <div class="text-center mt-4">
        <button class="btn btn-default" type="submit">Login</button>
    </div>
</form>
<!-- Material form login -->
                      
                  

Sign in


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

    <!-- Default input email -->
    <label for="defaultFormLoginEmailEx" class="grey-text">Your email</label>
    <input type="email" id="defaultFormLoginEmailEx" class="form-control">

    <br>

    <!-- Default input password -->
    <label for="defaultFormLoginPasswordEx" class="grey-text">Your password</label>
    <input type="password" id="defaultFormLoginPasswordEx" class="form-control">

    <div class="text-center mt-4">
        <button class="btn btn-indigo" type="submit">Login</button>
    </div>
</form>
<!-- Default form login -->
                      
                  

Form register

Sign up

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

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

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

    <!-- Material input email -->
    <div class="md-form">
        <i class="fa fa-exclamation-triangle prefix grey-text"></i>
        <input type="email" id="materialFormRegisterConfirmEx" class="form-control">
        <label for="materialFormRegisterConfirmEx">Confirm your email</label>
    </div>

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

    <div class="text-center mt-4">
        <button class="btn btn-primary" type="submit">Register</button>
    </div>
</form>
<!-- Material form register -->
                      
                  

Sign up




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

    <!-- Default input name -->
    <label for="defaultFormRegisterNameEx" class="grey-text">Your name</label>
    <input type="text" id="defaultFormRegisterNameEx" class="form-control">

    <br>

    <!-- Default input email -->
    <label for="defaultFormRegisterEmailEx" class="grey-text">Your email</label>
    <input type="email" id="defaultFormRegisterEmailEx" class="form-control">

    <br>

    <!-- Default input email -->
    <label for="defaultFormRegisterConfirmEx" class="grey-text">Confirm your email</label>
    <input type="email" id="defaultFormRegisterConfirmEx" class="form-control">

    <br>

    <!-- Default input password -->
    <label for="defaultFormRegisterPasswordEx" class="grey-text">Your password</label>
    <input type="password" id="defaultFormRegisterPasswordEx" class="form-control">

    <div class="text-center mt-4">
        <button class="btn btn-unique" type="submit">Register</button>
    </div>
</form>
<!-- Default form register -->
                      
                  

Form subscription

Subscribe

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

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

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

    <div class="text-center mt-4">
        <button class="btn btn-outline-info" type="submit">Send<i class="fa fa-paper-plane-o ml-2"></i></button>
    </div>
</form>
<!-- Material form subscription -->
                      
                  

Subscribe


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

    <!-- Default input name -->
    <label for="defaultFormSubscriptionNameEx" class="grey-text">Your name</label>
    <input type="text" id="defaultFormSubscriptionNameEx" class="form-control">

    <br>

    <!-- Default input email -->
    <label for="defaultFormSubscriptionEmailEx" class="grey-text">Your email</label>
    <input type="email" id="defaultFormSubscriptionEmailEx" class="form-control">

    <div class="text-center mt-4">
        <button class="btn btn-outline-purple" type="submit">Send<i class="fa fa-paper-plane-o ml-2"></i></button>
    </div>
</form>
<!-- Default form subscription -->
                      
                  

Form contact

See also:

1. Tutorial - Creating a fully functional contact form

2. Contact Sections

Wite to us

                      
<!-- Material form contact -->
<form>
    <p class="h4 text-center mb-4">Wite to us</p>

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

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

    <!-- Material input subject -->
    <div class="md-form">
        <i class="fa fa-tag prefix grey-text"></i>
        <input type="text" id="materialFormContactSubjectEx" class="form-control">
        <label for="materialFormContactSubjectEx">Subject</label>
    </div>

    <!-- Material textarea message -->
    <div class="md-form">
        <i class="fa fa-pencil prefix grey-text"></i>
        <textarea type="text" id="materialFormContactMessageEx" class="form-control md-textarea" rows="3"></textarea>
        <label for="materialFormContactMessageEx">Your message</label>
    </div>

    <div class="text-center mt-4">
        <button class="btn btn-outline-secondary" type="submit">Send<i class="fa fa-paper-plane-o ml-2"></i></button>
    </div>
</form>
<!-- Material form contact -->
                      
                  

Write to us




                      
<!-- Default form contact -->
<form>
    <p class="h4 text-center mb-4">Write to us</p>

    <!-- Default input name -->
    <label for="defaultFormContactNameEx" class="grey-text">Your name</label>
    <input type="text" id="defaultFormContactNameEx" class="form-control">

    <br>

    <!-- Default input email -->
    <label for="defaultFormContactEmailEx" class="grey-text">Your email</label>
    <input type="email" id="defaultFormContactEmailEx" class="form-control">

    <br>

    <!-- Default input subject -->
    <label for="defaultFormContactSubjectEx" class="grey-text">Subject</label>
    <input type="text" id="defaultFormContactSubjectEx" class="form-control">

    <br>

    <!-- Default textarea message -->
    <label for="defaultFormContactMessageEx" class="grey-text">Your message</label>
    <textarea type="text" id="defaultFormContactMessageEx" class="form-control" rows="3"></textarea>

    <div class="text-center mt-4">
        <button class="btn btn-outline-warning" type="submit">Send<i class="fa fa-paper-plane-o ml-2"></i></button>
    </div>
</form>
<!-- Default form contact -->
                      
                  

A form within a card

To see more cards options, go here.

Sign up

                      
<!-- Card -->
<div class="card">

    <!-- Card body -->
    <div class="card-body">

        <!-- Material form register -->
        <form>
            <p class="h4 text-center py-4">Sign up</p>

            <!-- Material input text -->
            <div class="md-form">
                <i class="fa fa-user prefix grey-text"></i>
                <input type="text" id="materialFormCardNameEx" class="form-control">
                <label for="materialFormCardNameEx" class="font-weight-light">Your name</label>
            </div>

            <!-- Material input email -->
            <div class="md-form">
                <i class="fa fa-envelope prefix grey-text"></i>
                <input type="email" id="materialFormCardEmailEx" class="form-control">
                <label for="materialFormCardEmailEx" class="font-weight-light">Your email</label>
            </div>

            <!-- Material input email -->
            <div class="md-form">
                <i class="fa fa-exclamation-triangle prefix grey-text"></i>
                <input type="email" id="materialFormCardConfirmEx" class="form-control">
                <label for="materialFormCardConfirmEx" class="font-weight-light">Confirm your email</label>
            </div>

            <!-- Material input password -->
            <div class="md-form">
                <i class="fa fa-lock prefix grey-text"></i>
                <input type="password" id="materialFormCardPasswordEx" class="form-control">
                <label for="materialFormCardPasswordEx" class="font-weight-light">Your password</label>
            </div>

            <div class="text-center py-4 mt-3">
                <button class="btn btn-cyan" type="submit">Register</button>
            </div>
        </form>
        <!-- Material form register -->

    </div>
    <!-- Card body -->

</div>
<!-- Card -->
                      
                  

Subscribe


                      
<!-- Card -->
<div class="card mx-xl-5">

    <!-- Card body -->
    <div class="card-body">

        <!-- Default form subscription -->
        <form>
            <p class="h4 text-center py-4">Subscribe</p>

            <!-- Default input name -->
            <label for="defaultFormCardNameEx" class="grey-text font-weight-light">Your name</label>
            <input type="text" id="defaultFormCardNameEx" class="form-control">

            <br>

            <!-- Default input email -->
            <label for="defaultFormCardEmailEx" class="grey-text font-weight-light">Your email</label>
            <input type="email" id="defaultFormCardEmailEx" class="form-control">

            <div class="text-center py-4 mt-3">
                <button class="btn btn-outline-purple" type="submit">Send<i class="fa fa-paper-plane-o ml-2"></i></button>
            </div>
        </form>
        <!-- Default form subscription -->

    </div>
    <!-- Card body -->

</div>
<!-- Card -->
                      
                  

A form within a modal

To see more modals options, go here.

                      
<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <!--Modal: Contact form-->
    <div class="modal-dialog cascading-modal" role="document">

        <!--Content-->
        <div class="modal-content">

            <!--Header-->
            <div class="modal-header primary-color white-text">
                <h4 class="title">
                    <i class="fa fa-pencil"></i> Contact form</h4>
                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <!--Body-->
            <div class="modal-body">

                <!-- Material input name -->
                <div class="md-form form-sm">
                    <i class="fa fa-envelope prefix"></i>
                    <input type="text" id="materialFormNameModalEx1" class="form-control form-control-sm">
                    <label for="materialFormNameModalEx1">Your name</label>
                </div>

                <!-- Material input email -->
                <div class="md-form form-sm">
                    <i class="fa fa-lock prefix"></i>
                    <input type="password" id="materialFormEmailModalEx1" class="form-control form-control-sm">
                    <label for="materialFormEmailModalEx1">Your email</label>
                </div>

                <!-- Material input subject -->
                <div class="md-form form-sm">
                    <i class="fa fa-tag prefix"></i>
                    <input type="text" id="materialFormSubjectModalEx1" class="form-control form-control-sm">
                    <label for="materialFormSubjectModalEx1">Subject</label>
                </div>

                <!-- Material textarea message -->
                <div class="md-form form-sm">
                    <i class="fa fa-pencil prefix"></i>
                    <textarea type="text" id="materialFormMessageModalEx1" class="md-textarea form-control"></textarea>
                    <label for="materialFormMessageModalEx1">Your message</label>
                </div>

                <div class="text-center mt-4 mb-2">
                    <button class="btn btn-primary">Send
                        <i class="fa fa-send ml-2"></i>
                    </button>
                </div>

            </div>
        </div>
        <!--/.Content-->
    </div>
    <!--/Modal: Contact form-->
</div>
                      
                  
                      
<div class="modal fade" id="modalDefaultContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <!--Modal: Contact form-->
    <div class="modal-dialog cascading-modal" role="document">

        <!--Content-->
        <div class="modal-content">

            <!--Header-->
            <div class="modal-header info-color white-text">
                <h4 class="title">
                    <i class="fa fa-pencil"></i> Contact form</h4>
                <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <!--Body-->
            <div class="modal-body">

                <!-- Default input name -->
                <label for="defaultFormNameModalEx">Your name</label>
                <input type="text" id="defaultFormNameModalEx" class="form-control form-control-sm">

                <br>

                <!-- Default input email -->
                <label for="defaultFormEmailModalEx">Your email</label>
                <input type="password" id="defaultFormEmailModalEx" class="form-control form-control-sm">

                <br>

                <!-- Default input subject -->
                <label for="defaultFormSubjectModalEx">Subject</label>
                <input type="text" id="defaultFormSubjectModalEx" class="form-control form-control-sm">

                <br>

                <!-- Default textarea message -->
                <label for="defaultFormMessageModalEx">Your message</label>
                <textarea type="text" id="defaultFormMessageModalEx" class="md-textarea form-control"></textarea>

                <div class="text-center mt-4 mb-2">
                    <button class="btn btn-info">Send
                        <i class="fa fa-send ml-2"></i>
                    </button>
                </div>

            </div>
        </div>
        <!--/.Content-->
    </div>
    <!--/Modal: Contact form-->
</div>
                      
                  

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-weight-bold">Log in</h3>
            </div>

            <div class="row mt-2 mb-3 d-flex justify-content-center">
                <!--Facebook-->
                <a class="fa-lg p-2 m-2 fb-ic"><i class="fa fa-facebook white-text fa-lg"> </i></a>
                <!--Twitter-->
                <a class="fa-lg p-2 m-2 tw-ic"><i class="fa fa-twitter white-text fa-lg"> </i></a>
                <!--Google +-->
                <a class="fa-lg p-2 m-2 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-weight-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-weight-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: Live preview-->
<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-check my-4">
                  <input class="form-check-input" type="checkbox" id="defaultCheck12">
                  <label for="defaultCheck12" 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="fa-lg p-2 m-2 fb-ic"><i class="fa fa-facebook white-text fa-lg"> </i></a>
                <!--Twitter-->
                <a class="fa-lg p-2 m-2 tw-ic"><i class="fa fa-twitter white-text fa-lg"> </i></a>
                <!--Google +-->
                <a class="fa-lg p-2 m-2 gplus-ic"><i class="fa fa-google-plus white-text fa-lg"> </i></a>
            </div>

        </div>

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

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

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'); width: 28rem;">
        <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-weight-bold"><strong>SIGN</strong> <a class="green-text font-weight-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-check my-4">
                  <input class="form-check-input" type="checkbox" value="" id="defaultCheck17">
                  <label class="form-check-label white-text" for="defaultCheck17">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 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-weight-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-weight-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-weight-bold ml-1"> Sign up</a></p>

        </div>

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

</section>