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.

Edit in sandbox 
<!-- 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.

Edit in sandbox 
<!-- 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.

Edit in sandbox 
<!-- 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.

Edit in sandbox 
<!-- 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.

Edit in sandbox 
<!-- 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 -->