Designing Login, Sign Up & Forgot Password Modal Form with Bootstrap | Coding Cage

Designing Login, Sign Up & Forgot Password Modal Form with Bootstrap

By
Hello friends, Today in this tutorial we will see How to design Login, Signup & Forgot Password Modal Forms using Bootstrap. Creating and customizing these bootstrap modals are quite easy, i mean literally easy, Modals allow you to open excellent pop-up windows within the same page without redirecting to any separate pages for any particular task, E.g Separate Login/Signup pages, Having Modal Forms on website gives better UI. In this example i have covered login, signup and forgot password modals which you can create easily, let's take a look.


We already have Tutorial on Bootstrap Sign Up Form with jQuery Validation. but here we will see creating forms on bootstrap modal along with validation.

Well i have used here latest Bootstrap V 3.3.7 - Download it here. Or you can also use CDN if you don't want to download.

The Design: Page Structure

Following is the HTML Page Structure, set up the necessary CSS and JS files as follow.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
 
    <!-- Modal will be here ... --> 
      
    <!-- Put JS files here. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

The Design: Modal

As we all know that the bootstrap modal-content div contains modal-header, modal-body and modal-footer div's, this is the modal structure.
<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <!-- MODAL HEADER -->
      </div>

      <div class="modal-body">
        <!-- MODAL BODY -->
      </div>

      <div class="modal-footer">
        <!-- MODAL FOOTER -->
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

This will be just above the JS Files as shown in the Page Structure. see below example.

Complete Page Structure

This is the Complete Page structure which requires to create Pop-up modals. Create Index.html page and add the following code inside it.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
 
    
    <div class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">

        <div class="modal-header">
          <!-- MODAL HEADER -->
        </div>

        <div class="modal-body">
          <!-- MODAL BODY -->
        </div>

        <div class="modal-footer">
          <!-- MODAL FOOTER -->
        </div>

        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
 
      
    <!-- Put JS files here. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>

So we have created a blank html markup now let's create Login, Signup and Forgot Password Modal Forms. the only one modal i have used over here with three <div class="modal-content"> the default content will be login content, here are those contents with different ID's. See the Following Example.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">

    <div class="modal-content" id="login-modal-content">

      <div class="modal-header">
        <!-- Login Header -->
      </div>
      <div class="modal-body">
        <!-- Login Body-->
      </div>
      <div class="modal-footer">
        <!-- Login Footer-->
      </div>

    </div>

    <div class="modal-content" id="signup-modal-content">

      <div class="modal-header">
        <!-- Signup Header -->
      </div>
      <div class="modal-body">
        <!-- Signup Body-->
      </div>
      <div class="modal-footer">
        <!-- Signup Footer-->
      </div>

    </div>

    <div class="modal-content" id="forgot-password-modal-content">

      <div class="modal-header">
        <!-- Forgot Password Header -->
      </div>
      <div class="modal-body">
        <!-- Forgot Password Body-->
      </div>
      <div class="modal-footer">
        <!-- Forgot Password Footer-->
      </div>

    </div>

  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

In the above example the login modal content will be default and the rest two contents are hidden and will be shown by clicking on particular links given in all modal-footer, Hope you guys are getting.

Login, Signup, Forgot Password Modal Forms : Complete Modal

Till now we have seen the html markup's and structure, now let's have a look at the complete Modal which contains Login, Signup and Forgot Password modal-content div's.
<div id="login-signup-modal" class="modal fade" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
    
     <!-- login modal content -->
        <div class="modal-content" id="login-modal-content">
        
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"><span class="glyphicon glyphicon-lock"></span> Login Now!</h4>
          </div>
        
          <div class="modal-body">
          <form method="post" id="Login-Form" role="form">
            <div class="form-group">
                <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                <input name="email" id="email" type="email" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email" >
                </div>                      
            </div>
            <div class="form-group">
                <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                <input name="password" id="login-password" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup">
                 </div>                      
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
              <button type="submit" class="btn btn-success btn-block btn-lg">LOGIN</button>
          </form>
        </div>
        
        <div class="modal-footer">
          <p>
          <a id="FPModal" href="javascript:void(0)">Forgot Password?</a> | 
          <a id="signupModal" href="javascript:void(0)">Register Here!</a>
          </p>
        </div>
        
       </div>
        <!-- login modal content -->
        
        <!-- signup modal content -->
        <div class="modal-content" id="signup-modal-content">
        
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title"><span class="glyphicon glyphicon-lock"></span> Signup Now!</h4>
        </div>
                
        <div class="modal-body">
          <form method="post" id="Signin-Form" role="form">
            <div class="form-group">
                <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                <input name="email" id="email" type="email" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email">
                </div>                     
            </div>
            <div class="form-group">
                <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                <input name="password" id="passwd" type="password" class="form-control input-lg" placeholder="Enter Password" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup">
                </div>                      
            </div>
            <div class="form-group">
                <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                <input name="password" id="confirm-passwd" type="password" class="form-control input-lg" placeholder="Retype Password" required data-parsley-equalto="#passwd" data-parsley-trigger="keyup">
                </div>                      
            </div>
            <button type="submit" class="btn btn-success btn-block btn-lg">CREATE ACCOUNT!</button>
          </form>
        </div>
        <div class="modal-footer">
          <p>Already a Member ? <a id="loginModal" href="javascript:void(0)">Login Here!</a></p>
        </div>
       </div>
       <!-- signup modal content -->
        
       <!-- forgot password content -->
       <div class="modal-content" id="forgot-password-modal-content">
        
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title"><span class="glyphicon glyphicon-lock"></span> Recover Password!</h4>
        </div>
        
        <div class="modal-body">
          <form method="post" id="Forgot-Password-Form" role="form">
            <div class="form-group">
                <div class="input-group">
                <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                <input name="email" id="email" type="email" class="form-control input-lg" placeholder="Enter Email" required data-parsley-type="email">
                </div>                     
            </div>         
            <button type="submit" class="btn btn-success btn-block btn-lg">
              <span class="glyphicon glyphicon-send"></span> SUBMIT
            </button>
          </form>
        </div>
        
        <div class="modal-footer">
          <p>Remember Password ? <a id="loginModal1" href="javascript:void(0)">Login Here!</a></p>
        </div>
        
       </div>        
       <!-- forgot password content -->
  
  </div>
