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.

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>
  <div class="grey-text">
    <mdb-input label="Your email" icon="envelope" type="email"/>
    <mdb-input label="Your password" icon="lock" type="password"/>
  </div>
  <div class="text-center">
    <btn>Login</btn>
  </div>
</form>
<!-- Material form login -->
                      
                  

Sign in


                      
<!-- Default form login -->
<form>
  <p class="h4 text-center mb-4">Sign in</p>
  <label for="defaultFormLoginEmailEx" class="grey-text">Your email</label>
  <input type="email" id="defaultFormLoginEmailEx" class="form-control"/>
  <br/>
  <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>
  <div class="grey-text">
    <mdb-input label="Your name" icon="user" type="text"/>
    <mdb-input label="Your email" icon="envelope" type="email"/>
    <mdb-input label="Confirm your email" icon="exclamation-triangle" type="text"/>
    <mdb-input label="Your password" icon="lock" type="password"/>
  </div>
  <div class="text-center">
    <btn color="primary">Register</btn>
  </div>
</form>
<!-- Material form register -->
                      
                  

Sign up




                      
<!-- Default form register -->
<form>
  <p class="h4 text-center mb-4">Sign up</p>
  <label for="defaultFormRegisterNameEx" class="grey-text">Your name</label>
  <input type="text" id="defaultFormRegisterNameEx" class="form-control"/>
  <br/>
  <label for="defaultFormRegisterEmailEx" class="grey-text">Your email</label>
  <input type="email" id="defaultFormRegisterEmailEx" class="form-control"/>
  <br/>
  <label for="defaultFormRegisterConfirmEx" class="grey-text">Confirm your email</label>
  <input type="email" id="defaultFormRegisterConfirmEx" class="form-control"/>
  <br/>
  <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="h5 text-center mb-4">Subscribe</p>
  <div class="grey-text">
    <mdb-input label="Your name" icon="user" type="text"/>
    <mdb-input label="Your email" icon="envelope" type="email"/>
  </div>
  <div class="text-center">
    <btn outline="info">Send <fa icon="paper-plane-o" class="ml-1"/></btn>
  </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

Wite to us

                      
<!-- Material form contact -->
<form>
  <p class="h4 text-center mb-4">Write to us</p>
  <div class="grey-text">
    <mdb-input label="Your name" icon="user" group type="text" validate error="wrong" success="right"/>
    <mdb-input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
    <mdb-input label="Subject" icon="tag" group type="text" validate error="wrong" success="right"/>
    <md-textarea :rows="2" label="Your message" icon="pencil"/>
  </div>
  <div class="text-center">
    <btn outline="secondary">Send <Fa icon="paper-plane-o" class="ml-1"/></btn>
  </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 -->
<card>
  <card-body>
    <form>
      <p class="h4 text-center py-4">Sign up</p>
      <div class="grey-text">
        <mdb-input label="Your name" icon="user" group type="text" validate error="wrong" success="right"/>
        <mdb-input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
        <mdb-input label="Confirm your email" icon="exclamation-triangle" group type="text" validate error="wrong" success="right"/>
        <mdb-input label="Your password" icon="lock" group type="password" validate/>
      </div>
      <div class="text-center py-4 mt-3">
        <btn color="cyan" type="submit">Register</btn>
      </div>
    </form>
  </card-body>
</card>  
<!-- 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.

                      
<template>
  <container>
    <row>
      <column size="12" class="text-center mb-5">
        <btn @click.native="showModal = true" color="info">Launch modal contact form</btn>
        <modal v-if="showModal" @close="showModal = false" cascade class="text-left">
          <modal-header class="primary-color white-text">
            <h4 class="title"><fa class="fa fa-pencil" /> Contact form</h4>
          </modal-header>
          <modal-body class="grey-text">
            <mdb-input size="sm" label="Your name" icon="user" group type="text" validate error="wrong" success="right"/>
            <mdb-input size="sm" label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
            <mdb-input size="sm" label="Subject" icon="tag" group type="text" validate error="wrong" success="right"/>
            <md-textarea size="sm" :rows="2" label="Your message" icon="pencil"/>
          </modal-body>
          <modal-footer>
            <btn color="secondary" @click.native="showModal = false">Close</btn>
            <btn color="primary">Save changes</btn>
          </modal-footer>
        </modal>
      </column>
    </row>
  </container>
</template>

<script>
import { Container, Row, Column, mdbInput, MdTextarea, Btn, Fa, Modal, ModalHeader, ModalBody, ModalFooter } from 'mdbvue';

export default {
  name: 'FormsPage',
  components: {
    Container, 
    Row,
    Column,
    mdbInput,
    MdTextarea,
    Btn, 
    Fa,
    Modal,
    ModalHeader,
    ModalBody,
    ModalFooter
  },
  data() {
    return {
      showModal: false
    };
  }
};
</script>

<style scoped>
</style>
                      
                  

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">
  <row>
    <column md="5">
      <card>
        <card-body class="mx-4">
          <div class="text-center">
            <h3 class="dark-grey-text mb-5"><strong>Sign in</strong></h3>
          </div>
          <mdb-input label="Your email" type="email"/>
          <mdb-input label="Your password" type="password" containerClass="mb-0"/>
          <p class="font-small blue-text d-flex justify-content-end pb-3">Forgot <a href="#" class="blue-text ml-1"> Password?</a></p>
          <div class="text-center mb-3">
            <btn type="button" gradient="blue" rounded class="btn-block z-depth-1a">Sign in</btn>
          </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">
            <btn type="button" color="white" rounded class="mr-md-3 z-depth-1a"><fa icon="facebook" class="blue-text text-center"/></btn>
            <btn type="button" color="white" rounded class="mr-md-3 z-depth-1a"><fa icon="twitter" class="blue-text"/></btn>
            <btn type="button" color="white" rounded class="z-depth-1a"><fa icon="google-plus" class="blue-text"/></btn>
          </div>
        </card-body>
        <modal-footer class="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>
        </modal-footer>
      </card>
    </column>
  </row>
</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">
  <row>
    <column md="5">
      <card>
        <div class="header pt-3 peach-gradient">
          <row class="d-flex justify-content-center">
            <h3 class="white-text mb-3 pt-3 font-weight-bold">Log in</h3>
          </row>
          <row class="mt-2 mb-3 d-flex justify-content-center">
            <a class="fa-lg p-2 m-2 fb-ic"><fa class="fa fa-facebook white-text fa-lg"/></a>
            <a class="fa-lg p-2 m-2 tw-ic"><fa class="fa fa-twitter white-text fa-lg"/></a>
            <a class="fa-lg p-2 m-2 gplus-ic"><fa class="fa fa-google-plus white-text fa-lg"/></a>
          </row>
        </div>
        <card-body class="mx-4 mt-4">
          <mdb-input label="Your email" type="text"/>
          <mdb-input label="Your password" type="password" containerClass="mb-0"/>
          <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>
          <row class="d-flex align-items-center mb-4 mt-5">
            <column md="5" class="d-flex align-items-start">
              <div class="text-center">
                <btn color="grey" rounded type="button" class="z-depth-1a">Log in</btn>
              </div>
            </column>
            <column md="7" class="d-flex justify-content-end">
              <p class="font-small grey-text mt-3">Don't have an account? <a href="#" class="dark-grey-text ml-1 font-weight-bold"> Sign up</a></p>
            </column>
          </row>
        </card-body>
      </card>
    </column>
  </row>
</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">
  <row>
    <column md="5">
      <card>
        <card-body class="mx-4">
          <div class="text-center">
            <h3 class="pink-text mb-5"><strong>Sign up</strong></h3>
          </div>
          <mdb-input label="Your email" type="text"/>
          <mdb-input label="Your password" type="password"/>
          <mdb-input class="my-5" type="checkbox" id="defaultCheck16" label="Accept the Terms and Conditions" />
          <row class="d-flex align-items-center mb-4">
            <column md="6" class="text-center">
              <button type="button" class="btn btn-pink btn-block btn-rounded z-depth-1">Sign up</button>
            </column>
            <column 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>
            </column>
          </row>
        </card-body>
        <div class="footer pt-3 mdb-color lighten-3">
          <row class="d-flex justify-content-center">
            <p class="font-small white-text mb-2 pt-3">or Sign up with:</p>
          </row>
          <row class="mt-2 mb-3 d-flex justify-content-center">
            <a class="fa-lg p-2 m-2 fb-ic"><fa class="fa fa-facebook white-text fa-lg"> </fa></a>
            <a class="fa-lg p-2 m-2 tw-ic"><fa class="fa fa-twitter white-text fa-lg"> </fa></a>
            <a class="fa-lg p-2 m-2 gplus-ic"><fa class="fa fa-google-plus white-text fa-lg"> </fa></a>
          </row>
        </div>
      </card>
    </column>
  </row>
</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 class="form-dark">
  <row>
    <column md="5">
      <card class="card-image" :style="{'backgroundImage': '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">
          <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>
          <mdb-input label="Your email" type="text"/>
          <mdb-input label="Your password" type="password"/>
          <mdb-input class="my-5" type="checkbox" id="defaultCheck17" label="Accept the Terms and Conditions" />
          <row class="d-flex align-items-center mb-4">
            <div class="text-center mb-3 col-md-12">
              <btn color="success" rounded type="button" class="btn-block z-depth-1">Sign in</btn>
            </div>
          </row>
          <column 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>
          </column>
        </div>
      </card>
    </column>
  </row>
</section>
            
            

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">
  <row>
    <column md="5">
      <card>
        <div class="header pt-3 grey lighten-2">
          <row class="d-flex justify-content-start">
            <h3 class="deep-grey-text mt-3 mb-4 pb-1 mx-5">Log in</h3>
          </row>
        </div>
        <card-body class="mx-4 mt-4">
          <mdb-input label="Your email" type="text"/>
          <mdb-input label="Your password" type="password" containerClass="mb-0"/>
          <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 class="text-center mb-4 mt-5">
            <btn color="danger" type="button" class="btn-block z-depth-2">Log in</btn>
          </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>
        </card-body>
      </card>
    </column>
  </row>
</section>