Rate this docs

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

Sign in

Not a member? Register

or sign in with:



    <!-- 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="fa fa-facebook"></i> -->
        <mdb-icon icon="facebook"></mdb-icon>
      </a>
      <a type="button" class="light-blue-text mx-2">
        <!-- <i class="fa fa-twitter"></i> -->
        <mdb-icon icon="twitter"></mdb-icon>
      </a>
      <a type="button" class="light-blue-text mx-2">
        <!-- <i class="fa fa-linkedin"></i> -->
        <mdb-icon icon="linkedin"></mdb-icon>
      </a>
      <a type="button" class="light-blue-text mx-2">
        <!-- <i class="fa fa-github"></i> -->
        <mdb-icon icon="github"></mdb-icon>
      </a>

    </form>
    <!-- Default form login -->

          

Material form login MDB Pro component

Sign in

Not a member? Register

or sign in with:



                <!-- 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" mdbInputDirective>
            <label for="materialLoginFormEmail">E-mail</label>
          </div>

          <!-- Password -->
          <div class="md-form">
            <input type="password" id="materialLoginFormPassword" class="form-control" mdbInputDirective>
            <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 icon="facebook"></mdb-icon>
          </a>
          <a type="button" class="btn-floating btn-tw btn-sm">
            <mdb-icon icon="twitter"></mdb-icon>
          </a>
          <a type="button" class="btn-floating btn-li btn-sm">
            <mdb-icon icon="linkedin"></mdb-icon>
          </a>
          <a type="button" class="btn-floating btn-git btn-sm">
            <mdb-icon icon="github"></mdb-icon>
          </a>

        </form>
        <!-- Form -->

      </mdb-card-body>

    </mdb-card>
    <!-- Material form login -->

          

Register / Sign up form

Default form register

Sign up

At least 8 characters and 1 digit Optional - for two step authentication

or sign up with:


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



<!-- 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 icon="facebook"></mdb-icon>
      </a>
      <a type="button" class="light-blue-text mx-2">
        <mdb-icon icon="twitter"></mdb-icon>
      </a>
      <a type="button" class="light-blue-text mx-2">
        <mdb-icon icon="linkedin"></mdb-icon>
      </a>
      <a type="button" class="light-blue-text mx-2">
        <mdb-icon 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> and
        <a href="" target="_blank">terms of service</a>. </p>

    </form>
    <!-- Default form register -->

          

Material form register MDB Pro component

Sign up
At least 8 characters and 1 digit
Optional - for two step authentication

or sign up with:


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



            <!-- 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" mdbInputDirective>
                <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" mdbInputDirective>
                <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" mdbInputDirective>
            <label for="materialRegisterFormEmail">E-mail</label>
          </div>

          <!-- Password -->
          <div class="md-form">
            <input type="password" id="materialRegisterFormPassword" class="form-control" aria-describedby="materialRegisterFormPasswordHelpBlock"
              mdbInputDirective>
            <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"
              mdbInputDirective>
            <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 icon="facebook"></mdb-icon>
          </a>
          <a type="button" class="light-blue-text mx-2">
            <mdb-icon icon="twitter"></mdb-icon>
          </a>
          <a type="button" class="light-blue-text mx-2">
            <mdb-icon icon="linkedin"></mdb-icon>
          </a>
          <a type="button" class="light-blue-text mx-2">
            <mdb-icon 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> 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

Subscribe

Join our mailing list. We write rarely, but only the best content.

See the last newsletter



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

Join our mailing list. We write rarely, but only the best content.

See the last newsletter



            <!-- 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" mdbInputDirective>
            <label for="materialSubscriptionFormPasswords">Name</label>
          </div>

          <!-- E-mai -->
          <div class="md-form">
            <input type="email" id="materialSubscriptionFormEmail" class="form-control" mdbInputDirective>
            <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

Contact us



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


               <!-- 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" mdbInputDirective>
            <label for="materialContactFormName">Name</label>
          </div>

          <!-- E-mail -->
          <div class="md-form">
            <input type="email" id="materialContactFormEmail" class="form-control" mdbInputDirective>
            <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" mdbInputDirective></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.

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">
                <mdb-icon icon="user" class="prefix grey-text"></mdb-icon>
                <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">
                <mdb-icon icon="envelope" class="prefix grey-text"></mdb-icon>
                <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">
                <mdb-icon icon="exclamation-triangle" class="prefix grey-text"></mdb-icon>
                <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">
                <mdb-icon icon="lock" class="prefix grey-text"></mdb-icon>
                <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]
    });

  }
}

      

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 icon="pencil" 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 icon="envelope" class="prefix"></mdb-icon>
            <input mdbInputDirective 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 mdbInputDirective 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 mdbInputDirective type="text" id="modalFormSubjectEx" formControlName="modalFormSubjectEx" class="form-control">
            <label for="modalFormSubjectEx">Subject</label>
          </div>

          <div class="md-form form-sm">
              <mdb-icon icon="pencil" class="prefix"></mdb-icon>
            <textarea mdbInputDirective 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 icon="send" 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

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

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">
          <mdb-icon icon="facebook" class="white-text" size="lg"></mdb-icon>
        </a>
        <!--Twitter-->
        <a class="fa-lg p-2 m-2 tw-ic">
            <mdb-icon icon="twitter" class="white-text" size="lg"></mdb-icon>
        </a>
        <!--Google +-->
        <a class="fa-lg p-2 m-2 gplus-ic">
            <mdb-icon 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" 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

Light form with big social icons in footer, checkbox and rounded button.

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">
          <mdb-icon icon="facebook" size="lg" class="white-text"></mdb-icon>
        </a>
        <!--Twitter-->
        <a class="fa-lg p-2 m-2 tw-ic">
            <mdb-icon icon="twitter" size="lg" class="white-text"></mdb-icon>
        </a>
        <!--Google +-->
        <a class="fa-lg p-2 m-2 gplus-ic">
            <mdb-icon 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.

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

Simple elegant form without unnecessary elements

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