Login And Registration Form With Show/Hide Button Using jQuery
In this article, we are creating a login and registration form with Show/Hide button in jQuery. First of all, we will create login, registration, and password reset forms using HTML and CSS. Then we will use jQuery code to show or hide the login and registration form on button clicking.
Moreover, you will get the login and registration form on the same page with toggle options using jQuery.
To create a login and registration form with the Show/Hide button in jQuery, we will use the jQuery latest CDN link. In this article, you will learn the most advanced HTML and CSS skills by creating login and registration forms in HTML. Furthermore, you will get the complete source code of the login and registration form with the Show/Hide button.
Registration and Login Form Using HTML CSS and JQuery
To create the login and registration form on the same page, we will cover the following points.
- Create index.html, style.css, and javascript files.
- Create a registration form using HTML and CSS.
- Use Font Awesome 5 CDN link to create social media icons.
- make HTML forms responsive using CSS media curies
- Create a hidden login form using HTML and CSS.
- Create social media buttons on the login form using HTML CSS
- And, create a hidden Password Reset form in HTML CSS.
- Get jQuery’s latest CDN link to hide/show form.
- Make show or hide Sign in Signup forms using JQuery
You can watch the following video tutorial for step by step live process to create a login and registration form with the Show and Hide options using jQuery.
Watch: How to Show/Hide Sign In Signup Forms Using JavaScript?
Registration Form in HTML with CSS Source Code
Now, You will get the source codes to create a login, signup, and password reset forms using HTML, CSS, and JQuery.
HTML Code – Sign Up Form, Login Form, and Password Reset form
The following HTML source code is to create Login, Signup, and Password Reset forms. You need to create a form.html file and paste the below HTML code there.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Form</title>
<!-- CSS file -->
<link rel="stylesheet" href="formStyle.css">
<!-- Font Awesome 5 CDN link to add social icons in html5 registration form -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<!-- jQuery CDN link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<dive class="formWraper">
<!-- Left section of responsive registration form -->
<div class="formDiv" id="signUp">
<h2>Create Account</h2>
<p class="text"> Sign Up with Social Media</p>
<!-- Font Awesome Icons -->
<div class="socialBtn">
<div class="facebook icon"><i class="fab fa-facebook-f"></i></div>
<div class="twitter icon"><i class="fab fa-twitter"></i></div>
<div class="instagram icon"><i class="fab fa-instagram"></i></i></div>
</div>
<!--Horizontal Line-->
<hr>
<div class="orDiv">Or</div>
<p class="text">SignUp with email address</p>
<div class="formGroup">
<i class="far fa-user"></i>
<input type="text" name="name" id="name" placeholder="Name">
</div>
<div class="formGroup">
<i class="far fa-envelope"></i>
<input type="email" name="email" id="email" placeholder="Email">
</div>
<div class="formGroup">
<i class="fas fa-lock"></i>
<input type="password" name="password" id="password" placeholder="Password">
</div>
<div class="checkBox">
<input type="checkbox" name="checkbox" id="checkbox">
<span class="text">I Agree with Term & Conditions.</span>
</div>
<button class="btn">SIGN UP</button>
<!-- login button, for mobile only -->
<div class="hideBtn loginBtn-mobile textStyle">
<p> Have an acount already?
<span class="hoverColor">Login</span>
</p>
</div>
</div>
<!---------- Let's add code for Signin form -------->
<div class="signIn" id="signIn">
<h2 class="signInText">Sign In</h2>
<p class="text"> Sign In with Social Media</p>
<!-- Font Awesome Icons for Sign In form -->
<div>
<button type="submit" class="iconeBtn">
<span class="facebook ">
<i class=" icone2 fab fa-facebook-f"></i> Facebook
</span>
</button>
</div>
<div>
<button type="submit" class="iconeBtn">
<span class="twitter">
<i class=" icone2 fab fa-twitter"></i> Twitter
</span>
</button>
</div>
<div>
<button type="submit" class="iconeBtn">
<span class="google">
<i class=" icone2 fab fa-google"></i> Google
</span>
</button>
</div>
<!--Horizontal Line-->
<hr class="line2">
<div class="or2">Or</div>
<p class="text">SignIn with email address</p>
<div class="formGroup">
<i class="far fa-envelope"></i>
<input type="email" name="email" id="email" placeholder="Email">
</div>
<div class="formGroup">
<i class="fas fa-lock"></i>
<input type="password" name="password" id="password" placeholder="Password">
</div>
<div class="checkBox">
<input type="checkbox" name="checkbox" id="checkbox">
<span class="text">I agree with term & conditions.</span>
</div>
<button class="btn">LOG IN</button>
<!-- Create Account button, for mobile only -->
<div class="hideBtn signUpBtn-mobile textStyle">
<p>Don't have an account?
<span class="hoverColor">Create Account</span>
</p>
</div>
<!-- Password reset button for mobile only -->
<div class="hideBtn forgotPassword textStyle">
<p>Forgot password?
<span class="hoverColor">Reset</span>
</p>
</div>
</div>
<!-- Password Reset Form -->
<div class="passwordReset" id="passwordReset">
<h2>Password Reset</h2>
<p class="text"> To retrieve your password, please enter you account's email address.</p>
<div class="formGroup">
<i class="far fa-envelope"></i>
<input type="email" name="email" id="email" placeholder="Email">
</div>
<button class="btn">SUBMIT NOW</button>
<!-- login button, for mobile only -->
<div class="hideBtn loginBtn-mobile textStyle">
<p> Remembered your password?
<span class="hoverColor">Login</span>
</p>
</div>
</div>
<!-- Right section of responsive registration form -->
<div class="welcomeDiv">
<h2>Welcome Back!</h2>
<p class="text">Get in touch with us for our news letter and more updates.</p>
<!-- Adding SignIn toggle button -->
<div class="toggleBtn loginBtn">
<p class="textAboveBtn">Have an account already?</p>
<button type="submit" class="btn2">SIGN IN</button>
</div>
<!-- Adding Create account toggle button -->
<div class="toggleBtn signUpBtn">
<p class="textAboveBtn">Don't have an account?</p>
<button type="submit" class="btn2">Create Account</button>
</div>
<!-- Adding password reset button -->
<div class="passwordResetBtn">
<p class="textAboveBtn">Forgot your password?</p>
<button type="submit" class="btn2">Reset Password</button>
</div>
</div>
</dive>
</div>
<!-- Linking jQuery file with HTML -->
<script src="jqueryfile.js"></script>
</body>
</html>
CSS Code – Responsive Registration Forms
The following CSS code will use to create the responsive login and signup forms. You need to create a style.css file and paste the below CSS code there.
body{
margin: 0px;
padding: 0px;
font-family: sans-serif;
box-sizing: border-box;
background-image: url(image3.jpg);
background-size: cover;
background-attachment: fixed;
}
.container{
display: flex;
align-content: center;
justify-content: center;
padding: 50px 0;
}
.formWraper{
display: flex;
width: 55%;
height: 520px;
border-radius: 10px;
box-shadow:0px 0px 20px black;
}
/* code for left sectin of form */
.formDiv, .signIn, .passwordReset{
width: 50%;
padding: 8%;
background-color: lavender;
text-align: center;
border-radius: 10px 0px 0px 10px;
}
.formDiv h2 {
color: green;
margin-top: -5px;
}
/* code for right sectin of the registration form */
.welcomeDiv{
width: 50%;
padding: 10px;
/* Adding overlay color gradient */
background-image: linear-gradient( to bottom, rgba(81, 214, 67, 0.6), rgba(18, 77, 12, 0.8)), url(image1.jpg);
background-size: cover;
text-align: center;
color: white;
border-radius: 0px 10px 10px 0px;
}
.welcomeDiv h2 {
margin-top: 80px;
font-weight: 800;
}
/* ---- code for Font Awsome social icons */
.socialBtn{
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.icon{
width: 30px;
height: 30px;
border-radius: 15px;
background-color:lavender;
margin: 5px;
line-height: 30px;
box-shadow: 0px 0px 10px black;
}
.text{
font-size: 14px;
font-weight: 500;
}
.orDiv, .or2{
width: 12%;
margin: 0 auto;
background-color: lavender;
position: relative;
top: -18px;
justify-content: center;
}
/* code for form input fields */
.formGroup{
width: 100%;
position: relative;
}
.formGroup input {
width: 90%;
padding: 10px;
margin-bottom: 10px;
border-style: none;
padding-left: 30px !important;
}
/* Code for Icones inside html form input */
.formGroup i {
position: absolute;
left: 5px;
top: 0px;
color: grey;
font-size: smaller;
margin: 10px !important;
}
input::placeholder {
position: relative;
left: 10px;
}
input:focus{
border-color: red;
}
.checkBox{
width: 100%;
margin-top: 2px;
}
.btn{
width: 70%;
padding: 15px;
background-color: rgb(32, 150, 32);
margin-top: 15px;
color: lavender;
border-radius: 20px;
border-style: none;
font-weight: 600;
}
.btn2{
width: 70%;
padding: 13px;
background-color: rgba(32, 150, 32, 0.5);
font-size: 16px;
font-weight: 600;
margin-top: 10px;
color: lavender;
border-radius: 20px;
border-style: none;
border: 2px solid rgb(247, 243, 243);
}
/* CSS mouse hover efects */
.btn:hover, .btn2:hover, .icon:hover, .iconeBtn:hover{
background-color: rgb(7, 80, 35);
color: whitesmoke;
}
/* making HTML registration form responsive to mobile devices */
@media screen and (max-width: 1000px){
.formWraper{
width: 80%;
}
}
/* For mobile devices only */
@media screen and (max-width: 640px){
.formDiv, .formWraper, .signIn, .passwordReset{
width: 85%;
border-radius: 10px 10px 10px 10px;
}
.welcomeDiv{
display: none;
}
.formGroup input {
width: 75%;
}
.formGroup i {
position: absolute;
left: 30px !important;
}
.hideBtn{
display: block !important;
}
}
/* Sign In Form code */
.signInText{
margin-top: -10px;
font-size: 27px;
color: rgb(7, 80, 35);
font-weight: 700;
}
.textStyle{
font-size: 12px;
font-weight: 500;
margin-top: -6px;
}
.hoverColor:hover{
color: blue;
cursor: pointer;
}
/* hiding elements initially */
.hideBtn, .signIn, .passwordReset, .signUpBtn, .passwordResetBtn{
display: none;
}
/* background color change */
.signIn{
background-color: #c8ca4e;
}
.or2{
background-color: #c8ca4e;
position:relative;
top: 1px;
}
.line2{
border: none;
height: 1px;
width: 70%;
background-color: grey;
margin-bottom: -10px;
}
.iconeBtn{
width: 50%;
padding: 10px;
background-color: rgb(47, 80, 52);
border-style: none;
color: honeydew;
margin-bottom: 5px;
border-radius: 20px;
}
.icone2{
margin-right: 2px;
}
.passwordReset{
background-color: #70D394;
}
.passwordReset h2 {
margin-top: 110px;
}
.textAboveBtn{
font-size: 12px;
margin-bottom: -5px;
margin-top: 50px;
}
JQuery Code – Show And Hide Registration/Login Form Using jQuery
Now, the following jQuery code is used for toggling the HTML forms. In the code, I used to show(), hide(), and toggle() jQuery functions to toggle the login register form when clicking the button. Create a JavaScript file and paste the following code there.
/* On click toggle signin & Create Account Button */
$('.toggleBtn').click(function () {
$('.toggleBtn').toggle();
})
/* On click SignIn button */
$('.loginBtn').click(function () {
$('#signUp').hide();
$('#signIn').show();
$('.passwordResetBtn').show();
$('.passwordReset').hide();
})
/* On click password reset button */
$('.passwordResetBtn').click(function () {
$('#signUp').hide();
$('#signIn').hide();
$('.passwordReset').show();
$('.loginBtn').show();
$('.signUpBtn').hide();
})
/* On click create account button */
$('.signUpBtn').click(function () {
$('#signUp').show();
$('#signIn').hide();
$('.passwordReset').hide();
$('.loginBtn').show();
$('.passwordResetBtn').hide();
})
/* On click hide/show forms on mobile */
$('.loginBtn-mobile').click(function () {
$('#signUp').hide();
$('#signIn').show();
$('.passwordReset').hide();
})
$('.signUpBtn-mobile').click(function () {
$('#signUp').show();
$('#signIn').hide();
$('.passwordReset').hide();
})
/* On click reset button */
$('.forgotPassword').click(function () {
$('#signUp').hide();
$('#signIn').hide();
$('.passwordReset').show();
})
