How to Create Popup Signup and Login Form using Bootstrap Modal

Authors: CodeToday | Bootstrap | Views: 311 | Posted: 08 AM: 10/14/2017

Bootstrap Modal is very important in optimizing space and working time, you can use it for adding, editing, deleting ... a record or updating information of everything without must open multiple work windows.

Today I will guide you how to use Bootstrap Modal to Create Popup Signup and Login Form on the same browser window without reloading the page or open new window.

The library to use here is Bootstrap and Jquery

Bootstrap & Jquery Library

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

HTML Button Call Signup and Login 

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#signup"><b>Signup</b></button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#login"><b>Login</b></button>

Signup bootstrap form html

<div class="modal fade" id="signup" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="text-primary">Signup Form</h3>
        </div>
		<div class="modal-body">
		<div class="row">	
		    <form  method="post" action="" role="form" class="form-horizontal">		
			<div class="form-group">
			<label class="control-label col-md-3">Your Name *:</label>
			<div class="col-md-9">
			<input type="text" class="form-control" name="name" value="" placeholder="Please Enter Your Name" required>
			</div>
			</div>
			<div class="form-group">
			<label class="control-label col-md-3">Email address *:</label>
			<div class="col-md-9">
			<input type="email" class="form-control" name="email" value="" placeholder="Please Enter Your Email" required>
			</div>
			</div>	
			<div class="form-group">
			<label class="control-label col-md-3">Password *:</label>
			<div class="col-md-9">
			<input type="password" class="form-control" name="password" value="" placeholder="Please Enter Your password" required>
			</div>
			</div>	
			<div class="form-group">
			<label class="control-label col-md-3">Retype Password *:</label>
			<div class="col-md-9">
			<input type="password" class="form-control" name="repassword" value="" placeholder="Please Enter Retype Your password" required>
			</div>
			</div>	
			<div class="form-group">
			<div class="col-md-3"></div>
			<div class="col-md-9">
			<input type="submit" name="Signup Now" value="Signup Now" class="btn btn-info"> <input type="reset" name="Reset" value="Reset" class="btn btn-default"> 
			</div>	
			</div>	
			</form>					
                </div>
		</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>      
    </div>
  </div>

Login bootstrap form html

   <div class="modal fade" id="login" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="text-primary">Login Form</h3>
        </div>
		<div class="modal-body">
		<div class="row">	
		    <form  method="post" action="" role="form" class="form-horizontal">		
			<div class="form-group">
			<label class="control-label col-md-3">Email address *:</label>
			<div class="col-md-9">
			<input type="email" class="form-control" name="email" value="" placeholder="Please Enter Your Email" required>
			</div>
			</div>	
			<div class="form-group">
			<label class="control-label col-md-3">Password *:</label>
			<div class="col-md-9">
			<input type="password" class="form-control" name="password" value="" placeholder="Please Enter Your password" required>
			</div>
			</div>	
			<div class="form-group">
			<div class="col-md-3"></div>
			<div class="col-md-9">
			<input type="submit" name="Login Now" value="Login Now" class="btn btn-info"> <input type="reset" name="Reset" value="Reset" class="btn btn-default"> 
			</div>	
			</div>	
			</form>					
                </div>
		</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>      
    </div>
  </div>
After performing the above steps 2 form Signup and Login as the image below:

create popup signup form using bootstrap modal

create popup login form using bootstrap modal

You can create a Signup and Login form on the same POPUP window by using Bootstrap Tabs and Pills

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How to Create Popup Signup and Login Form using Bootstrap Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-primary">How to Create Popup Signup and Login Form using Bootstrap Modal</h1>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal"><b>Signup/ Login</b></button>
<!--SignUp Form-->
 <div class="modal fade" id="modal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="text-primary">Signup - Login Form</h3>
        </div>
		<div class="modal-body">
			<ul class="nav nav-tabs">
			  <li class="active"><a data-toggle="tab" href="#home">Signup</a></li>
			  <li><a data-toggle="tab" href="#login">Login</a></li>
			</ul>
			<div class="tab-content">
			  <div id="home" class="tab-pane fade in active">
		          <!-- Signup Form Code Here -->
			  </div>
			  <div id="login" class="tab-pane fade">
			  <!-- Login Form Code Here -->
</div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>
Result Signup and Login form Tabs:
tabs signup login form bootstrap modal

Demo Link: https://www.codetoday.net/demo/how-to-create-popup-signup-and-login-form-using-bootstrap-modal/tabs.php


If you have any questions, please leave a message below