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.
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.
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.
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!
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 -->
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 -->
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.
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 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.