</div>

Now i hope you are not getting confused, this is simple and straight forward modal form, one modal with three different modal-content, that's it.

All the modal-footer contain seperate links which triggers different modals[login/signup/forgot password], E.g Login footer has forgot password and signup links, Signup Footer has Login link, Forgot password footer has login link.

jQuery Part

We have done Designing part, now it's time of scripting, the jQuery Effects, take a look at this simple jQuery Code. These are simple jQuery FadeOut and FadeIn effects, which triggers on Footer Links Click, and accordingly forms are swapping.
<script>
$(document).ready(function(){
      
    $('#Login-Form').parsley();
    $('#Signin-Form').parsley();
    $('#Forgot-Password-Form').parsley();
     
    $('#signupModal').click(function(){         
     $('#login-modal-content').fadeOut('fast', function(){
        $('#signup-modal-content').fadeIn('fast');
     });
    });
           
    $('#loginModal').click(function(){          
     $('#signup-modal-content').fadeOut('fast', function(){
        $('#login-modal-content').fadeIn('fast');
     });
    });
      
    $('#FPModal').click(function(){         
     $('#login-modal-content').fadeOut('fast', function(){
        $('#forgot-password-modal-content').fadeIn('fast');
        });
    });
      
    $('#loginModal1').click(function(){          
     $('#forgot-password-modal-content').fadeOut('fast', function(){
        $('#login-modal-content').fadeIn('fast');
     });
    });
        
});
</script>

Form Validation Part

I have used Parsley.JS Form Validation Plugin to validate these all forms, simple and easy to use jQuery plugin. we already have a Tutorial on Parsley Form Validation Example

To use parsley form validation, just add parsley.min.js file with JS files at the bottom of page. and to trigger the validation add the single line of code in the jQuery Code.

$('#Login-Form').parsley();
$('#Signin-Form').parsley();
$('#Forgot-Password-Form').parsley();

Already Given in the jQuery Code above.

The CSS Part

Here is the CSS code for all these modal design, Contains CSS code for Modals and Parsley validation.
body {
  padding-top: 70px;
}
.modal-header, .modal-body, .modal-footer{
  padding: 25px;
}
.modal-footer{
  text-align: center;
}
#signup-modal-content, #forgot-password-modal-content{
  display: none;
}
 
/** validation */
  
input.parsley-error{    
  border-color:#843534;
  box-shadow: none;
}
input.parsley-error:focus{    
  border-color:#843534;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483
}
.parsley-errors-list.filled {
  opacity: 1;
  color: #a94442;
  display: none;
}


Done! That's it for the day, i hope you enjoyed and liked it. this is just designing part we have done here there are lot's more to cover which will see next time, the login, signup, forgot password process with jQuery Ajax, we will see this tutorial very soon.

Thanks and Happy Coding :)

10 comments:

  1. Can you create a tutorial about "create a blog using php and mysql"?

    Thanks for all the tutorials you have created.

    ReplyDelete
  2. wow you are back!!! thanks man

    ReplyDelete
    Replies
    1. Yep EMMA CYRIL, Thanks & Keep Visiting :)

      Delete
  3. please can you do tutorials on how to use dropzone to insert into database

    ReplyDelete
  4. Nice...can't wait to get the continuation of this.

    ReplyDelete
    Replies
    1. Thanks Tochukwu, Glad you Liked it :)

      Delete
  5. Awesome tutorial as usual! You make it super easy to understand.
    Can you please complete this tutorial on php mysql? That would be great. Not many good once out there, or point me at the right direction :)

    ReplyDelete
    Replies
    1. Hi A HAMMADI, I'll Post very Soon. :)

      Delete
    2. Thanks buddy, can't wait! :)

      Delete

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download