Angular Bootstrap forms
Save your time with our predefined forms. Register, login, subscribe or contact form - choose whichever you need and simply paste it into your project.
Bootstrap forms in Material Design are simple and eye-pleasant. While creating MDB, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.
Such constructions like predefined Login Forms, Register Forms, Subscription Forms or Contact Forms and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.
In case you want to create your custom Form have a look at Inputs documentation where you can find plenty of elements typical for forms.
Login:
Login form
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.scss']
})
export class LoginFormComponent {
loginForm: FormGroup; constructor(private fb: FormBuilder) {
this.loginForm = fb.group({
defaultFormEmail: ['', Validators.required],
defaultFormPass: ['', [Validators.required, Validators.minLength(8)]]
});
}
}
Register form
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'register-form',
templateUrl: './register-form.component.html',
styleUrls: ['./register-form.component.scss']
})
export class RegisterFormComponent {
registerForm: FormGroup;
constructor(private fb: FormBuilder) {
this.registerForm = fb.group({
orangeFormName: ['', Validators.required],
orangeFormEmail: ['', [Validators.required, Validators.email]],
orangeFormPass: ['', [Validators.required, Validators.minLength(8)]]
});
}
}
Subscription form
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'subscription-form',
templateUrl: './subscription-form.component.html',
styleUrls: ['./subscription-form.component.scss']
})
export class SubscriptionFormComponent {
subscriptionForm: FormGroup;
constructor(private fb: FormBuilder) {
this.subscriptionForm = fb.group({
subscriptionFormName: ['', Validators.required],
subscriptionFormEmail: ['', [Validators.required, Validators.email]]
});
}
}
Contact form
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'contact-form',
templateUrl: './contact-form.component.html',
styleUrls: ['./contact-form.component.scss']
})
export class ContactFormComponent {
contactForm: FormGroup;
constructor(private fb: FormBuilder) {
this.contactForm = fb.group({
contactFormName: ['', Validators.required],
contactFormEmail: ['', [Validators.required, Validators.email]],
contactFormSubject: ['', Validators.required],
contactFormMessage: ['', Validators.required]
});
}
}
Form within a 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
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 MDB Pro component
Sign in
or Sign in with:
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 MDB Pro component
Don't have an account?
Sign up
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 MDB Pro component
Sign up
Have an account?
Log in
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 MDB Pro component
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 MDB Pro component
Log in
Don't have an account?
Sign up
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; }
API Reference:
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.
API Reference for MDB Angular Forms:
// MDB Angular Pro
import { InputsModule, WavesModule, ButtonsModule, CardsFreeModule } from 'ng-uikit-pro-standard'// MDB Angular Free
import { InputsModule, WavesModule, ButtonsModule, CardsFreeModule } from 'angular-bootstrap-md'// Angular Forms Modules
import { FormsModule, ReactiveFormsModule } from '@angular/forms'