Edit these docs Rate these docs

Vue Modal Form

Vue Bootstrap Modal Form

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


          <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


            <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


            <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


          <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


          <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


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


            <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


            <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


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