Angular Bootstrap forms

Save your time with our predefined forms. Register, login, subscribe or contact form - choose whichever you need and simply paste it into your project.

Bootstrap forms in Material Design are simple and eye-pleasant. While creating MDB, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.

Such constructions like predefined Login Forms, Register Forms, Subscription Forms or Contact Forms and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.

In case you want to create your custom Form have a look at Inputs documentation where you can find plenty of elements typical for forms.

Login:

Not a member? Sign Up

Forgot Password?

Login form

Sign in

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

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

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

      <div class="text-center">
        <input type="submit" class="btn btn-default waves-light" mdbWavesEffect value="Login">
      </div>
    </form>
<!-- Login form -->


import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
    selector: 'login-form',
    templateUrl: './login-form.component.html',
    styleUrls: ['./login-form.component.scss']
})
export class LoginFormComponent {

    loginForm: FormGroup;

    constructor(private fb: FormBuilder) {
        this.loginForm = fb.group({
            defaultFormEmail: ['', Validators.required],
            defaultFormPass: ['', [Validators.required, Validators.minLength(8)]]
        });
    }
}

Register form

Sign up

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

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

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

  <div class="text-center">
    <input class="btn btn-deep-orange waves-light" value="Sign up" mdbWavesEffect>
  </div>
</form>
<!-- Register form -->


import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
    selector: 'register-form',
    templateUrl: './register-form.component.html',
    styleUrls: ['./register-form.component.scss']
})
export class RegisterFormComponent {

    registerForm: FormGroup;

    constructor(private fb: FormBuilder) {
        this.registerForm = fb.group({
            orangeFormName: ['', Validators.required],
            orangeFormEmail: ['', [Validators.required, Validators.email]],
            orangeFormPass: ['', [Validators.required, Validators.minLength(8)]]
        });
    }
}

Subscription form

Subscribe

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

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

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

  <div class="text-center">
    <button class="btn btn-indigo waves-light" mdbWavesEffect>Send
      <i class="fa fa-paper-plane-o ml-1"></i>
    </button>
  </div>
</form>
<!-- Subscription form -->


import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
    selector: 'subscription-form',
    templateUrl: './subscription-form.component.html',
    styleUrls: ['./subscription-form.component.scss']
})
export class SubscriptionFormComponent {

    subscriptionForm: FormGroup;

    constructor(private fb: FormBuilder) {
        this.subscriptionForm = fb.group({
            subscriptionFormName: ['', Validators.required],
            subscriptionFormEmail: ['', [Validators.required, Validators.email]]
        });
    }
}

Contact form

Write to us

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

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

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

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

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

  <div class="text-center">
    <button class="btn btn-unique waves-light" mdbWavesEffect>Send
      <i class="fa fa-paper-plane-o ml-1"></i>
    </button>
  </div>
</form>
<!-- contact form -->


import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
    selector: 'contact-form',
    templateUrl: './contact-form.component.html',
    styleUrls: ['./contact-form.component.scss']
})
export class ContactFormComponent {

    contactForm: FormGroup;

    constructor(private fb: FormBuilder) {
        this.contactForm = fb.group({
            contactFormName: ['', Validators.required],
            contactFormEmail: ['', [Validators.required, Validators.email]],
            contactFormSubject: ['', Validators.required],
            contactFormMessage: ['', Validators.required]
        });
    }
}