Hey there! This section was updated recently. If you're looking for 4.2.0 docs please visit this site
Bootstrap forms
Save your time with our predefined forms. Register, login, subscribe or contact form - choose whichever you need and simply paste it into your project.
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 Login Forms, Register Forms, Subscription Forms or Contact Forms 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.
Form with header
Login:
<!--Form with header-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="form-header purple darken-4">
<h3><i class="fa fa-lock"></i> Login:</h3>
</div>
<!--Body-->
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form2" class="form-control">
<label for="form2">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form4" class="form-control">
<label for="form4">Your password</label>
</div>
<div class="text-center">
<button class="btn btn-deep-purple">Login</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options">
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
<!--/Form with header-->
Form without header
Login:
<!--Form without header-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-lock"></i> Login:</h3>
<hr class="mt-2 mb-2">
</div>
<!--Body-->
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form2" class="form-control">
<label for="form2">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form4" class="form-control">
<label for="form4">Your password</label>
</div>
<div class="text-center">
<button class="btn btn-deep-purple">Login</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options">
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
<!--/Form without header-->
Naked Form
Login:
<!--Naked Form-->
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-lock"></i> Login:</h3>
<hr class="mt-2 mb-2">
</div>
<!--Body-->
<div class="md-form">
<i class="fa fa-envelope prefix"></i>
<input type="text" id="form2" class="form-control">
<label for="form2">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form4" class="form-control">
<label for="form4">Your password</label>
</div>
<div class="text-center">
<button class="btn btn-deep-purple">Login</button>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<div class="options">
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
<!--Naked Form-->
Register form with header
Register:
<!--Form with header-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="form-header blue-gradient">
<h3><i class="fa fa-user"></i> Register:</h3>
</div>
<!--Body-->
<div class="md-form">
<i class="fa fa-user prefix"></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"></i>
<input type="text" id="form2" class="form-control">
<label for="form2">Your email</label>
</div>
<div class="md-form">
<i class="fa fa-lock prefix"></i>
<input type="password" id="form4" class="form-control">
<label for="form4">Your password</label>
</div>
<div class="text-center">
<button class="btn btn-indigo">Sign up</button>
<hr>
<fieldset class="form-group">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">Subscribe me to the newsletter</label>
</fieldset>
</div>
</div>
</div>
<!--/Form with header-->
Subscription form without header
Subscribe:
We'll write rarely, but only the best content.
<!--Form without header-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-pencil"></i> Subscribe:</h3>
<hr class="mt-2 mb-2">
</div>
<!--Body-->
<p>We'll write rarely, but only the best content.</p>
<br>
<!--Body-->
<div class="md-form">
<i class="fa fa-user prefix"></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"></i>
<input type="text" id="form2" class="form-control">
<label for="form2">Your email</label>
</div>
<div class="text-center">
<button class="btn btn-deep-orange">Send</button>
</div>
</div>
</div>
<!--/Form without header-->
Contact form
Write to us:
We'll write rarely, but only the best content.
Or would you prefer to call?
+ 01 234 565 280
<!--Naked Form-->
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-envelope"></i> Write to us:</h3>
<hr class="mt-2 mb-2">
</div>
<!--Body-->
<p>We'll write rarely, but only the best content.</p>
<br>
<!--Body-->
<div class="md-form">
<i class="fa fa-user prefix"></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"></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"></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"></i>
<textarea type="text" id="form8" class="md-textarea"></textarea>
<label for="form8">Icon Prefix</label>
</div>
<div class="text-center">
<button class="btn btn-default">Submit</button>
<div class="call">
<br>
<p>Or would you prefer to call?
<br>
<span><i class="fa fa-phone"> </i></span> + 01 234 565 280</p>
</div>
</div>
</div>
<!--Naked Form-->