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

Sign in


          <!-- Login form -->
          <form [formGroup]="loginForm">
            <p class="h5 text-center mb-4">Sign in</p>

            <div class="md-form">
              <i class="fa fa-envelope prefix grey-text"></i>
              <input type="text" formControlName="defaultFormEmail" id="defaultForm-email" class="form-control" mdbInputDirective>
              <label for="defaultForm-email">Your email</label>
            </div>

            <div class="md-form">
              <i class="fa fa-lock prefix grey-text"></i>
              <input type="password" formControlName="defaultFormPass" id="defaultForm-pass" class="form-control" mdbInputDirective>
              <label for="defaultForm-pass">Your password</label>
            </div>

            <div class="text-center">
              <input type="submit" mdbBtn color="default" sclass="waves-light" mdbWavesEffect value="Login">
            </div>
          </form>
          <!-- 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

Sign up


<!-- Register form -->
<form [formGroup]="registerForm">
  <p class="h5 text-center mb-4">Sign up</p>

  <div class="md-form">
    <i class="fa fa-user prefix grey-text"></i>
    <input type="text" formControlName="orangeFormName" id="orangeForm-name" class="form-control" mdbInputDirective>
    <label for="orangeForm-name">Your name</label>
  </div>
  <div class="md-form">
    <i class="fa fa-envelope prefix grey-text"></i>
    <input type="text" formControlName="orangeFormEmail" id="orangeForm-email" class="form-control" mdbInputDirective>
    <label for="orangeForm-email">Your email</label>
  </div>

  <div class="md-form">
    <i class="fa fa-lock prefix grey-text"></i>
    <input type="password" formControlName="orangeFormPass" id="orangeForm-pass" class="form-control" mdbInputDirective>
    <label for="orangeForm-pass">Your password</label>
  </div>

  <div class="text-center">
    <input mdbBtn color="deep-orange" class="waves-light" value="Sign up" mdbWavesEffect>
  </div>
</form>
<!-- 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

Subscribe


<!-- Subscription form -->
<form [formGroup]="subscriptionForm">
  <p class="h5 text-center mb-4">Sign up</p>

  <div class="md-form">
    <i class="fa fa-user prefix grey-text"></i>
    <input type="text" formControlName="subscriptionFormName" id="subscriptionFormName" class="form-control" mdbInputDirective>
    <label for="subscriptionFormName">Your name</label>
  </div>

  <div class="md-form">
    <i class="fa fa-envelope prefix grey-text"></i>
    <input type="email" id="subscriptionFormEmail" formControlName="subscriptionFormEmail" class="form-control" mdbInputDirective>
    <label for="subscriptionFormEmail">Your email</label>
  </div>

  <div class="text-center">
    <button mdbBtn color="indigo" class="waves-light" mdbWavesEffect>Send
      <i class="fa fa-paper-plane-o ml-1"></i>
    </button>
  </div>
</form>
<!-- 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

Write to us


<!-- contact form -->
<form [formGroup]="contactForm">
  <p class="h5 text-center mb-4">Write to us</p>

  <div class="md-form">
    <i class="fa fa-user prefix grey-text"></i>
    <input type="text" id="contactFormName" formControlName="contactFormName" class="form-control" mdbInputDirective>
    <label for="contactFormName">Your name</label>
  </div>

  <div class="md-form">
    <i class="fa fa-envelope prefix grey-text"></i>
    <input type="email" id="contactFormEmail" formControlName="contactFormEmail" class="form-control" mdbInputDirective>
    <label for="contactFormEmail">Your email</label>
  </div>

  <div class="md-form">
    <i class="fa fa-tag prefix grey-text"></i>
    <input type="text" id="contactFormSubject" formControlName="contactFormSubject" class="form-control" mdbInputDirective>
    <label for="contactFormSubject">Subject</label>
  </div>

  <div class="md-form">
    <i class="fa fa-pencil prefix grey-text"></i>
    <textarea type="text" id="contactFormMessage" formControlName="contactFormMessage" class="md-textarea" style="height: 100px"
    mdbInputDirective></textarea>
    <label for="contactFormMessage">Your message</label>
  </div>

  <div class="text-center">
    <button mdbBtn color="unique" class="waves-light" mdbWavesEffect>Send
      <i class="fa fa-paper-plane-o ml-1"></i>
    </button>
  </div>
