Angular Bootstrap Modal Form

Angular Bootstrap modal forms are displayed-on-action pop-up forms that used for gathering data from a website visitors and register or log users.

Using them alongside valuable content might bring a lot of business value to your project.

However, you should remember that using them in a spammy manner might have a completely different outcome - drop of UX and frustrating your users.

Examples of Bootstrap modal form use:

Email signup
Register modal
Contact form

If you want to learn about advanced usage of Modals, read our free tutorial Creating Automated web application .

See also: Modal Core Documentation, Modal Styles and Modal Templates.

Simple modal login

Launch Modal Login Form





  
    
      
        Sign in
        
      
      
        
          
          
          Your email
        

        
          
          
          Your password


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

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    loginFormModalEmail = new FormControl('', Validators.email);
    loginFormModalPassword = new FormControl('', Validators.required);
}

Simple modal register

Launch Modal Register Form





  
    
      
        Sign up
        
      
      
        
          
          
          Your name
        
        
          
          
          Your email
        

        
          
          
          Your password


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

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
  signupFormModalName = new FormControl('', Validators.required);
  signupFormModalEmail = new FormControl('', Validators.email);
  signupFormModalPassword = new FormControl('', Validators.required);
}

Simple modal subscription

Launch Modal Subscription Form


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

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    subscriptionFormModalName = new FormControl('', Validators.required);
    subscriptionFormModalEmail = new FormControl('', Validators.email);
}

Simple modal contact

Launch Modal Contact Form





  
    
      
        Write to us
        
      
      
        
          
          
          Your name
        

        
          
          
          Your email
        

        
          
          
          Subject
        

        
          
          
          Your message


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

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    contactFormModalName = new FormControl('', Validators.required);
    contactFormModalEmail = new FormControl('', Validators.email);
    contactFormModalSubject = new FormControl('', Validators.required);
    contactFormModalMessage = new FormControl('', Validators.required);
}

Cascading modal register / login MDB Pro component

Launch Modal LogIn/Register





  
    
    

      
      

        
        
          
          

            
            
              
                
                
                Your email
              

              
                
                
                Your password
              
              
                
              
            
            
            
              
                Not a member?
                  Sign Up
                
                Forgot
                  Password?
                
              
              
            

          
          

          
          

            
            
              
                
                
                Your email
              

              
                
                
                Your password
              

              
                
                
                Repeat password
              

              
                
              

            
            
            
              
                Already have an account?
                  Log In


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

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    modalFormLoginEmail = new FormControl('', Validators.email);
    modalFormLoginPassword = new FormControl('', Validators.required);
    modalFormRegisterEmail = new FormControl('', Validators.email);
    modalFormRegisterPassword = new FormControl('', Validators.required);
    modalFormRegisterRepeatPassword = new FormControl('', Validators.required);
}

Modal with avatar

Launch Modal Login with Avatar





  
    
    

      
      
        
      
      
      

        Maria Doe

        
          
          Enter password


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

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    modalFormAvatarPassword = new FormControl('', Validators.required);
}

Subscription modal with orange header

Launch modal Subscription


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

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    modalFormSubscriptionName = new FormControl('', Validators.required);
    modalFormSubscriptionEmail = new FormControl('', Validators.email);
}


.modal-notify .modal-header {
    border-radius: 3px 3px 0 0;
}
.modal-notify .modal-content {
    border-radius: 3px;
}

Elegant modal login MDB Pro component

Launch modal Login Form





  
    
    
      
      
        
          Sign in
        
        
      
      
      
        
        
          
          Your email
        

        
          
          Your password
          Forgot
             Password?
          
        

        
          
        
         or Sign in with:

        
          
          
          
          
          
          
        
      
      
      
        Not a member?
           Sign Up


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

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    modalFormElegantEmail = new FormControl('', Validators.email);
    modalFormElegantPassword = new FormControl('', 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); }

.form-elegant .modal-header {
    border-bottom: none; }

.modal-dialog .form-elegant .btn .fa {
    color: #2196f3!important; }

.form-elegant .modal-body, .form-elegant .modal-footer {
    font-weight: 400; }

Dark modal register MDB Pro component

Launch modal register Form





  
    
    
      
        
        
          
            SIGN
            
               UP
            
          
          
        
        
        
          
          
            
            Your email
          

          
            
            Your password
            
              
              Accept the
                 Terms and Conditions
              
            
          

          
          

            
            
              
            
            

          
          

          
          

            
            
              Have an account?
                 Log in


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

@Component({
  selector: 'modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent {
    modalFormDarkEmail = new FormControl('', Validators.email);
    modalFormDarkPassword = new FormControl('', 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=email]: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=email]: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%; }

.form-dark .modal-header {
    border-bottom: none;
}

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Modals:

// MDB Angular Pro
import { ModalModule, WavesModule, InputsModule, ButtonsModule } from 'ng-uikit-pro-standard'

// MDB Angular Free
import { ModalModule, WavesModule, InputsModule, ButtonsModule } from 'angular-bootstrap-md'

// For Cascading Modal only
import { TabsModule } from 'ng-uikit-pro-standard'

// Forms and Reactive Forms Modules
import { FormsModule, ReactiveFormsModule } from '@angular/forms'

Import example Modules list