Vue Modal Form

Vue Bootstrap Modal Form

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

Vue 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

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

Simple Modal Login

Guide your users to login on their account.

Launch Modal Login Form

Sign in

        
            
      <template>
        <mdb-container>
          <mdb-btn color="default" @click.native="login=true">launch login modal
            <mdb-icon icon="eye" class="ml-1" />
          </mdb-btn>
          <mdb-modal :show="login" @close="login = false">
            <mdb-modal-header class="text-center">
              <mdb-modal-title tag="h4" bold class="w-100">Sign in</mdb-modal-title>
            </mdb-modal-header>
            <mdb-modal-body class="mx-3 grey-text">
              <mdb-input label="Your email" icon="envelope" type="email" class="mb-5" />
              <mdb-input label="Your password" icon="lock" type="password" />
            </mdb-modal-body>
            <mdb-modal-footer center>
              <mdb-btn @click.native="login = false">Login</mdb-btn>
            </mdb-modal-footer>
          </mdb-modal>
        </mdb-container>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbContainer,
          mdbBtn,
          mdbIcon,
          mdbModal,
          mdbModalHeader,
          mdbModalBody,
          mdbModalFooter,
          mdbInput,
          mdbModalTitle
        } from 'mdbvue';
        export default {
          name: 'ModalExamplesPage',
          components: {
            mdbContainer,
            mdbBtn,
            mdbModal,
            mdbModalHeader,
            mdbModalBody,
            mdbModalFooter,
            mdbInput,
            mdbModalTitle,
            mdbIcon
          },
          data() {
            return {
              login: false
            }
          }
        }
      </script>

Simple Modal Register

Guide your users to create an account.

Launch Modal Register Form

Sign up

        
            
      <template>
        <mdb-container>
          <mdb-btn color="default" @click.native="register = true">launch register modal
            <mdb-icon icon="eye" class="ml-1" />
          </mdb-btn>
          <mdb-modal :show="register" @close="register = false">
            <mdb-modal-header class="text-center">
              <mdb-modal-title tag="h4" bold class="w-100">Sign up</mdb-modal-title>
            </mdb-modal-header>
            <mdb-modal-body class="mx-3 grey-text">
              <mdb-input label="Your name" icon="user" class="mb-5" />
              <mdb-input label="Your email" icon="envelope" type="email" class="mb-5" />
              <mdb-input label="Your password" icon="lock" type="password" />
            </mdb-modal-body>
            <mdb-modal-footer center>
              <mdb-btn @click.native="register = false" color="deep-orange">Sign Up</mdb-btn>
            </mdb-modal-footer>
          </mdb-modal>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbContainer,
          mdbBtn,
          mdbModal,
          mdbModalHeader,
          mdbModalBody,
          mdbModalFooter,
          mdbInput,
          mdbIcon
        } from 'mdbvue';
        export default {
          name: 'ModalExamplesPage',
          components: {
            mdbContainer,
            mdbBtn,
            mdbModal,
            mdbModalHeader,
            mdbModalBody,
            mdbModalFooter,
            mdbInput,
            mdbIcon
          },
          data() {
            return {
              register: false
            }
          }
        }
      </script>

Simple Modal Subscription

Use a simple modal subscription in which the user will be able to subscribe to the newsletter list.

Launch Modal Subscription Form

Subscribe

        
            
      <template>
        <mdb-container>
          <mdb-btn color="default" @click.native="subs = true">launch subscrition modal
            <mdb-icon icon="eye" class="ml-1" />
          </mdb-btn>
          <mdb-modal :show="subs" @close="subs = false">
            <mdb-modal-header class="text-center">
              <mdb-modal-title tag="h4" bold class="w-100">Subscribe</mdb-modal-title>
            </mdb-modal-header>
            <mdb-modal-body class="mx-3 grey-text">
              <mdb-input label="Your name" icon="user" class="mb-5" />
              <mdb-input label="Your email" icon="envelope" type="email" class="mb-5" />
            </mdb-modal-body>
            <mdb-modal-footer center>
              <mdb-btn @click.native="subs = false" color="indigo">Send
                <mdb-icon icon="paper-plane" class="ml-1" />
              </mdb-btn>
            </mdb-modal-footer>
          </mdb-modal>
        </mdb-container>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbContainer,
          mdbBtn,
          mdbModal,
          mdbIcon,
          mdbModalHeader,
          mdbModalBody,
          mdbInput,
          mdbModalFooter
        } from 'mdbvue';
        export default {
          name: 'ModalExamplesPage',
          components: {
            mdbContainer,
            mdbBtn,
            mdbModal,
            mdbModalHeader,
            mdbModalBody,
            mdbInput,
            mdbModalFooter,
            mdbIcon
          },
          data() {
            return {
              subs: false,
            }
          }
        }
      </script>

