How To Create Sign up and Login Form using Bootstrap and Jquery

Hello Viewers in this article we are going to discuss about sign up and login form and this tutorial i will teach you How to Create sign up and login form with fade pop up effects using Bootstrap and JQuery. Signup login form basically use for website and web applications. where users can registered in your website and after registration it is able to login on your websites. this tutorial is fully free and you can Download Complete Source Code OF Signup Login Form clicking by Download Now Button Given below last of tutorial. Lets start the tutorial first.

Creating Registration Form

In this step we are creating a simple form in HTML and make attractive using Bootstrap.

<div class="form1">
 <div class="control-group">
 <label class="control-label" for="inputEmail">First Name</label>
 <div class="controls">
 <input type="text" id="inputEmail" placeholder="First Name" name="f_name" required>
 </div>
 </div>
 <div class="control-group">
 <label class="control-label" for="inputPassword">Last Name</label>
 <div class="controls">
 <input type="text" id="inputPassword" placeholder="Last Name" name="l_name" required>
 </div>
 </div>
 <div class="control-group">
 <label class="control-label" for="inputPassword">Email</label>
 <div class="controls">
 <input type="text" id="inputPassword" placeholder="Email" name="email" required>
 </div>
 </div>
 <div class="control-group">
 <label class="control-label" for="inputPassword">Address</label>
 <div class="controls">
 <input type="text" id="inputPassword" placeholder="Address" name="address" required>
 </div>
 </div>
 
 <div class="control-group">
 <label class="control-label" for="inputEmail">Username</label>
 <div class="controls">
 <input type="text" id="inputEmail" placeholder="Username" name="u_name" required>
 </div>
 </div>
 <div class="control-group">
 <label class="control-label" for="inputPassword">Password</label>
 <div class="controls">
 <input type="password" id="inputPassword" placeholder="Password" name="pass" required>
 </div>
 </div>
 
 <div class="control-group">
 <div class="controls">

 <input type="submit" class="btn btn-success" value="Sign up">
 </div>
 </div>
 <a href="#" id="click">Click Here to login</a>
 </div>

Creating Login Form

Next step is creating login form and in this step we are creating login form in HTML and make attractive using Bootstrap.

	<div class="form2">
    <div class="control-group">
    <label class="control-label" for="inputEmail">Username</label>
    <div class="controls">
    <input type="text" id="inputEmail" placeholder="Username" name="user_name" required>
    </div>
    </div>
    <div class="control-group">
    <label class="control-label" for="inputPassword">Password</label>
    <div class="controls">
    <input type="password" id="inputPassword" placeholder="Password" name="password" required>
    </div>
    </div>
	
    <div class="control-group">
    <div class="controls">
    <label class="checkbox">
    <input type="checkbox" required> Remember me
    </label>
    <button type="submit" class="btn btn-success">Login</button>
    </div>
    </div>
		<a href="#" id="click1"> Click Here to Sign Up</a>
	</div>

Give FadeIn Effect after Switching the form using JQuery.

in this step we used JQuery UI you can download JQuery and create more effect in your webpage. this step I will give fadeIn Effect to Form After Switching Signup to login and Login To Signup.

<script type="text/javascript">
jQuery(document).ready( function () {
$(".form2").hide();

$("#click").click( function() {

$(".form1").hide();
$(".form2").fadeIn("slow");

	});
	
	$("#click1").click( function() {

$(".form2").hide();
$(".form1").fadeIn("slow");

	});
	


	});
	
</script>

Preview

Sign up Form

Login Form

Download Complete Source Code here.

Download Source Code