</form>
<!-- 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

Sign up


<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">
        <i class="fa fa-user prefix grey-text"></i>
        <input type="text" id="materialFormCardNameEx" formControlName="materialFormCardNameEx" class="form-control" mdbInputDirective>
        <label for="materialFormCardNameEx" class="font-weight-light">Your name</label>
      </div>

      <!-- Material input email -->
      <div class="md-form">
        <i class="fa fa-envelope prefix grey-text"></i>
        <input type="email" id="materialFormCardEmailEx" formControlName="materialFormCardEmailEx" class="form-control" mdbInputDirective>
        <label for="materialFormCardEmailEx" class="font-weight-light">Your email</label>
      </div>

      <!-- Material input email -->
      <div class="md-form">
        <i class="fa fa-exclamation-triangle prefix grey-text"></i>
        <input type="email" id="materialFormCardConfirmEx" formControlName="materialFormCardConfirmEx" class="form-control" mdbInputDirective>
        <label for="materialFormCardConfirmEx" class="font-weight-light">Confirm your email</label>
      </div>

      <!-- Material input password -->
      <div class="md-form">
        <i class="fa fa-lock prefix grey-text"></i>
        <input type="password" id="materialFormCardPasswordEx" formControlName="materialFormCardPasswordEx" class="form-control"
          mdbInputDirective>
        <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]
    });

  }
}
            


Elegant form MDB Pro component

Sign in

Forgot Password?

or Sign in with:


<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" mdbInputDirective>
              <label for="elegantFormEmailEx">Your email</label>
            </div>

            <div class="md-form pb-3">
              <input type="password" id="elegantFormPasswordEx" formControlName="elegantFormPasswordEx" class="form-control" mdbInputDirective>
              <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>
              <i class="fa fa-facebook blue-text text-center"></i>
            </button>
            <!--Twitter-->
            <button type="button" mdbBtn color="white" rounded="true" class="mr-md-3 z-depth-1a waves-light" mdbWavesEffect>
              <i class="fa fa-twitter blue-text"></i>
            </button>
            <!--Google +-->
            <button type="button" mdbBtn color="white" rounded="true" class="z-depth-1a waves-light" mdbWavesEffect>
              <i class="fa fa-google-plus blue-text"></i>
            </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 MDB Pro component

Log in

Forgot Password?

Don't have an account? Sign up


<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">
          <i class="fa fa-facebook white-text fa-lg"> </i>
        </a>
        <!--Twitter-->
        <a class="fa-lg p-2 m-2 tw-ic">
          <i class="fa fa-twitter white-text fa-lg"> </i>
        </a>
        <!--Google +-->
        <a class="fa-lg p-2 m-2 gplus-ic">
          <i class="fa fa-google-plus white-text fa-lg"> </i>
        </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" mdbInputDirective>
          <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" mdbInputDirective>
          <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 MDB Pro component

Sign up

Have an account? Log in


<!--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" mdbInputDirective>
          <label for="lightFormEmailEx">Your email</label>
        </div>

        <div class="md-form pb-3">
          <input type="password" id="lightFormPasswordEx" class="form-control" formControlName="lightFormPasswordEx" mdbInputDirective>
          <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">
          <i class="fa fa-facebook white-text fa-lg"> </i>
        </a>
        <!--Twitter-->
        <a class="fa-lg p-2 m-2 tw-ic">
          <i class="fa fa-twitter white-text fa-lg"> </i>
        </a>
        <!--Google +-->
        <a class="fa-lg p-2 m-2 gplus-ic">
          <i class="fa fa-google-plus white-text fa-lg"> </i>
        </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 MDB Pro component

SIGN UP

Have an account? Log in


<!--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" mdbInputDirective>
          <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" mdbInputDirective>
          <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 MDB Pro component

Log in

Forgot Password?

Don't have an account? Sign up


<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" mdbInputDirective>
          <label for="simpleFormEmailEx">Your email</label>
        </div>

        <div class="md-form pb-3">
          <input type="password" id="simpleFormPasswordEx" class="form-control" formControlName="simpleFormPasswordEx" mdbInputDirective>
          <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; }
            

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'