Simple Modal Contact

Use modal contact to display a window with textarea and forms where the user can enter the necessary details.

Launch Modal Contact Form

Write to us

        
            
      <template>
        <mdb-container>
          <mdb-btn color="default" @click.native="contact = true">launch contact form modal
            <mdb-icon icon="eye" class="ml-1" />
          </mdb-btn>
          <mdb-modal :show="contact" @close="contact = false">
            <mdb-modal-header class="text-center">
              <mdb-modal-title tag="h4" bold class="w-100">Write to us</mdb-modal-title>
            </mdb-modal-header>
            <mdb-modal-body class="mx-3 grey-text">
              <mdb-input label="Your name" icon="user" class="mb-5" />
              <mdb-input label="Your email" icon="envelope" type="email" class="mb-5" />
              <mdb-input label="Subject" icon="tag" class="mb-5" />
              <mdb-textarea icon="pencil-alt" label="Your message" />
            </mdb-modal-body>
            <mdb-modal-footer center>
              <mdb-btn @click.native="contact = false" color="unique">Send
                <mdb-icon icon="paper-plane" class="ml-1" />
              </mdb-btn>
            </mdb-modal-footer>
          </mdb-modal>
        </mdb-container>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbContainer,
          mdbTextarea,
          mdbIcon,
          mdbBtn,
          mdbModal,
          mdbModalHeader,
          mdbModalTitle,
          mdbModalBody,
          mdbInput,
          mdbModalFooter
        } from 'mdbvue';
        export default {
          name: 'ModalExamplesPage',
          components: {
            mdbContainer,
            mdbBtn,
            mdbModal,
            mdbModalHeader,
            mdbModalBody,
            mdbInput,
            mdbModalFooter,
            mdbTextarea,
            mdbIcon,
            mdbModalTitile
          },
          data() {
            return {
              contact: false,
            }
          }
        }
      </script>

Cascading Modal Register / Login MDB Pro component

Use a modal that contains both a login and registration window.

Launch Modal LogIn/Register

Not a member? Sign Up

Forgot Password?

Already have an account? Log In 

        
            
        <template>
          <mdb-container>
            <mdb-btn rounded color="default" @click.native="cascading = true">launch cascading register / login modal
              <mdb-icon icon="eye" class="ml-1" />
            </mdb-btn>
            <mdb-modal :show="cascading" @close="cascading = false" cascade tabs>
              <mdb-tab tabs justify class="light-blue darken-3">
                <mdb-tab-item :active="tabs==1" @click.native.prevent="tabs = 1">
                  <mdb-icon icon="user" class="mr-1" />Login</mdb-tab-item>
                <mdb-tab-item :active="tabs==2" @click.native.prevent="tabs = 2">
                  <mdb-icon icon="user-plus" class="mr-1" />Register</mdb-tab-item>
              </mdb-tab>
              <mdb-modal-body class="mx-3" v-if="tabs==1">
                <mdb-input label="Your email" icon="envelope" type="email" class="mb-5" />
                <mdb-input label="Your password" icon="lock" type="password" />
                <div class="mt-2 text-center">
                  <mdb-btn color="info">Log in
                    <mdb-icon icon="sign-in-alt" class="ml-1" />
                  </mdb-btn>
                </div>
              </mdb-modal-body>
              <mdb-modal-footer center v-if="tabs==1">
                <div class="options text-center text-md-right mt-1">
                  <p>Not a member? <a href="#" @click="tabs=2">Sign Up</a></p>
                  <p>Forgot <a href="#">Password?</a></p>
                </div>
                <mdb-btn outline="info" class="ml-auto" @click.native="cascading=false">Close</mdb-btn>
              </mdb-modal-footer>
              <mdb-modal-body class="mx-3" v-if="tabs==2">
                <mdb-input label="Your email" icon="envelope" type="email" class="mb-5" />
                <mdb-input label="Your password" icon="lock" type="password" class="mb-5" />
                <mdb-input label="Repeat password" icon="lock" type="password" />
                <div class="mt-2 text-center">
                  <mdb-btn color="info">Sign Up
                    <mdb-icon icon="sign-in-alt" class="ml-1" />
                  </mdb-btn>
                </div>
              </mdb-modal-body>
              <mdb-modal-footer center v-if="tabs==2">
                <div class="options text-center text-md-right mt-1">
                  <p>Already have an account? <a href="#" @click="tabs=1">Log in</a></p>
                </div>
                <mdb-btn outline="info" class="ml-auto" @click.native="cascading=false">Close</mdb-btn>
              </mdb-modal-footer>
            </mdb-modal>
          </mdb-container>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbContainer,
            mdbBtn,
            mdbModal,
            mdbTab,
            mdbTabItem,
            mdbModalBody,
            mdbInput,
            mdbModalFooter,
            mdbModalTitle,
            mdbIcon
          } from 'mdbvue';
          export default {
            name: 'ModalExamplesPage',
            components: {
              mdbContainer,
              mdbBtn,
              mdbModal,
              mdbTab,
              mdbTabItem,
              mdbModalBody,
              mdbInput,
              mdbModalFooter,
              mdbIcon,
              mdbModalTitle,
              mdbModalTitle
            },
            data() {
              return {
                cascading: false,
                tabs: 1
              }
            }
          }
        </script>

