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

HTML

<!-- 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

E-mail

Password

Remember me

Forgot password?

Not a member? Register

or sign in with:

HTML

<!-- 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

HTML

<!-- 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

First name

Last name

E-mail

Password At least 8 characters and 1 digit

Phone number Optional - for two-step authentication

Subscribe to our newsletter

or sign up with:

By clicking Sign up you agree to our terms of service.

HTML

<!-- 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

HTML

<!-- 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

HTML

<!-- 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

2. Contact Sections

Default form contact

HTML

<!-- 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

HTML
Typescript

<!-- 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.

Pro
Free

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';

Import example Modules list

Introduction
Modules used

Angular Forms - examples & customization

Form within a card

Form in a card component is a elegant way to create forms in Angular application.

HTML
Typescript

<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.

Launch Modal Contact Form

HTML
Typescript

<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.

Sign in

Your email

Your password

Forgot Password?

or Sign in with:

HTML
Typescript
SCSS

<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.

Your email

Your password

Forgot Password?

Don't have an account? Sign up

HTML
Typescript
SCSS

<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.

Sign up

Your email

Your password

Accept the Terms and Conditions

Have an account? Log in

HTML
Typescript
SCSS

<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.

SIGN UP

Your email

Your password

Accept the Terms and Conditions

Have an account? Log in

HTML
Typescript
SCSS

<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

Your email

Your password

Forgot Password?

Don't have an account? Sign up

HTML
Typescript
SCSS

<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;
}