Login and Signup form Switch Javascript

form switch javascript

The two most important forms when designing a website are login and signup forms. Instead of having separate spaces for both forms, we can implement two forms in the same place. In this project, we have shown how to implement the login and signup form switch effect using HTML, CSS, and Javascript. Check out the step-by-step process of making the entire project in the video tutorial below. And if you like our content, please Subscribe to our channel.

Video Tutorial:

I hope you have watched the video tutorial. A login form is part of a website where users enter their credentials. One of these credentials is a username and the other is a password. These pieces of information are usually entered to get access to any website or APP. This is a security feature of any website or APP through which only authorized users are allowed to enter. Any login form usually has two input fields which are username and password.

On the other hand, the signup form is through which a new user register or sign up to get the service of a website or app. A lot of user information is collected through this form. Some of these are name, email address, gender, date of birth, location, username, password, etc. After knowing this information, a new user is allowed to access a website or app.

In our project, we put two forms inside the parent div 'wrapper'. For the switch effect, we have included two buttons named signup and log in under each form through which we can switch from one form to another form. we used the transform translateX property using javascript in such a way that creates a smooth sliding animation when switching between the forms. In this way, we can provide a better user experience for our users.

You May Also Like:

Login and Signup form Switch Javascript [ Source Code ]:

First create three files HTML, CSS, and JS for this project. Then copy the code from the code box given below and paste it into the respective file. Save the code and open it in your browser to see if it works properly. If not then download the code from below download button.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinecorweb.com -->
<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>How to create Login and signup form using HTML CSS & Javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
<!-- Form Container -->
<div id="wrapper">
    <!-- Login Form -->
    <form id="login-side" class="form">
      <h1>Login Form</h1>
      <input type="text" placeholder="Your Username...">
      <input type="password" placeholder="Your Password...">
      <button type="submit">Submit</button>
      <p class="switch-animation">Don't have an account? <a href="#">Sign up</a></p>
    </form>
    <!-- Sign Up Form -->
    <form id="signup-side" class="form">
      <h1>Signup Form</h1>
      <input type="text" placeholder="Enter Username...">
      <input type="email" placeholder="Enter Email...">
      <input type="password" placeholder="Enter Password">
      <button type="submit">Submit</button>
      <p class="switch-animation">Already have an account? <a href="#">Login</a></p>
    </form>
</div>

    <script>
      // Form Container 
const formArea = document.getElementById('wrapper');

// Form
const loginDiv = document.getElementById('login-side');
const signupDiv = document.getElementById('signup-side');

// Form Switch
const switchEffect = document.querySelectorAll('.switch-animation a');

// Show Sign Up Form
switchEffect[0].addEventListener('click', () => {
  loginDiv.style.transform = 'translateX(-100%)';
  signupDiv.style.transform = 'translateX(0)';
});

// Show Login Form
switchEffect[1].addEventListener('click', () => {
  loginDiv.style.transform = 'translateX(0)';
  signupDiv.style.transform = 'translateX(100%)';
});

    </script>
</body>
</html>

ADD CSS:

body {
	background: #1574c3;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 95vh;
	font-family: montserrat;
}
/* Form Container */

#wrapper {
	width: 500px;
	height: 370px;
	position: relative;
	overflow: hidden;
	box-shadow: 12px 12px 20px rgba(0, 0, 0, 0.4);
}
#wrapper h1 {
	color: #1574c3;
}
/* Form */

.form {
	width: 500px;
	height: 370px;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform 0.6s ease-in-out;
	text-align: center;
}
.form input {
	width: 80%;
	height: 35px;
	margin-bottom: 15px;
	padding: 0 0 0 15px;
}
/* Login Form */

#login-side {
	background-color: #f7f7f7;
	transform: translateX(0);
}
/* Sign Up Form */

#signup-side {
	background-color: #ffffff;
	transform: translateX(-100%);
}
/* Form Switch */

.switch-animation {
	margin-top: 20px;
	text-align: center;
}
.switch-animation a {
	color: #333;
	text-decoration: none;
	font-weight: bold;
	transition: color 0.2s;
}
.switch-animation a:hover {
	color: #6ab5b9;
}
button {
	display: block;
	margin: 2% auto 0;
	border: none;
	background: #1574c3;
	padding: 10px 175px;
	color: #fff;
	text-transform: uppercase;
	font-size: 18px;
	border-radius: 5px;
	font-family: montserrat;
	font-weight: 700;
}

I hope this code is working for you. Clicking on the Load More button at the bottom of our website will give you more snippets to work with. If you like what you see on our website, please share it with other people. Thank you for the time you put into it.

Post a Comment

Please Do not Enter any spam link in the comment box