Angular Bootstrap Forms
Angular Forms - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
Angular Bootstrap forms are input-based components that are designed to collect user data. Used as login, subscribe or contact forms, all can be easily customized.
Angular Bootstrap forms in Material Design are simple and pleasant to the eye. 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.
Such constructions like predefined Form logins, Form registers, Form subscriptions or Form contacts and other layout forms vary in their design and are all at your disposal. Each of them offers a different type of functionality.
You can use the default bootstrap style or the material design version.
In case you want to create your custom form, have a look at the specific pages of our documentation from the list below:
Login / 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 -->
<mdb-checkbox [default]="true">Remember me</mdb-checkbox>
</div>
<div>
<!-- Forgot password -->
<a href="">Forgot password?</a>
</div>
</div>
<!-- Sign in button -->
<button mdbBtn color="info" block="true" class="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">
<mdb-icon fab icon="facebook"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<mdb-icon fab icon="linkedin"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<mdb-icon fab icon="github"></mdb-icon>
</a>
</form>
<!-- Default form login -->
Material form login MDB Pro component
Sign in
<!-- Material form login -->
<mdb-card>
<mdb-card-header class="info-color white-text text-center py-4">
<h5>
<strong>Sign in</strong>
</h5>
</mdb-card-header>
<!--Card content-->
<mdb-card-body class="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" mdbInput>
<label for="materialLoginFormEmail">E-mail</label>
</div>
<!-- Password -->
<div class="md-form">
<input type="password" id="materialLoginFormPassword" class="form-control" mdbInput>
<label for="materialLoginFormPassword">Password</label>
</div>
<div class="d-flex justify-content-around">
<div>
<!-- Remember me -->
<mdb-checkbox>Remember me</mdb-checkbox>
</div>
<div>
<!-- Forgot password -->
<a href="">Forgot password?</a>
</div>
</div>
<!-- Sign in button -->
<button mdbBtn color="info" outline="true" rounded="true" block="true"
class="my-4 waves-effect z-depth-0" mdbWavesEffect 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" mdbBtn floating="true" color="fb" size="sm">
<mdb-icon fab icon="facebook"></mdb-icon>
</a>
<a type="button" mdbBtn floating="true" color="tw" size="sm">
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<a type="button" mdbBtn floating="true" color="li" size="sm">
<mdb-icon fab icon="linkedin"></mdb-icon>
</a>
<a type="button" mdbBtn floating="true" color="git" size="sm">
<mdb-icon fab icon="github"></mdb-icon>
</a>
</form>
<!-- Form -->
</mdb-card-body>
</mdb-card>
<!-- 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="row">
<div class="col-md-6 mx-auto d-flex justify-content-center">
<mdb-checkbox [default]="true">Subscribe to our newsletter</mdb-checkbox>
</div>
</div>
<!-- Sign up button -->
<button mdbBtn color="info" block="true" class="my-4" type="submit">Sign in</button>
<!-- Social register -->
<p>or sign up with:</p>
<a type="button" class="light-blue-text mx-2">
<mdb-icon fab icon="facebook"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<mdb-icon fab icon="linkedin"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<mdb-icon fab icon="github"></mdb-icon>
</a>
<hr>
<!-- Terms of service -->
<p>By clicking
<em>Sign up</em> you agree to our
<a href="" target="_blank">terms of service</a>
</p>
</form>
<!-- Default form register -->
Material form register MDB Pro component
Sign up
<!-- Material form register -->
<mdb-card>
<mdb-card-header class="info-color white-text text-center py-4">
<h5>
<strong>Sign up</strong>
</h5>
</mdb-card-header>
<!--Card content-->
<mdb-card-body class="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" mdbInput>
<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" mdbInput>
<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" mdbInput>
<label for="materialRegisterFormEmail">E-mail</label>
</div>
<!-- Password -->
<div class="md-form">
<input type="password" id="materialRegisterFormPassword" class="form-control"
aria-describedby="materialRegisterFormPasswordHelpBlock" mdbInput>
<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="text" id="materialRegisterFormPhone" class="form-control"
aria-describedby="materialRegisterFormPhoneHelpBlock" mdbInput>
<label for="materialRegisterFormPhone">Phone number</label>
<small id="materialRegisterFormPhoneHelpBlock" class="form-text text-muted mb-4">
Optional - for two-step authentication
</small>
</div>
<!-- Newsletter -->
<mdb-checkbox>Subscribe to our newsletter</mdb-checkbox>
<!-- Sign up button -->
<button mdbBtn color="info" outline="true" rounded="true" block="true"
class="my-4 waves-effect z-depth-0" mdbWavesEffect type="submit">Sign in</button>
<!-- Social register -->
<p>or sign up with:</p>
<a type="button" class="light-blue-text mx-2">
<mdb-icon fab icon="facebook"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<mdb-icon fab icon="linkedin"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<mdb-icon fab icon="heart"></mdb-icon>
</a>
<hr>
<!-- Terms of service -->
<p>By clicking
<em>Sign up</em> you agree to our
<a href="" target="_blank">terms of service</a>.
</p>
</form>
<!-- Form -->
</mdb-card-body>
</mdb-card>
<!-- 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 with 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 mdbBtn color="info" block="true" type="submit">Sign in</button>
</form>
<!-- Default form subscription -->
Material form subscription MDB Pro component
Subscribe
<!-- Material form subscription -->
<mdb-card>
<mdb-card-header class="info-color white-text text-center py-4">
<h5>
<strong>Subscribe</strong>
</h5>
</mdb-card-header>
<!--Card content-->
<mdb-card-body class="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" mdbInput>
<label for="materialSubscriptionFormPasswords">Name</label>
</div>
<!-- E-mai -->
<div class="md-form">
<input type="email" id="materialSubscriptionFormEmail" class="form-control" mdbInput>
<label for="materialSubscriptionFormEmail">E-mail</label>
</div>
<!-- Sign in button -->
<button mdbBtn color="info" outline="true" rounded="true" block="true"
class="z-depth-0 my-4 waves-effect" mdbWavesEffect type="submit">Sign in</button>
</form>
<!-- Form -->
</mdb-card-body>
</mdb-card>
<!-- 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="row">
<div class="col-md-6 mx-auto d-flex justify-content-center">
<mdb-checkbox [default]="true" class="mb-4">Send me a copy of this message</mdb-checkbox>
</div>
</div>
<!-- Send button -->
<button mdbBtn color="info" block="true" type="submit">Send</button>
</form>
<!-- Default form contact -->
Material form contact MDB Pro component
Contact us
<!-- Material form contact -->
<mdb-card>
<mdb-card-header class="info-color white-text text-center py-4">
<h5>
<strong>Contact us</strong>
</h5>
</mdb-card-header>
<!--Card content-->
<mdb-card-body class="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" mdbInput>
<label for="materialContactFormName">Name</label>
</div>
<!-- E-mail -->
<div class="md-form">
<input type="email" id="materialContactFormEmail" class="form-control" mdbInput>
<label for="materialContactFormEmail">E-mail</label>
</div>
<!-- Subject -->
<span>Subject</span>
<div class="row">
<div class="col-md-12 mx-auto">
<mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
</div>
</div>
<!--Message-->
<div class="md-form">
<textarea type="text" id="materialContactFormMessage" class="form-control md-textarea"
mdbInput></textarea>
<label for="materialContactFormMessage">Message</label>
</div>
<!-- Copy -->
<div class="row">
<div class="col-md-6 mx-auto d-flex justify-content-center">
<mdb-checkbox>Send me a copy of this message</mdb-checkbox>
</div>
</div>
<!-- Send button -->
<button mdbBtn color="info" outline="true" rounded="true" block="true"
class="z-depth-0 my-4 waves-effect" mdbWavesEffect type="submit">Send</button>
</form>
<!-- Form -->
</mdb-card-body>
</mdb-card>
<!-- Material form contact -->
import { Component } from '@angular/core';
@Component({
selector: 'contact-form',
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-form.component.scss'],
})
export class ContactFormComponent {
optionsSelect: [
{ value: 'Feedback', label: 'Feedback' },
{ value: 'Report a bug', label: 'Report a bug' },
{ value: 'Feature request', label: 'Feature request' },
{ value: 'Other stuff', label: 'Other stuff' },
];
}
Angular Forms - API
In this section you will find informations about required modules and available inputs, outputs, methods and events of forms component.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
import { CheckboxModule, WavesModule, ButtonsModule, InputsModule, IconsModule, CardsModule, SelectModule } from 'ng-uikit-pro-standard';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CheckboxModule, WavesModule, ButtonsModule, InputsModule, IconsModule, CardsModule } from 'angular-bootstrap-md';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
Angular Forms - examples & customization
Form within a card
Form in a card component is a elegant way to create forms in Angular application.
<mdb-card>
<mdb-card-body>
<!-- Material form register -->
<form [formGroup]="cardForm">
<p class="h4 text-center py-4">Sign up</p>
<!-- Material input text -->
<div class="md-form">
<mdb-icon fas icon="user" class="prefix grey-text"></mdb-icon>
<input
type="text"
id="materialFormCardNameEx"
formControlName="materialFormCardNameEx"
class="form-control"
mdbInput
/>
<label for="materialFormCardNameEx" class="font-weight-light">Your name</label>
</div>
<!-- Material input email -->
<div class="md-form">
<mdb-icon fas icon="envelope" class="prefix grey-text"></mdb-icon>
<input
type="email"
id="materialFormCardEmailEx"
formControlName="materialFormCardEmailEx"
class="form-control"
mdbInput
/>
<label for="materialFormCardEmailEx" class="font-weight-light">Your email</label>
</div>
<!-- Material input email -->
<div class="md-form">
<mdb-icon fas icon="exclamation-triangle" class="prefix grey-text"></mdb-icon>
<input
type="email"
id="materialFormCardConfirmEx"
formControlName="materialFormCardConfirmEx"
class="form-control"
mdbInput
/>
<label for="materialFormCardConfirmEx" class="font-weight-light">Confirm your email</label>
</div>
<!-- Material input password -->
<div class="md-form">
<mdb-icon icon="lock" class="prefix grey-text"></mdb-icon>
<input
type="password"
id="materialFormCardPasswordEx"
formControlName="materialFormCardPasswordEx"
class="form-control"
mdbInput
/>
<label for="materialFormCardPasswordEx" class="font-weight-light">Your password</label>
</div>
<div class="text-center py-4 mt-3">
<button mdbBtn color="cyan" class="waves-light" type="submit" mdbWavesEffect>
Register
</button>
</div>
</form>
<!-- Material form register -->
</mdb-card-body>
</mdb-card>
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'card-form',
templateUrl: './card-form.component.html',
styleUrls: ['./card-form.component.scss']
})
export class CardFormComponent {
cardForm: FormGroup;
constructor(private fb: FormBuilder) {
this.cardForm = fb.group({
materialFormCardNameEx: ['', Validators.required],
materialFormCardEmailEx: ['', [Validators.email, Validators.required]],
materialFormCardConfirmEx: ['', Validators.required],
materialFormCardPasswordEx: ['', Validators.required]
});
}
}
Form within a modal
Form in a modal component allows you to show user some data dynamically.
<button
type="button"
mdbBtn
color="primary"
class="waves-light"
(click)="form.show()"
mdbWavesEffect
>
Contact form
</button>
<!--Modal: Contact form-->
<div
mdbModal
#form="mdb-modal"
class="modal fade"
id="modalContactForm"
tabindex="-1"
role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true"
>
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header light-blue darken-3 white-text">
<h4 class="title">
<mdb-icon fas icon="pencil-alt" class="prefix"></mdb-icon>
<button
type="button"
class="close waves-effect waves-light"
data-dismiss="modal"
aria-label="Close"
(click)="form.hide()"
>
<span aria-hidden="true">×</span>
</button>
</h4>
</div>
<!--Body-->
<div class="modal-body mb-0">
<form [formGroup]="modalForm">
<div class="md-form form-sm">
<mdb-icon fas icon="envelope" class="prefix"></mdb-icon>
<input
mdbInput
type="text"
id="modalFormNameEx"
formControlName="modalFormNameEx"
class="form-control"
/>
<label for="modalFormNameEx">Your name</label>
</div>
<div class="md-form form-sm">
<mdb-icon icon="lock" class="prefix"></mdb-icon>
<input
mdbInput
type="email"
id="modalFormEmailEx"
formControlName="modalFormEmailEx"
class="form-control"
/>
<label for="modalFormEmailEx">Your email</label>
</div>
<div class="md-form form-sm">
<mdb-icon icon="tag" class="prefix"></mdb-icon>
<input
mdbInput
type="text"
id="modalFormSubjectEx"
formControlName="modalFormSubjectEx"
class="form-control"
/>
<label for="modalFormSubjectEx">Subject</label>
</div>
<div class="md-form form-sm">
<mdb-icon fas icon="pencil-alt" class="prefix"></mdb-icon>
<textarea
mdbInput
type="text"
id="modalFormTextEx"
formControlName="modalFormTextEx"
class="md-textarea mb-0"
></textarea>
<label for="modalFormTextEx">Your message</label>
</div>
<div class="text-center mt-1-half">
<button mdbBtn color="info" class="mb-2 waves-light" mdbWavesEffect>
Send
<mdb-icon fas icon="paper-plane" class="prefix ml-1"></mdb-icon>
</button>
</div>
</form>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: Contact form-->
import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'modal-form',
templateUrl: './modal-form.component.html',
styleUrls: ['./modal-form.component.scss'],
})
export class ModalFormComponent {
modalForm: FormGroup;
constructor(public fb: FormBuilder) {
this.modalForm = fb.group({
modalFormNameEx: ['', Validators.required],
modalFormEmailEx: ['', [Validators.email, Validators.required]],
modalFormSubjectEx: ['', Validators.required],
modalFormTextEx: ['', Validators.required]
});
}
}
Elegant Form
Elegant form with gradient block-button and social media icons in elegant buttons.
<div class="row">
<div class="col-md-6 mx-auto my-5">
<section class="form-elegant">
<mdb-card>
<mdb-card-body class="mx-4">
<!--Header-->
<div class="text-center">
<h3 class="dark-grey-text mb-5">
<strong>Sign in</strong>
</h3>
</div>
<form [formGroup]="elegantForm">
<div class="md-form">
<input
type="text"
id="elegantFormEmailEx"
class="form-control"
formControlName="elegantFormEmailEx"
mdbInput
/>
<label for="elegantFormEmailEx">Your email</label>
</div>
<div class="md-form pb-3">
<input
type="password"
id="elegantFormPasswordEx"
formControlName="elegantFormPasswordEx"
class="form-control"
mdbInput
/>
<label for="elegantFormPasswordEx">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>
</form>
<!--Body-->
<div class="text-center mb-3">
<button
type="button"
mdbBtn
gradient="blue"
block="true"
rounded="true"
class="z-depth-1a waves-light"
mdbWavesEffect
>
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"
mdbBtn
color="white"
rounded="true"
class="mr-md-3 z-depth-1a waves-light"
mdbWavesEffect
>
<mdb-icon fab icon="facebook" class="blue-text text-center"></mdb-icon>
</button>
<!--Twitter-->
<button
type="button"
mdbBtn
color="white"
rounded="true"
class="mr-md-3 z-depth-1a waves-light"
mdbWavesEffect
>
<mdb-icon fab icon="twitter" class="blue-text"></mdb-icon>
</button>
<!--Google +-->
<button
type="button"
mdbBtn
color="white"
rounded="true"
class="z-depth-1a waves-light"
mdbWavesEffect
>
<mdb-icon fab fab icon="google-plus" class="blue-text"></mdb-icon>
</button>
</div>
</mdb-card-body>
<!--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>
</mdb-card>
</section>
</div>
</div>
import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'elegant-form',
templateUrl: './elegant-form.component.html',
styleUrls: ['./elegant-form.component.scss'],
})
export class ElegantFormComponent {
elegantForm: FormGroup;
constructor(public fb: FormBuilder) {
this.elegantForm = fb.group({
elegantFormEmailEx: ['', [Validators.required, Validators.email]],
elegantFormPasswordEx: ['', Validators.required],
});
}
}
.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);
}
Gradient Form
Gradient form with big social icons and rounded button.
<section class="form-gradient">
<!--Form with header-->
<mdb-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">
<mdb-icon fab icon="facebook" class="white-text" size="lg"></mdb-icon>
</a>
<!--Twitter-->
<a class="fa-lg p-2 m-2 tw-ic">
<mdb-icon fab icon="twitter" class="white-text" size="lg"></mdb-icon>
</a>
<!--Google +-->
<a class="fa-lg p-2 m-2 gplus-ic">
<mdb-icon fab fab icon="google-plus" class="white-text" size="lg"></mdb-icon>
</a>
</div>
</div>
<!--Header-->
<mdb-card-body class="mx-4 mt-4">
<!--Body-->
<form [formGroup]="gradientForm">
<div class="md-form">
<input
type="text"
id="gradientFormEmailEx"
formControlName="gradientFormEmailEx"
class="form-control"
mdbInput
/>
<label for="gradientFormEmailEx">Your email</label>
</div>
<div class="md-form pb-1 pb-md-3">
<input
type="password"
id="gradientFormPasswordEx"
formControlName="gradientFormPasswordEx"
class="form-control"
mdbInput
/>
<label for="gradientFormPasswordEx">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>
</form>
<!--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"
mdbBtn
color="grey"
rounded="true"
class="z-depth-1a waves-light"
mdbWavesEffect
>
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-->
</mdb-card-body>
</mdb-card>
<!--/Form with header-->
</section>
import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'gradient-form',
templateUrl: './gradient-form.component.html',
styleUrls: ['./gradient-form.component.scss'],
})
export class GradientFormComponent {
gradientForm: FormGroup;
constructor(public fb: FormBuilder) {
this.gradientForm = fb.group({
gradientFormEmailEx: ['', [Validators.required, Validators.email]],
gradientFormPasswordEx: ['', Validators.required],
});
}
}
.form-gradient .font-small {
font-size: 0.8rem;
}
.form-gradient .header {
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.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;
}
Light Form
Light form with big social icons in footer, checkbox and rounded button.
<section class="form-light">
<!--Form without header-->
<mdb-card>
<mdb-card-body class="mx-4">
<!--Header-->
<div class="text-center">
<h3 class="pink-text mb-5">
<strong>Sign up</strong>
</h3>
</div>
<!--Body-->
<form [formGroup]="lightForm">
<div class="md-form">
<input
type="text"
id="lightFormEmailEx"
class="form-control"
formControlName="lightFormEmailEx"
mdbInput
/>
<label for="lightFormEmailEx">Your email</label>
</div>
<div class="md-form pb-3">
<input
type="password"
id="lightFormPasswordEx"
class="form-control"
formControlName="lightFormPasswordEx"
mdbInput
/>
<label for="lightFormPasswordEx">Your password</label>
<mdb-checkbox mdbInput class="my-4"
>Accept the <a href="#" class="blue-text"> Terms and Conditions</a></mdb-checkbox
>
</div>
</form>
<!--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"
mdbBtn
color="pink"
block="true"
rounded="true"
class="z-depth-1 waves-light"
mdbWavesEffect
>
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-->
</mdb-card-body>
<!--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">
<mdb-icon fab icon="facebook" size="lg" class="white-text"></mdb-icon>
</a>
<!--Twitter-->
<a class="fa-lg p-2 m-2 tw-ic">
<mdb-icon fab icon="twitter" size="lg" class="white-text"></mdb-icon>
</a>
<!--Google +-->
<a class="fa-lg p-2 m-2 gplus-ic">
<mdb-icon fab fab icon="google-plus" size="lg" class="white-text"></mdb-icon>
</a>
</div>
</div>
</mdb-card>
<!--/Form without header-->
</section>
import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'light-form',
templateUrl: './light-form.component.html',
styleUrls: ['./light-form.component.scss'],
})
export class LightFormComponent {
lightForm: FormGroup;
constructor(public fb: FormBuilder) {
this.lightForm = fb.group({
lightFormEmailEx: ['', [Validators.required, Validators.email]],
lightFormPasswordEx: ['', Validators.required],
});
}
}
.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: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
Dark Form
Dark form with big rounded block-button and checkbox.
<section class="form-dark">
<!--Form without header-->
<mdb-card
style="background-image: url('https://mdbootstrap.com/img/Photos/Others/pricing-table7.webp')"
style="width: 28rem; background-size: cover"
>
<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-->
<form [formGroup]="darkForm">
<div class="md-form">
<input
type="text"
id="darkFormEmailEx"
class="form-control white-text"
formControlName="darkFormEmailEx"
mdbInput
/>
<label for="darkFormEmailEx">Your email</label>
</div>
<div class="md-form pb-3">
<input
type="password"
id="darkFormPasswordEx"
class="form-control white-text"
formControlName="darkFormPasswordEx"
mdbInput
/>
<label for="darkFormPasswordEx">Your password</label>
<mdb-checkbox mdbInput class="my-4"
>Accept the
<a href="#" class="green-text font-weight-bold"> Terms and Conditions</a></mdb-checkbox
>
</div>
</form>
<!--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"
mdbBtn
color="success"
block="true"
rounded="true"
class="z-depth-1 waves-light"
mdbWavesEffect
>
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>
</mdb-card>
</section>
import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'dark-form',
templateUrl: './dark-form.component.html',
styleUrls: ['./dark-form.component.scss'],
})
export class DarkFormComponent {
darkForm: FormGroup;
constructor(public fb: FormBuilder) {
this.darkForm = fb.group({
darkFormEmailEx: ['', [Validators.required, Validators.email]],
darkFormPasswordEx: ['', Validators.required],
});
}
}
.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%;
}
Simple Form
Simple elegant form without unnecessary elements
<section class="form-simple">
<!--Form with header-->
<mdb-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-->
<mdb-card-body class="mx-4 mt-4">
<!--Body-->
<form [formGroup]="simpleForm">
<div class="md-form">
<input
type="text"
id="simpleFormEmailEx"
class="form-control"
formControlName="simpleFormEmailEx"
mdbInput
/>
<label for="simpleFormEmailEx">Your email</label>
</div>
<div class="md-form pb-3">
<input
type="password"
id="simpleFormPasswordEx"
class="form-control"
formControlName="simpleFormPasswordEx"
mdbInput
/>
<label for="simpleFormPasswordEx">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>
</form>
<div class="text-center mb-4">
<button type="button" mdbBtn color="danger" block="true" class="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>
</mdb-card-body>
</mdb-card>
<!--/Form with header-->
</section>
import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'simple-form',
templateUrl: './simple-form.component.html',
styleUrls: ['./simple-form.component.scss'],
})
export class SimpleFormComponent {
simpleForm: FormGroup;
constructor(public fb: FormBuilder) {
this.simpleForm = fb.group({
simpleFormEmailEx: ['', [Validators.required, Validators.email]],
simpleFormPasswordEx: ['', Validators.required],
});
}
}
.form-simple .font-small {
font-size: 0.8rem;
}
.form-simple .header {
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.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;
}