Modal Form

Bootstrap 5 Modal Form component

Bootstrap modal forms are displayed-on-action pop-up forms that are used for gathering data from website visitors, to 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 - a drop in UX quality and frustration of your users.

Examples of Bootstrap modal form use:

  • Email signup
  • Register modal
  • Contact form

Simple modal login

Guide your users to log in to their accounts.

        
            
                <!-- Button trigger modal -->
                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#staticBackdrop1">
                    Launch modal login form
                </button>

                <!-- Modal -->
                <div class="modal fade" id="staticBackdrop1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
                    <div class="modal-dialog d-flex justify-content-center">
                        <div class="modal-content w-75">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel1">Sign in</h5>
                                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-4">
                                <form>
                                    <!-- Email input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input type="email" id="email1" class="form-control" />
                                        <label class="form-label" for="email1">Email address</label>
                                    </div>

                                    <!-- password input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input type="password" id="password1" class="form-control" />
                                        <label class="form-label" for="password1">Password</label>
                                    </div>

                                    <!-- Submit button -->
                                    <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block">Login</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal -->
                
        
    

Simple modal register

Guide your users to create an account.

        
            
                <!-- Button trigger modal -->
                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#staticBackdrop2">
                    Launch modal register form
                </button>

                <!-- Modal -->
                <div class="modal fade" id="staticBackdrop2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
                    <div class="modal-dialog d-flex justify-content-center">
                        <div class="modal-content w-75">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel2">Sign up</h5>
                                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-4">
                                <form>
                                    <!-- Name input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input type="text" id="name2" class="form-control" />
                                        <label class="form-label" for="name2">Name</label>
                                    </div>

                                    <!-- Email input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input type="email" id="email2" class="form-control" />
                                        <label class="form-label" for="email2">Email address</label>
                                    </div>

                                    <!-- password input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input type="password" id="password2" class="form-control" />
                                        <label class="form-label" for="password2">Password</label>
                                    </div>

                                    <!-- Submit button -->
                                    <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block">Sign up</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal -->
                
        
    

Simple modal subscription

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

        
            
                <!-- Button trigger modal -->
                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#staticBackdrop3">
                    Launch modal subscription form
                </button>

                <!-- Modal -->
                <div class="modal fade" id="staticBackdrop3" tabindex="-1" aria-labelledby="exampleModalLabel3" aria-hidden="true">
                    <div class="modal-dialog d-flex justify-content-center">
                        <div class="modal-content w-75">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel3">Subscribe</h5>
                                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-4">
                                <form>
                                    <!-- Name input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input type="text" id="name3" class="form-control" />
                                        <label class="form-label" for="name3">Name</label>
                                    </div>

                                    <!-- Email input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input type="email" id="email3" class="form-control" />
                                        <label class="form-label" for="email3">Email address</label>
                                    </div>

                                    <!-- Checkbox -->
                                    <div class="form-check d-flex justify-content-center mb-4">
                                        <input class="form-check-input me-2" type="checkbox" value="" id="checkbox3" checked />
                                        <label class="form-check-label" for="checkbox3">
                                            I have read and agree to the terms
                                        </label>
                                    </div>

                                    <!-- Submit button -->
                                    <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block">Send</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal -->
                
        
    

Simple modal contact

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

        
            
                <!-- Button trigger modal -->
                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#staticBackdrop4">
                    Launch modal contact form
                </button>

                <!-- Modal -->
                <div class="modal fade" id="staticBackdrop4" tabindex="-1" aria-labelledby="exampleModalLabel4" aria-hidden="true">
                    <div class="modal-dialog d-flex justify-content-center">
                        <div class="modal-content w-75">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel4">Write to us</h5>
                                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body p-4">
                                <form>
                                    <!-- Name input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input type="text" id="name4" class="form-control" />
                                        <label class="form-label" for="name4">Name</label>
                                    </div>

                                    <!-- Email input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input type="email" id="email4" class="form-control" />
                                        <label class="form-label" for="email4">Email address</label>
                                    </div>

                                    <!-- textarea input -->
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <textarea id="textarea4" rows="4" class="form-control"></textarea>
                                        <label class="form-label" for="textarea4">Your message</label>
                                    </div>

                                    <!-- Checkbox -->
                                    <div class="form-check d-flex justify-content-center mb-4">
                                        <input class="form-check-input me-2" type="checkbox" value="" id="checkbox4" checked />
                                        <label class="form-check-label" for="checkbox4">
                                            Send me a copy of this message
                                        </label>
                                    </div>

                                    <!-- Submit button -->
                                    <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-block">Send</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal -->

                
        
    

Modal with avatar

The login modal can be combined with the avatar component.

        
            
                <!-- Button trigger modal -->
                <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#staticBackdrop5">
                    Launch modal login form
                </button>

                <!-- Modal -->
                <div class="modal top fade" id="staticBackdrop5" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">
                    <div class="modal-dialog modal-dialog-centered text-center d-flex justify-content-center">
                        <div class="modal-content w-75">
                            <div class="modal-body p-4">
                                <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%281%29.webp" alt="avatar" class="rounded-circle position-absolute top-0 start-50 translate-middle h-50" />
                                <form>
                                    <div>
                                        <h5 class="pt-5 my-3">Maria Doe</h5>

                                        <!-- password input -->
                                        <div data-mdb-input-init class="form-outline mb-4">
                                            <input type="password" id="password1" class="form-control" />
                                            <label class="form-label" for="password1">Password</label>
                                        </div>

                                        <!-- Submit button -->
                                        <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Login</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal -->