Bootstrap Modal Form Examples - Vegibit (2022)

In this article, we’ll take a look at some Bootstrap Modal Form Examples. One of the most common use cases you see around the web is that of the Login Modal, logging in via a form inside a modal. There must be something to it if the practice is so common. In fact you’ll note that Facebook is one of the most egregious users of the modal sign up window, in which they trigger a modal which takes up about 90% of the entire screen’s real estate if you are not logged in. In this tutorial, we’ll see how to trigger a modal with Bootstrap 4 based on some different scenarios, then take a look at triggering a modal when you make use of something like Laravel on the back end.

Examples Of Login Modals

The Facebook Login Modal

By simply visiting the Facebook website, if you try to view a particular page without being logged in, you will be greeted with this overbearing login window. To me, this seems a bit overboard, the user has not even taken any action on the UI elements on the page yet Facebook is harassing someone to log in. Too much, too fast. Not a good user experience in my opinion.
Bootstrap Modal Form Examples - Vegibit (2)

The Reddit Login Modal

The Reddit Login Modal is a little more natural and what you will find on many websites. You can happily view content entries and profiles, but if you try to upvote something for example, they will ask you to sign in. This seems like a good middle ground. Let the user visit and view as much as they like, and if they try to take an action that only logged in users are able to do, then provide the Modal prompt.
Bootstrap Modal Form Examples - Vegibit (3)

Twitter Login Modal

Twitter makes use of a Login Modal as well. It works in a similar way to Reddit. You get to visit and have a look around, but if you try to favorite a Tweet for example, you will be greeted with a Login Modal.
Bootstrap Modal Form Examples - Vegibit (4)

How To Trigger a Modal in Boostrap 4

The question now becomes, how do I do this on my own website? Well, it’s pretty easy to do if you use a great front end framework like Bootstrap 4. There are a few ways to accomplish this. You can place the Login and Signup form right in the same Modal. This way, the user triggers the modal, then can either login or register right from that modal. Another way you might try this is to simply provide links to both the Login and Signup pages of your website in the Modal. This way the user triggers the modal, then must click a link to visit either the login or signup page. This might be slightly less user friendly. The last option we will look at is providing the login form in the modal, but providing a link to the signup page if needed.

Login and Signup in The Same Modal

Here is the HTML Markup to create a modal that has both a login and signup option available.

note: You place the data-toggle="modal" and data-target="#ModalLoginForm" attributes on the element for which you want to trigger the modal, i.e., the modal shows when you click that element. Note that the data-target value must exactly match the id attribute of the modal which contains the hidden html markup. Note that in this example, since the button has data-target="#ModalLoginForm" and our modal itself has an id of ModalLoginForm, the modal will display when we click that button. The data-target attribute value and id of the modal can be whatever you want, as long as the two values match.

Button To Trigger Modal

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalLoginForm"> Launch demo modal</button>

Modal Content

<!-- Modal HTML Markup --><div id="ModalLoginForm" class="modal fade"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title">Login</h1> </div> <div class="modal-body"> <form role="form" method="POST" action=""> <input type="hidden" name="_token" value=""> <div class="form-group"> <label class="control-label">E-Mail Address</label> <div> <input type="email" class="form-control input-lg" name="email" value=""> </div> </div> <div class="form-group"> <label class="control-label">Password</label> <div> <input type="password" class="form-control input-lg" name="password"> </div> </div> <div class="form-group"> <div> <div class="checkbox"> <label> <input type="checkbox" name="remember"> Remember Me </label> </div> </div> </div> <div class="form-group"> <div> <button type="submit" class="btn btn-success">Login</button> <a class="btn btn-link" href="">Forgot Your Password?</a> </div> </div> </form> <h1>Or Signup!</h1> <form role="form" method="POST" action=""> <input type="hidden" name="_token" value=""> <div class="form-group"> <label class="control-label">Username</label> <div> <input type="text" class="form-control input-lg" name="name" value=""> </div> </div> <div class="form-group"> <label class="control-label">E-Mail Address</label> <div> <input type="email" class="form-control input-lg" name="email" value=""> </div> </div> <div class="form-group"> <label class="control-label">Password</label> <div> <input type="password" class="form-control input-lg" name="password"> </div> </div> <div class="form-group"> <label class="control-label">Confirm Password</label> <div> <input type="password" class="form-control input-lg" name="password_confirmation"> </div> </div> <div class="form-group"> <div> <button type="submit" class="btn btn-success"> Register </button> </div> </div> </form> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->

Nice! This gives us a pretty good looking modal we can make use of as we see here!
Bootstrap Modal Form Examples - Vegibit (5)

Links to Login Page and Signup Page in Modal

With this option, you provide the user with links to the Login or Signup pages on your website. Not my favorite, but we show how to set it up here in case you like it.

Button To Trigger Modal

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalExample"> Launch demo modal</button>

Modal Markup

<!-- Modal HTML Markup --><div id="ModalExample" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">See more of this awesome website by logging in</h4> </div> <div class="modal-body"> <p class="lead text-xs-center">It only takes a few seconds to level up!</p> <div class="lead text-xs-center"><a class="btn btn-info" href="/auth/register">Create Account</a> or <a class="btn btn-success" href="/auth/login">Sign In</a></div> </div> <div class="modal-footer"> :-) </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->

Bootstrap Modal Form Examples - Vegibit (6)

Login in Modal, Link to Signup Page

In this last example, we’ll create a modal similar to what you see with Twitter. Basically, when the modal appears on the screen, it includes an option to sign in and if you don’t have an account, you can click a link to bring yourself to a sign up page. Let’s see how we might implement that in Bootstrap 4.

Click to Trigger Modal

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#ModalLoginForm"> Launch demo modal</button>

Modal HTML Markup

<!-- Modal HTML Markup --><div id="ModalExample" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title text-xs-center">Log in like a Boss</h4> </div> <div class="modal-body"> <form role="form" method="POST" action=""> <input type="hidden" name="_token" value=""> <div class="form-group"> <label class="control-label">E-Mail Address</label> <div> <input type="email" class="form-control input-lg" name="email" value=""> </div> </div> <div class="form-group"> <label class="control-label">Password</label> <div> <input type="password" class="form-control input-lg" name="password"> </div> </div> <div class="form-group"> <div> <div class="checkbox"> <label> <input type="checkbox" name="remember"> Remember Me </label> </div> </div> </div> <div class="form-group"> <div> <a class="btn btn-link" href="">Forgot Your Password?</a> <button type="submit" class="btn btn-info btn-block">Login</button> </div> </div> </form> </div> <div class="modal-footer text-xs-center"> Don't have an account? <a href="/auth/register">Sign up »</a> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal -->

Bootstrap Modal Form Examples - Vegibit (7)

Logging In with A Modal Using Laravel

The final example we will quickly code up is to make use of a modal on the default welcome page of a fresh Laravel install. With Laravel we can quickly set up authentication by typing php artisan make:auth. This automatically builds out the basic registration and login forms, as well as associated routes and controllers. If you’d like to follow along, go ahead and install a fresh copy of laravel and run this command. With our plumbing in place, we can update the welcome page to make use of a modal login. Let’s see how.

Laravel Welcome Page With Modal Login

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> <!-- Styles --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> <style> html, body { background-color: #fff; color: #636b6f; font-family: 'Raleway'; font-weight: 100; height: 100vh; margin: 0; } .full-height { height: 100vh; } .flex-center { align-items: center; display: flex; justify-content: center; } .position-ref { position: relative; } .top-right { position: absolute; right: 10px; top: 18px; } .content { text-align: center; } .title { font-size: 84px; } .links > a { color: #636b6f; padding: 0 25px; font-size: 12px; font-weight: 600; letter-spacing: .1rem; text-decoration: none; text-transform: uppercase; } .m-b-md { margin-bottom: 30px; } </style></head><body><div class="flex-center position-ref full-height"> @if (Route::has('login')) <div class="top-right links"> <a href="{{ url('/login') }}">Login</a> <a href="{{ url('/register') }}">Register</a> </div> @endif <div class="content"> <div data-toggle="modal" data-target="#modal" class="title m-b-md"> Laravel </div> </div></div><!-- Modal HTML Markup --><div id="modal" class="modal fade"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title">Login</h1> </div> <div class="modal-body"> <form class="form-horizontal" role="form" method="POST" action="{{ url('/login') }}"> {{ csrf_field() }} <div class="form-group"> <label for="email" class="control-label">E-Mail Address</label> <div> <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" autofocus> </div> </div> <div class="form-group"> <label for="password" class="control-label">Password</label> <div> <input id="password" type="password" class="form-control" name="password"> </div> </div> <div class="form-group"> <div> <div class="checkbox"> <label> <input type="checkbox" name="remember"> Remember Me </label> </div> </div> </div> <div class="form-group"> <div> <button type="submit" class="btn btn-primary"> Login </button> <a class="btn btn-link" href="{{ url('/password/reset') }}"> Forgot Your Password? </a> </div> </div> </form> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script></body></html>

Note that we needed to enable Bootstrap on the page, and we did so by making use of a CDN for both the styles and javascript. In order to do this we Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

We also need to add the required JavaScript. Place these snippets right before the closing </body> tag. Be sure to place jQuery and Tether first, as Bootstrap code depends on them.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

With our Welcome page now enabled for bootstrap, and the required Laravel authentication system built via php artisan make:auth, we now be able to log in via the modal. Let’s try! Visit the page, click the “Laravel” text, fill out the user information, and click log in.

Bootstrap Modal Form Examples - Vegibit (8)

We click “Login” and voila! It works 🙂 We get taken to the example “home” page or dashboard of our application, and we can see testuser is logged in and can log out if so desired.
Bootstrap Modal Form Examples - Vegibit (9)

Bootstrap Modal Form Examples Summary

Thanks for checking out these different examples of using a Bootstrap modal for various UI scenarios. We covered many of the basics here. If you wanted to see more about how to use Validation in Bootstrap Forms, you can check out formvalidation.io for some nice examples of how to do this.

FAQs

How do I add a modal form? ›

How to add form inside Bootstrap 4 modal / Bootstrap 4 useful tutorials ...

How do I submit a Bootstrap modal form? ›

You CAN include a modal within a form. In the Bootstrap documentation it recommends the modal to be a "top level" element, but it still works within a form. You create a form, and then the modal "save" button will be a button of type="submit" to submit the form from within the modal.

How do I add a scrollbar to a modal? ›

For Bootstrap versions >= 4.3. Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.

How do I create a popup signup and login form using Bootstrap modal? ›

1. First of all, load the Bootstrap 4 CSS and Font Awesome CSS in the head section of your HTML page in order to create a login form modal popup. 2. Now, create a button that will be used to trigger the modal popup.

How do I display data in modal popup? ›

Show dynamic data on modal popup using php
  1. Step 1 :- Before using the Bootstrap to create modal popup, the Bootstrap and jQuery library need to be included first. ...
  2. Step 2 :- Create table to show data. ...
  3. Step 3 :- Create user table in database. ...
  4. Step 4 :- Create connection to database in php file.

How are modals used? ›

We use modals to show if we believe something is certain, possible or impossible: My keys must be in the car. It might rain tomorrow. That can't be Peter's coat.

How do I submit a form? ›

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler. The form-handler is typically a file on the server with a script for processing input data. The form-handler is specified in the form's action attribute.

How do I create a popup dialog box in HTML? ›

In this article, we will create a dialog box or window using the <dialog> tag in the document. This tag is used to create popup dialog and models on a web page. This tag is new in HTML5.

How do I keep modal open after submitting? ›

The goal is to submit the data to our db when the submit button is clicked and then hide the form and display a thank you within the same modal. Here's the basics of the code for the modal: <div class="modal fade" id="formModal" tabindex="-1" role="dialog" aria-labelledby="formModalLabel" aria-hidden="true">

How do I scroll in modal? ›

Use the . modal-dialog-scrollable class to enable scrolling inside the modal.

How do I make a bootstrap modal scrollable? ›

You can also create a scrollable modal that allows scroll the modal body by adding . modal-dialog-scrollable to .

How do I make a scrollable menu without scrolling? ›

With CSS: $('html, body'). css({ overflow: 'hidden', height: '100%' }); This will disable scrolling and bring you to the top of the page.

What is a modal login form? ›

In user interface design, a modal window is a child window which requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window.

How do I create a popup form in bootstrap 4? ›

Creating Basic Bootstrap 4 Modals
  1. The header component – Add the . modal-header class to create a modal header.
  2. The body component – Add the . modal-body class to create a modal body.
  3. The footer component – Add the . modal-footer class to create a modal footer. Adding a footer to the modal is optional.
Aug 7, 2022

How can I get bootstrap table row values on clicking bootstrap modal? ›

One approach would be to refresh the content of the modal every time a selection on a row happens. The selection can be handled when clicking the row and the refresh of the (possibly rich/complicated) content of the modal could be achieved by assigning a template to it and binding its rendering to a property.

What is modal dialog form in Access? ›

Typically, modal forms have the BorderStyle property set to Dialog. Use the Modal, PopUp, and BorderStyle properties to create a custom dialog box. You can set Modal to Yes, PopUp to Yes, and BorderStyle to Dialog for custom dialog boxes.

What is a modal page? ›

A modal (also called a modal window or lightbox) is a web page element that displays in front of and deactivates all other page content. To return to the main content, the user must engage with the modal by completing an action or by closing it.

What is modeless form? ›

Modeless UserForms allows you to interact with Excel while the form is open and visible. This means that you can select cells, enter data, move to other worksheets, run new macros, and do everything you would normally do in Excel, all while the form is open and visible.

How do you show modal in react JS? ›

Modal in ReactJS - Code a React Modal Tutorial using Hooks

Top Articles

Latest Posts

Article information

Author: Carlyn Walter

Last Updated: 12/06/2022

Views: 6306

Rating: 5 / 5 (50 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Carlyn Walter

Birthday: 1996-01-03

Address: Suite 452 40815 Denyse Extensions, Sengermouth, OR 42374

Phone: +8501809515404

Job: Manufacturing Technician

Hobby: Table tennis, Archery, Vacation, Metal detecting, Yo-yoing, Crocheting, Creative writing

Introduction: My name is Carlyn Walter, I am a lively, glamorous, healthy, clean, powerful, calm, combative person who loves writing and wants to share my knowledge and understanding with you.