Angular Bootstrap forms
Angular Forms - Bootstrap 4 & Material Design
Angular 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.
Angular 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 default bootstrap style or material design version.
In case you want to create your custom form, have a look at 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">
<!-- <i class="fab fa-facebook-f"></i> -->
<mdb-icon fab icon="facebook"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<!-- <i class="fab fa-twitter"></i> -->
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<!-- <i class="fab fa-linkedin-in"></i> -->
<mdb-icon fab icon="linkedin"></mdb-icon>
</a>
<a type="button" class="light-blue-text mx-2">
<!-- <i class="fab fa-github"></i> -->
<mdb-icon fab icon="heart"></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" class="btn-floating btn-fb btn-sm">
<mdb-icon fab icon="facebook"></mdb-icon>
</a>
<a type="button" class="btn-floating btn-tw btn-sm">
<mdb-icon fab icon="twitter"></mdb-icon>
</a>
<a type="button" class="btn-floating btn-li btn-sm">
<mdb-icon fab icon="linkedin"></mdb-icon>
</a>
<a type="button" class="btn-floating btn-git btn-sm">
<mdb-icon fab icon="heart"></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="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> and
<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> and
<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 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">
<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>
</div>
</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 -->
<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, OnInit } from '@angular/core';
@Component({
selector: 'contact-form',
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-form.component.scss'],
})
export class ContactFormComponent implements OnInit {
optionsSelect: Array<any>;
ngOnInit() {
this.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.
// MDB Angular Pro
import { CheckboxModule, WavesModule, ButtonsModule, InputsModule, IconsModule, CardsModule, SelectModule } from 'ng-uikit-pro-standard'// MDB Angular Free
import { CheckboxModule, WavesModule, ButtonsModule, InputsModule, IconsModule, CardsModule } from 'angular-bootstrap-md'// Angular Forms Modules
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>
</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: .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;
}
Light Form
Light form with big social icons in footer, checkbox and rounded button.
<!--Section: Live preview-->
<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>
<div class="form-check my-4">
<input class="form-check-input" type="checkbox" id="defaultCheck12">
<label for="defaultCheck12" class="grey-text">Accept the
<a href="#" class="blue-text"> Terms and Conditions</a>
</label>
</div>
</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>
<!--Section: Live preview-->
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: .3rem;
border-bottom-right-radius: .3rem;
}
Dark Form
Dark form with big rounded block-button and checkbox.
<!--Section: Live preview-->
<section class="form-dark">
<!--Form without header-->
<div class="card card-image" style="background-image: 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">
<!--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>
<div class="form-check my-4">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck17">
<label class="form-check-label white-text" for="defaultCheck17">Accept the
<a href="#" class="green-text font-weight-bold"> Terms and Conditions</a>
</label>
</div>
</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>
</div>
<!--/Form without header-->
</section>
<!--Section: Live preview-->
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: .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; }