Modal With Avatar MDB Pro component

The login modal can be combined with the avatar component.

Launch Modal Login with Avatar
avatar
Maria Doe
        
            
        <template>
          <mdb-container>
            <mdb-btn rounded color="default" @click.native="avatar = true">launch avatar modal
              <mdb-icon icon="eye" class="ml-1" />
            </mdb-btn>
            <mdb-modal :show="avatar" @close="avatar = false" avatar size="sm">
              <mdb-modal-header :close="false">
                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.webp" alt="avatar"
                  class="rounded-circle img-responsive">
              </mdb-modal-header>
              <mdb-modal-body class="mb-1 text-center">
                <h5 class="mt-1 mb-2">Maria Doe</h5>
                <mdb-input label="Enter password" type="password" />
                <div class="mt-5 text-center">
                  <mdb-btn color="cyan" icon="sign-in-alt" iconRight iconClass="ml-1">Login</mdb-btn>
                </div>
              </mdb-modal-body>
            </mdb-modal>
          </mdb-container>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbContainer,
            mdbIcon,
            mdbBtn,
            mdbModal,
            mdbModalHeader,
            mdbModalBody,
            mdbInput
          } from 'mdbvue';
          export default {
            name: 'ModalExamplesPage',
            components: {
              mdbContainer,
              mdbBtn,
              mdbModal,
              mdbModalHeader,
              mdbModalBody,
              mdbInput,
              mdbIcon
            },
            data() {
              return {
                avatar: false,
              }
            }
          }
        </script>

Subscription Modal With Orange Header

Use a subscription modal with a clear header.

Launch modal Subscription

Subscribe

Send 
        
            
      <template>
        <mdb-container>
          <mdb-btn color="default" @click.native="header = true">launch header form modal
            <mdb-icon icon="eye" class="ml-1" />
          </mdb-btn>
          <mdb-modal :show="header" @close="header = false" warning>
            <mdb-modal-header class="text-center">
              <mdb-modal-title tag="h4" bold class="w-100">Subscribe</mdb-modal-title>
            </mdb-modal-header>
            <mdb-modal-body class="mx-3">
              <mdb-input label="Your name" icon="user" class="mb-5" iconClass="grey-text" />
              <mdb-input label="Your email" icon="envelope" type="email" class="mb-5" iconClass="grey-text" />
            </mdb-modal-body>
            <mdb-modal-footer center>
              <mdb-btn @click.native="header = false" outline="warning">Send
                <mdb-icon icon="paper-plane" class="ml-1" />
              </mdb-btn>
            </mdb-modal-footer>
          </mdb-modal>
        </mdb-container>
      </template>
      
        
    
        
            
      <script>
        import {
          mdbContainer,
          mdbBtn,
          mdbModal,
          mdbModalHeader,
          mdbModalBody,
          mdbInput,
          mdbModalFooter,
          mdbModalTitle,
          mdbIcon
        } from 'mdbvue';
        export default {
          name: 'ModalExamplesPage',
          components: {
            mdbContainer,
            mdbBtn,
            mdbModal,
            mdbModalHeader,
            mdbModalBody,
            mdbInput,
            mdbModalFooter,
            mdbModalTitle,
            mdbIcon
          },
          data() {
            return {
              header: false
            }
          }
        }
      </script>

Elegant Modal Login MDB Pro component

The elegant modal login is built according to the concept of material design. Use it to make logging into your website a pleasure.

Launch modal Login Form

Sign in

Forgot Password?

or Sign in with:

