|

Bootstrap Modal Form Examples

how-to-trigger-a-login-modal

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.
modal-sign-in-window-with-facebook


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.
reddit-login-modal-window


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

Modal Content

Nice! This gives us a pretty good looking modal we can make use of as we see here!
bootstrap-4-modal-login-form


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

Modal Markup

bootstrap-4-modal-with-links-to-login-and-signup


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

Modal HTML Markup

twitter-like-modal-to-login


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

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.

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.

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.

laravel-modal-login-with-bootstrap

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.
successful-laravel-authentication-login


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.