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">
<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 type="button" class="light-blue-text mx-2">
<i class="fa fa-facebook"></i>
</a>
<a type="button" class="light-blue-text mx-2">
<i class="fa fa-twitter"></i>
</a>
<a type="button" class="light-blue-text mx-2">
<i class="fa fa-linkedin"></i>
</a>
<a type="button" class="light-blue-text mx-2">
<i class="fa fa-github"></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;">
<!-- 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="fa fa-facebook"></i>
</a>
<a type="button" class="btn-floating btn-tw btn-sm">
<i class="fa fa-twitter"></i>
</a>
<a type="button" class="btn-floating btn-li btn-sm">
<i class="fa fa-linkedin"></i>
</a>
<a type="button" class="btn-floating btn-git btn-sm">
<i class="fa 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">
<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 type="button" class="light-blue-text mx-2">
<i class="fa fa-facebook"></i>
</a>
<a type="button" class="light-blue-text mx-2">
<i class="fa fa-twitter"></i>
</a>
<a type="button" class="light-blue-text mx-2">
<i class="fa fa-linkedin"></i>
</a>
<a type="button" class="light-blue-text mx-2">
<i class="fa 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>
<!-- 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;">
<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="fa fa-facebook"></i>
</a>
<a type="button" class="btn-floating btn-tw btn-sm">
<i class="fa fa-twitter"></i>
</a>
<a type="button" class="btn-floating btn-li btn-sm">
<i class="fa fa-linkedin"></i>
</a>
<a type="button" class="btn-floating btn-git btn-sm">
<i class="fa 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">
<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;">
<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">
<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;">
<!-- 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 type="text" 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 -->
Getting started : download & setup
Download
All the components and features are part of MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.
Click the button below to go to Download Page, where you can download MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires MDB Pro package.
Click the button below to learn more about MDBbootstrap Pro package
MDBootstrap ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.
Map of dependencies of SCSS files in MDBootstrap:
Legend:
'-->' means 'required'
All free and pro files require files from 'core' catalog
'none' means 'this component doesn't require anything except core files'
A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working
All PRO components require 'pro/_variables.scss' file
scss/
|
|-- core/
| |
| |-- bootstrap/
| | |-- _functions.scss
| | |-- _variables.scss
| |
| |-- _colors.scss
| |-- _global.scss
| |-- _helpers.scss
| |-- _masks.scss
| |-- _mixins.scss
| |-- _typography.scss
| |-- _variables.scss
| |-- _waves.scss
|
|-- free/
| |-- _animations-basic.scss --> none
| |-- _animations-extended.scss --> _animations-basic.scss
| |-- _buttons.scss --> none
| |-- _cards.scss --> none <_buttons.scss>
| |-- _dropdowns.scss --> none <_buttons.scss>
| |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
| |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
| |-- _pagination.scss --> none
| |-- _badges.scss --> none
| |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
| |-- _carousels.scss --> <_buttons.scss>
| |-- _forms.scss --> none
| |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
| |-- _footers.scss none <_buttons.scss> (PRO: )
| |-- _list-group.scss --> none
| |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
| |-- _depreciated.scss
|
|-- pro/
| |
| |-- picker/
| | |-- _default.scss --> none
| | |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
| | |-- _default-date.scss --> _default.scss, free/_forms.scss
| |
| |-- sections/
| | |-- _templates.scss --> _sidenav.scss
| | |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
| | |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
| | |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
| | |-- _magazine.scss --> _badges.scss
| | |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
| | |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
| |
| |-- _variables.scss
| |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
| |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
| |-- _tabs.scss --> _cards.scss
| |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
| |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
| |-- _navbars.scss --> free/_navbars.scss (PRO: )
| |-- _scrollspy.scss --> none
| |-- _lightbox.scss --> none
| |-- _chips.scss --> none
| |-- _msc.scss --> none
| |-- _forms.scss --> none
| |-- _radio.scss --> none
| |-- _checkbox.scss --> none
| |-- _material-select.scss --> none
| |-- _switch.scss --> none
| |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
| |-- _range.scss --> none
| |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
| |-- _autocomplete.scss --> free/_forms.scss
| |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
| |-- _parallax.scss --> none
| |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
| |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
| |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss
| |-- _steppers.scss --> free/_buttons.scss
| |-- _blog.scss --> none
| |-- _toasts.scss --> free/_buttons.scss
| |-- _animations.scss --> none
| |-- _charts.scss --> none
| |-- _progress.scss --> none
| |-- _scrollbar.scss --> none
| |-- _skins.scss --> none
| |-- _depreciated.scss
|
`-- _custom-skin.scss
`-- _custom-styles.scss
`-- _custom-variables.scss
`-- mdb.scss
Map of dependencies of JavaScript modules in MDBootstrap:
Legend:
'-->' means 'required'
All files require jQuery and bootstrap.js
js/
├── dist/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
├── _intro-mdb-pro.js
├── modules.js
├── src/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
└── vendor/
├── addons/
│ ├── datatables.js
│ └── datatables.min.js
├── chart.js
├── enhanced-modals.js
├── hammer.js
├── jarallax.js
├── jarallax-video.js --> vendor/jarallax.js
├── jquery.easing.js
├── jquery.easypiechart.js
├── jquery.hammer.js --> vendor/hammer.js
├── jquery.sticky.js
├── lightbox.js
├── picker-date.js --> vendor/picker.js
├── picker.js
├── picker-time.js --> vendor/picker.js
├── scrollbar.js
├── scrolling-navbar.js
├── toastr.js
├── velocity.js
├── waves.js
└── wow.js
Compilation & Customization tutorial
If you need additional help to compile your custom package, use our Compilation & Customization tutorial
Compilation & Customization tutorialIntegrations with Angular, React or Vue
Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.
About MDB Angular About MDB React About MDB Vue