Not a member? Sign Up 

        
            
        <template>
          <mdb-container>
            <mdb-btn rounded color="default" @click.native="elegant = true">launch elegant login modal
              <mdb-icon icon="eye" class="ml-1" />
            </mdb-btn>
            <mdb-modal :show="elegant" @close="elegant = false" elegant>
              <mdb-modal-header class="text-center">
                <mdb-modal-title tag="h3" bold class="w-100 my-3">Sign in</mdb-modal-title>
              </mdb-modal-header>
              <mdb-modal-body class="mx-3">
                <mdb-input label="Your email" type="email" class="mb-5 grey-text" />
                <mdb-input label="Enter password" type="password" class="pb-3"></mdb-input>
                <p class="font-small blue-text d-flex justify-content-end mb-5">
                  Forgot <a class="ml-1"> Password?</a>
                </p>
                <div class="text-center mb-3">
                  <mdb-btn gradient="blue" block rounded>Sign In</mdb-btn>
                </div>
                <p class="font-small dark-grey-text text-right d-flex justify-content-center mb-3 pt-2">or Sign in with:
                </p>
                <mdb-row center class="my-3">
                  <mdb-btn color="white" rounded class="mr-md-3 z-depth-1a">
                    <mdb-icon fab color="info" icon="facebook-f" />
                  </mdb-btn>
                  <mdb-btn color="white" rounded class="mr-md-3 z-depth-1a">
                    <mdb-icon fab color="info" icon="twitter" />
                  </mdb-btn>
                  <mdb-btn color="white" rounded class="mr-md-3 z-depth-1a">
                    <mdb-icon fab color="info" icon="google-plus-g" />
                  </mdb-btn>
                </mdb-row>
              </mdb-modal-body>
              <mdb-modal-footer class="mx-5 pt-3 mb-1" end>
                <p class="font-small grey-text">Not a member? <a class="blue-text ml-1">Sign Up</a></p>
              </mdb-modal-footer>
            </mdb-modal>
          </mdb-container>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbContainer,
            mdbBtn,
            mdbModal,
            mdbModalHeader,
            mdbModalBody,
            mdbInput,
            mdbModalFooter,
            mdbModalTitle,
            mdbRow,
            mdbIcon
          } from 'mdbvue';
          export default {
            name: 'ModalExamplesPage',
            components: {
              mdbContainer,
              mdbBtn,
              mdbModal,
              mdbModalHeader,
              mdbModalBody,
              mdbInput,
              mdbModalFooter,
              mdbModalTitle,
              mdbRow,
              mdbIcon
            },
            data() {
              return {
                elegant: false
              }
            }
          }
        </script>

Dark Modal Register MDB Pro component

To create a dark modal register use the following code.

Launch modal register Form

SIGN UP

Have an account? Log in 

        
            
        <template>
          <mdb-container>
            <mdb-btn rounded color="default" @click.native="dark = true">launch dark register modal
              <mdb-icon icon="eye" class="ml-1" />
            </mdb-btn>
            <mdb-modal :show="dark" @close="dark = false" dark
              bgSrc="https://mdbootstrap.com/img/Photos/Others/pricing-table%20(7).webp">
              <div class="text-white rgba-stylish-strong py-5 px-5 z-depth-4">
                <mdb-modal-header class="text-center pb-4">
                  <mdb-modal-title tag="h3" bold class="w-100 my-3 white-text"><strong>SIGN</strong>
                    <a class="green-text font-weight-bold"><strong>UP</strong></a>
                  </mdb-modal-title>
                </mdb-modal-header>
                <mdb-modal-body>
                  <mdb-input label="Your email" type="email" class="mb-5" labelColor="white" />
                  <mdb-input label="Your password" type="password" class="pb-3" labelColor="white" />
                  <mdb-input type="checkbox" id="checkbox1" label="Accept the" labelClass="font-small"
                    labelColor="white" class="pb-4" wrapperClass="pl-0">
                    <a href="#" class="green-text font-weight-bold font-small mt-2" style="margin-left: -3rem"> Terms and Conditions</a>
                  </mdb-input>
                  <mdb-row center class="mb-5">
                    <mdb-col col="3" md="12">
                      <mdb-btn block color="success" rounded>Sign up</mdb-btn>
                    </mdb-col>
                  </mdb-row>
                  <mdb-row end class="my-3 pt-3 white-text font-small">
                    Have an account? <a href="#" class="green-text ml-1 font-weight-bold"> Log in</a>
                  </mdb-row>
                </mdb-modal-body>
              </div>
            </mdb-modal>
          </mdb-container>
        </template>
        
        
    
        
            
        <script>
          import {
            mdbContainer,
            mdbBtn,
            mdbModal,
            mdbModalHeader,
            mdbModalTitle,
            mdbModalBody,
            mdbInput,
            mdbRow,
            mdbCol,
            mdbIcon
          } from 'mdbvue';
          export default {
            name: 'ModalExamplesPage',
            components: {
              mdbContainer,
              mdbBtn,
              mdbModal,
              mdbModalHeader,
              mdbModalTitle,
              mdbModalBody,
              mdbInput,
              mdbRow,
              mdbCol,
              mdbIcon
            },
            data() {
              return {
                dark: false
              }
            }
          }
        </script>