Angular Bootstrap Forms

Angular Forms - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

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

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

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.

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

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

Subscribe

Join our mailing list. We write rarely, but only with 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 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

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

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

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

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

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

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

                <!-- Material input password -->
                <div class="md-form">
                  <mdb-icon icon="lock" class="prefix grey-text"></mdb-icon>
                  <input
                    type="password"
                    id="materialFormCardPasswordEx"
                    formControlName="materialFormCardPasswordEx"
                    class="form-control"
                    mdbInput
                  />
                  <label for="materialFormCardPasswordEx" class="font-weight-light">Your password</label>
                </div>

                <div class="text-center py-4 mt-3">
                  <button mdbBtn color="cyan" class="waves-light" type="submit" mdbWavesEffect>
                    Register
                  </button>
                </div>
              </form>
              <!-- Material form register -->
            </mdb-card-body>
          </mdb-card>
        
        
    
        
            
          import { Component } from '@angular/core';
          import { FormGroup, FormBuilder, Validators } from '@angular/forms';

          @Component({
              selector: 'card-form',
              templateUrl: './card-form.component.html',
              styleUrls: ['./card-form.component.scss']
          })
          export class CardFormComponent {
            cardForm: FormGroup;

            constructor(private fb: FormBuilder) {
              this.cardForm = fb.group({
                materialFormCardNameEx: ['', Validators.required],
                materialFormCardEmailEx: ['', [Validators.email, Validators.required]],
                materialFormCardConfirmEx: ['', Validators.required],
                materialFormCardPasswordEx: ['', Validators.required]
              });
            }
          }
        
        
    

Form within a modal

Form in a modal component allows you to show user some data dynamically.

        
            
          <button
            type="button"
            mdbBtn
            color="primary"
            class="waves-light"
            (click)="form.show()"
            mdbWavesEffect
          >
            Contact form
          </button>
          <!--Modal: Contact form-->
          <div
            mdbModal
            #form="mdb-modal"
            class="modal fade"
            id="modalContactForm"
            tabindex="-1"
            role="dialog"
            aria-labelledby="myModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog cascading-modal" role="document">
              <!--Content-->
              <div class="modal-content">
                <!--Header-->
                <div class="modal-header light-blue darken-3 white-text">
                  <h4 class="title">
                    <mdb-icon fas icon="pencil-alt" class="prefix"></mdb-icon>
                    <button
                      type="button"
                      class="close waves-effect waves-light"
                      data-dismiss="modal"
                      aria-label="Close"
                      (click)="form.hide()"
                    >
                      <span aria-hidden="true">×</span>
                    </button>
                  </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

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

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

Have an account? Log in

        
            
          <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

Have an account? Log in

        
            
          <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

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