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

, , , , ,

Demo

Required Css -

  • Bootstrap css ( download from bootstrap website or use CDN )
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  crossorigin="anonymous">



Required js

  • jQuery js
  • Bootstrap js
  • parsley

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.4.4/parsley.min.js"></script>



Html for navigation

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
 <div class="navbar-header">
   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
   </button>
   <a class="navbar-brand" href="http://www.prohcj.co.in" target="_blank">Prohcj</a>
 </div>
 <div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav">
  <li class="active"><a href="http://www.prohcj.co.in" target="_blank">Home</a></li>
   
   </ul>
   <ul class="nav navbar-nav navbar-right">
  <li><a href="javascript:void(0)" data-toggle="modal" data-target="#login-signup-modal">Login/Signup</a></li>
   </ul>
 </div><!--/.nav-collapse -->
  </div>
</nav>


Modal Wrapper 

<div id="login-signup-modal" class="modal fade" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document"> 
 
 </div>
</div>

Login Modal

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

Sign Up Modal

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

Forgot Modal

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

jQuery

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

If you have using jQuery latest version use jQuery instead of $



Demo



Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.