Forms examples
Bootstrap form
Bootstrap forms are input-based components which are designed to collect users' data. Used as a login, subscribe or contact form, all of them 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 in a lot of effort to get them right.
At your disposal are such constructions as predefined Form logins, Form registers, Form subscriptions or Form contacts and various other layout forms. Each of the forms offers a different type of functionality.
You can use either the default bootstrap style or the material design version.
In case you want to create your custom form, please take a look at some specific pages of our documentation from the list below or use our Form Builder:
Drag & drop form builderLogin / Sign in form
Default form login
<!-- Default form login -->
<form class="text-center border border-light p-5" action="#!">
<p class="h4 mb-4">Sign in</p>
<!-- Email -->
<input type="email" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="E-mail">
<!-- Password -->
<input type="password" id="defaultLoginFormPassword" class="form-control mb-4" placeholder="Password">
<div class="d-flex justify-content-around">
<div>
<!-- Remember me -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="defaultLoginFormRemember">
<label class="custom-control-label" for="defaultLoginFormRemember">Remember me</label>
</div>
</div>
<div>
<!-- Forgot password -->
<a href="">Forgot password?</a>
</div>
</div>
<!-- Sign in button -->
<button class="btn btn-info btn-block my-4" type="submit">Sign in</button>
<!-- Register -->
<p>Not a member?
<a href="">Register</a>
</p>
<!-- Social login -->
<p>or sign in with:</p>
<a href="#" class="mx-2" role="button"><i class="fab fa-facebook-f light-blue-text"></i></a>
<a href="#" class="mx-2" role="button"><i class="fab fa-twitter light-blue-text"></i></a>
<a href="#" class="mx-2" role="button"><i class="fab fa-linkedin-in light-blue-text"></i></a>
<a href="#" class="mx-2" role="button"><i class="fab fa-github light-blue-text"></i></a>
</form>
<!-- Default form login -->
Material form login MDB Pro component
Sign in
<!-- Material form login -->
<div class="card">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Sign in</strong>
</h5>
<!--Card content-->
<div class="card-body px-lg-5 pt-0">
<!-- Form -->
<form class="text-center" style="color: #757575;" action="#!">
<!-- Email -->
<div class="md-form">
<input type="email" id="materialLoginFormEmail" class="form-control">
<label for="materialLoginFormEmail">E-mail</label>
</div>
<!-- Password -->
<div class="md-form">
<input type="password" id="materialLoginFormPassword" class="form-control">
<label for="materialLoginFormPassword">Password</label>
</div>
<div class="d-flex justify-content-around">
<div>
<!-- Remember me -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="materialLoginFormRemember">
<label class="form-check-label" for="materialLoginFormRemember">Remember me</label>
</div>
</div>
<div>
<!-- Forgot password -->
<a href="">Forgot password?</a>
</div>
</div>
<!-- Sign in button -->
<button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" type="submit">Sign in</button>
<!-- Register -->
<p>Not a member?
<a href="">Register</a>
</p>
<!-- Social login -->
<p>or sign in with:</p>
<a type="button" class="btn-floating btn-fb btn-sm">
<i class="fab fa-facebook-f"></i>
</a>
<a type="button" class="btn-floating btn-tw btn-sm">
<i class="fab fa-twitter"></i>
</a>
<a type="button" class="btn-floating btn-li btn-sm">
<i class="fab fa-linkedin-in"></i>
</a>
<a type="button" class="btn-floating btn-git btn-sm">
<i class="fab fa-github"></i>
</a>
</form>
<!-- Form -->
</div>
</div>
<!-- Material form login -->
Register / Sign up form
Default form register
<!-- Default form register -->
<form class="text-center border border-light p-5" action="#!">
<p class="h4 mb-4">Sign up</p>
<div class="form-row mb-4">
<div class="col">
<!-- First name -->
<input type="text" id="defaultRegisterFormFirstName" class="form-control" placeholder="First name">
</div>
<div class="col">
<!-- Last name -->
<input type="text" id="defaultRegisterFormLastName" class="form-control" placeholder="Last name">
</div>
</div>
<!-- E-mail -->
<input type="email" id="defaultRegisterFormEmail" class="form-control mb-4" placeholder="E-mail">
<!-- Password -->
<input type="password" id="defaultRegisterFormPassword" class="form-control" placeholder="Password" aria-describedby="defaultRegisterFormPasswordHelpBlock">
<small id="defaultRegisterFormPasswordHelpBlock" class="form-text text-muted mb-4">
At least 8 characters and 1 digit
</small>
<!-- Phone number -->
<input type="text" id="defaultRegisterPhonePassword" class="form-control" placeholder="Phone number" aria-describedby="defaultRegisterFormPhoneHelpBlock">
<small id="defaultRegisterFormPhoneHelpBlock" class="form-text text-muted mb-4">
Optional - for two step authentication
</small>
<!-- Newsletter -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="defaultRegisterFormNewsletter">
<label class="custom-control-label" for="defaultRegisterFormNewsletter">Subscribe to our newsletter</label>
</div>
<!-- Sign up button -->
<button class="btn btn-info my-4 btn-block" type="submit">Sign in</button>
<!-- Social register -->
<p>or sign up with:</p>
<a href="#" class="mx-2" role="button"><i class="fab fa-facebook-f light-blue-text"></i></a>
<a href="#" class="mx-2" role="button"><i class="fab fa-twitter light-blue-text"></i></a>
<a href="#" class="mx-2" role="button"><i class="fab fa-linkedin-in light-blue-text"></i></a>
<a href="#" class="mx-2" role="button"><i class="fab fa-github light-blue-text"></i></a>
<hr>
<!-- Terms of service -->
<p>By clicking
<em>Sign up</em> you agree to our
<a href="" target="_blank">terms of service</a>
</form>
<!-- Default form register -->
Material form register MDB Pro component
Sign up
<!-- Material form register -->
<div class="card">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Sign up</strong>
</h5>
<!--Card content-->
<div class="card-body px-lg-5 pt-0">
<!-- Form -->
<form class="text-center" style="color: #757575;" action="#!">
<div class="form-row">
<div class="col">
<!-- First name -->
<div class="md-form">
<input type="text" id="materialRegisterFormFirstName" class="form-control">
<label for="materialRegisterFormFirstName">First name</label>
</div>
</div>
<div class="col">
<!-- Last name -->
<div class="md-form">
<input type="email" id="materialRegisterFormLastName" class="form-control">
<label for="materialRegisterFormLastName">Last name</label>
</div>
</div>
</div>
<!-- E-mail -->
<div class="md-form mt-0">
<input type="email" id="materialRegisterFormEmail" class="form-control">
<label for="materialRegisterFormEmail">E-mail</label>
</div>
<!-- Password -->
<div class="md-form">
<input type="password" id="materialRegisterFormPassword" class="form-control" aria-describedby="materialRegisterFormPasswordHelpBlock">
<label for="materialRegisterFormPassword">Password</label>
<small id="materialRegisterFormPasswordHelpBlock" class="form-text text-muted mb-4">
At least 8 characters and 1 digit
</small>
</div>
<!-- Phone number -->
<div class="md-form">
<input type="password" id="materialRegisterFormPhone" class="form-control" aria-describedby="materialRegisterFormPhoneHelpBlock">
<label for="materialRegisterFormPhone">Phone number</label>
<small id="materialRegisterFormPhoneHelpBlock" class="form-text text-muted mb-4">
Optional - for two step authentication
</small>
</div>
<!-- Newsletter -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="materialRegisterFormNewsletter">
<label class="form-check-label" for="materialRegisterFormNewsletter">Subscribe to our newsletter</label>
</div>
<!-- Sign up button -->
<button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" type="submit">Sign in</button>
<!-- Social register -->
<p>or sign up with:</p>
<a type="button" class="btn-floating btn-fb btn-sm">
<i class="fab fa-facebook-f"></i>
</a>
<a type="button" class="btn-floating btn-tw btn-sm">
<i class="fab fa-twitter"></i>
</a>
<a type="button" class="btn-floating btn-li btn-sm">
<i class="fab fa-linkedin-in"></i>
</a>
<a type="button" class="btn-floating btn-git btn-sm">
<i class="fab fa-github"></i>
</a>
<hr>
<!-- Terms of service -->
<p>By clicking
<em>Sign up</em> you agree to our
<a href="" target="_blank">terms of service</a>
</form>
<!-- Form -->
</div>
</div>
<!-- Material form register -->
Subscription form
Default form subscription
<!-- Default form subscription -->
<form class="text-center border border-light p-5" action="#!">
<p class="h4 mb-4">Subscribe</p>
<p>Join our mailing list. We write rarely, but only the best content.</p>
<p>
<a href="" target="_blank">See the last newsletter</a>
</p>
<!-- Name -->
<input type="text" id="defaultSubscriptionFormPassword" class="form-control mb-4" placeholder="Name">
<!-- Email -->
<input type="email" id="defaultSubscriptionFormEmail" class="form-control mb-4" placeholder="E-mail">
<!-- Sign in button -->
<button class="btn btn-info btn-block" type="submit">Sign in</button>
</form>
<!-- Default form subscription -->
Material form subscription MDB Pro component
Subscribe
<!-- Material form subscription -->
<div class="card">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Subscribe</strong>
</h5>
<!--Card content-->
<div class="card-body px-lg-5">
<!-- Form -->
<form class="text-center" style="color: #757575;" action="#!">
<p>Join our mailing list. We write rarely, but only the best content.</p>
<p>
<a href="" target="_blank">See the last newsletter</a>
</p>
<!-- Name -->
<div class="md-form mt-3">
<input type="text" id="materialSubscriptionFormPasswords" class="form-control">
<label for="materialSubscriptionFormPasswords">Name</label>
</div>
<!-- E-mai -->
<div class="md-form">
<input type="email" id="materialSubscriptionFormEmail" class="form-control">
<label for="materialSubscriptionFormEmail">E-mail</label>
</div>
<!-- Sign in button -->
<button class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect" type="submit">Sign in</button>
</form>
<!-- Form -->
</div>
</div>
<!-- Material form subscription -->
Form contact
See also:
1. Tutorial -–– Creating a fully functional contact form
Default form contact
<!-- Default form contact -->
<form class="text-center border border-light p-5" action="#!">
<p class="h4 mb-4">Contact us</p>
<!-- Name -->
<input type="text" id="defaultContactFormName" class="form-control mb-4" placeholder="Name">
<!-- Email -->
<input type="email" id="defaultContactFormEmail" class="form-control mb-4" placeholder="E-mail">
<!-- Subject -->
<label>Subject</label>
<select class="browser-default custom-select mb-4">
<option value="" disabled>Choose option</option>
<option value="1" selected>Feedback</option>
<option value="2">Report a bug</option>
<option value="3">Feature request</option>
<option value="4">Feature request</option>
</select>
<!-- Message -->
<div class="form-group">
<textarea class="form-control rounded-0" id="exampleFormControlTextarea2" rows="3" placeholder="Message"></textarea>
</div>
<!-- Copy -->
<div class="custom-control custom-checkbox mb-4">
<input type="checkbox" class="custom-control-input" id="defaultContactFormCopy">
<label class="custom-control-label" for="defaultContactFormCopy">Send me a copy of this message</label>
</div>
<!-- Send button -->
<button class="btn btn-info btn-block" type="submit">Send</button>
</form>
<!-- Default form contact -->
Material form contact MDB Pro component
Contact us
<!-- Material form contact -->
<div class="card">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Contact us</strong>
</h5>
<!--Card content-->
<div class="card-body px-lg-5 pt-0">
<!-- Form -->
<form class="text-center" style="color: #757575;" action="#!">
<!-- Name -->
<div class="md-form mt-3">
<input type="text" id="materialContactFormName" class="form-control">
<label for="materialContactFormName">Name</label>
</div>
<!-- E-mail -->
<div class="md-form">
<input type="email" id="materialContactFormEmail" class="form-control">
<label for="materialContactFormEmail">E-mail</label>
</div>
<!-- Subject -->
<span>Subject</span>
<select class="mdb-select">
<option value="" disabled>Choose option</option>
<option value="1" selected>Feedback</option>
<option value="2">Report a bug</option>
<option value="3">Feature request</option>
<option value="4">Feature request</option>
</select>
<!--Message-->
<div class="md-form">
<textarea id="materialContactFormMessage" class="form-control md-textarea" rows="3"></textarea>
<label for="materialContactFormMessage">Message</label>
</div>
<!-- Copy -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="materialContactFormCopy">
<label class="form-check-label" for="materialContactFormCopy">Send me a copy of this message</label>
</div>
<!-- Send button -->
<button class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect" type="submit">Send</button>
</form>
<!-- Form -->
</div>
</div>
<!-- Material form contact -->
// Material Select Initialization
$(document).ready(function() {
$('.mdb-select').materialSelect();
});