Design a Responsive Sliding Login & Registration Form using HTML CSS & JavaScript

In this article, we will see how to create the Responsive Sliding Login & Registration Form using HTML CSS & Javascript, along with understanding its implementation through the illustration.

Many websites, nowadays, are implements sliding login & registration forms for their sites. A Registration form is used to register or create a new account for a new user for a website and a login form is used to enter the details of a registered user into their particular account or portal. So, many websites implement these two approaches into two different pages. Here, we will see how to combine these two forms into a single HTML page and the forms will appear according to the user’s choice. At the top of the form, a button will help the user select the login or registration form according to his/her choice. When the user switches one form to another, the form will show a smooth sliding animation. 

Sliding Login & Registration Form

Approach: The following approach will be utilized to create the Responsive Sliding Login & Registration Form:

• Create a project folder and inside it create three files “index.html“(for writing the HTML), “style.css“(for writing the CSS), and “index.js“(for writing the js). You can also create a separate file to keep the CSS code for the responsiveness of the page.
• Now, create a header section to keep the header and the title. Then below the header section, create a “container” div to keep the full login and the signup form with the from the changing button.
• Now, create a div to keep the two form-changing buttons and create two buttons inside this div. One is for “Login” and the other is for “signup“.Then above the button div, create a slider div that will change its position when someone clicks on the respective button. Make the margin-left and margin-right of the button div “auto“. Then you will see the button will come into the center and add CSS to the button to disable the border and outline and make the button div flex. Follow the below CSS code to implement it:

 margin: 20px auto;  
 display: flex;
 justify-content: space-around;
 align-items: center;

• Now, add a background color to the slider div and give the same height as the button div and the width should be half of the button div. Then make the position absolute and z-index as 1. Then add left and top to align the div to the starting of the button div. It should cover the first half part of the button div. Also, add a transition of 0.5 seconds to see a smooth animation when the slider will move.
• Now, add an additional class in CSS that will add later when someone clicks on the second button, and inside it gives a left alignment that the slider will cover the last half of the button div.
• Now, write the javascript code to move the slider button according to the user’s choice. The click event on the Signup button through “addEventListener” and add a class that is already defined in CSS in the above step. Also, Add the click event on the Login button to remove the class (To add a class using “classList.add(“class_name“)” and to remove the class using “classList.remove(“class_name”)“).
• Like The Slider button, We will create the sliding form, using the same approach. Below the button div, we will create another section or div which will contain the two forms. Inside this form div, we will create two div. One will contain the login form and the another will contain the signup form. Then create the required fields inside the login and the signup section along with the login and the signup button. Make the width of the login and the signup section equal to the width of the container div and the form section div should double the container div.
• Make the form section “display: flex; position: relative; left: 0px;“. And add the “overflow: hidden;” inside the container div to hide the second form which is outside of the container. Now write an extra class in CSS that will add later when someone clicks on the second button and inside it gives a left alignment that the form will slide in left and the second form will be visible.
• Now write the code in javascript to add the extra class (already defined in CSS in the last step) inside the form section when someone will click on the signup button and also remove it when the login button will be clicked.

Example: This example illustrates how to build a responsive sliding login & signup form using HTML CSS & Javascript.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                         initial-scale=1.0">
    <title>GeeksforGeeks</title>
    <link rel="stylesheet"
          href="style.css">
</head>

<body>
    <header>
        <h1 class="heading">GeeksforGeeks</h1>
        <h3 class="title">Sliding Login & Registration Form</h3>
    </header>

    <!-- container div -->
    <div class="container">

        <!-- upper button section to select
             the login or signup form -->
        <div class="slider"></div>
        <div class="btn">
            <button class="login">Login</button>
            <button class="signup">Signup</button>
        </div>

        <!-- Form section that contains the
             login and the signup form -->
        <div class="form-section">

            <!-- login form -->
            <div class="login-box">
                <input type="email"
                       class="email ele"
                       placeholder="youremail@email.com">
                <input type="password"
                       class="password ele"
                       placeholder="password">
                <button class="clkbtn">Login</button>
            </div>

            <!-- signup form -->
            <div class="signup-box">
                <input type="text"
                       class="name ele"
                       placeholder="Enter your name">
                <input type="email"
                       class="email ele"
                       placeholder="youremail@email.com">
                <input type="password"
                       class="password ele"
                       placeholder="password">
                <input type="password"
                       class="password ele"
                       placeholder="Confirm password">
                <button class="clkbtn">Signup</button>
            </div>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

CSS

@import url(
"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    background-color: rgb(231, 231, 231);
}

header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.heading {
    color: green;
}

.title {
    font-weight: 400;
    letter-spacing: 1.5px;
}

.container {
    height: 600px;
    width: 500px;
    background-color: white;
    box-shadow: 8px 8px 20px rgb(128, 128, 128);
    position: relative;
    overflow: hidden;
}

.btn {
    height: 60px;
    width: 300px;
    margin: 20px auto;
    box-shadow: 10px 10px 30px rgb(254, 215, 188);
    border-radius: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.login,
.signup {
    font-size: 22px;
    border: none;
    outline: none;
    background-color: transparent;
    position: relative;
    cursor: pointer;
}

.slider {
    height: 60px;
    width: 150px;
    border-radius: 50px;
    background-image: linear-gradient(to right,
            rgb(255, 195, 110),
            rgb(255, 146, 91));
    position: absolute;
    top: 20px;
    left: 100px;
    transition: all 0.5s ease-in-out;
}

.moveslider {
    left: 250px;
}

.form-section {
    height: 500px;
    width: 1000px;
    padding: 20px 0;
    display: flex;
    position: relative;
    transition: all 0.5s ease-in-out;
    left: 0px;
}

.form-section-move {
    left: -500px;
}

.login-box,
.signup-box {
    height: 100%;
    width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 40px;
}

.login-box {
    gap: 50px;
}

.signup-box {
    gap: 30px;
}

.ele {
    height: 60px;
    width: 400px;
    outline: none;
    border: none;
    color: rgb(77, 77, 77);
    background-color: rgb(240, 240, 240);
    border-radius: 50px;
    padding-left: 30px;
    font-size: 18px;
}

.clkbtn {
    height: 60px;
    width: 150px;
    border-radius: 50px;
    background-image: linear-gradient(to right,
            rgb(255, 195, 110),
            rgb(255, 146, 91));
    font-size: 22px;
    border: none;
    cursor: pointer;
}

/* For Responsiveness of the page */

@media screen and (max-width: 650px) {
    .container {
        height: 600px;
        width: 300px;
    }

    .title {
        font-size: 15px;
    }

    .btn {
        height: 50px;
        width: 200px;
        margin: 20px auto;
    }

    .login,
    .signup {
        font-size: 19px;
    }

    .slider {
        height: 50px;
        width: 100px;
        left: 50px;
    }

    .moveslider {
        left: 150px;
    }

    .form-section {
        height: 500px;
        width: 600px;
    }

    .form-section-move {
        left: -300px;
    }

    .login-box,
    .signup-box {
        height: 100%;
        width: 300px;
    }

    .ele {
        height: 50px;
        width: 250px;
        font-size: 15px;
    }

    .clkbtn {
        height: 50px;
        width: 130px;
        font-size: 19px;
    }
}

@media screen and (max-width: 320px) {
    .container {
        height: 600px;
        width: 250px;
    }

    .heading {
        font-size: 30px;
    }

    .title {
        font-size: 10px;
    }

    .btn {
        height: 50px;
        width: 200px;
        margin: 20px auto;
    }

    .login,
    .signup {
        font-size: 19px;
    }

    .slider {
        height: 50px;
        width: 100px;
        left: 27px;
    }

    .moveslider {
        left: 127px;
    }

    .form-section {
        height: 500px;
        width: 500px;
    }

    .form-section-move {
        left: -250px;
    }

    .login-box,
    .signup-box {
        height: 100%;
        width: 250px;
    }

    .ele {
        height: 50px;
        width: 220px;
        font-size: 15px;
    }

    .clkbtn {
        height: 50px;
        width: 130px;
        font-size: 19px;
    }
}

Javascript

let signup = document.querySelector(".signup");
let login = document.querySelector(".login");
let slider = document.querySelector(".slider");
let formSection = document.querySelector(".form-section");

signup.addEventListener("click", () => {
    slider.classList.add("moveslider");
    formSection.classList.add("form-section-move");
});

login.addEventListener("click", () => {
    slider.classList.remove("moveslider");
    formSection.classList.remove("form-section-move");
});

Output: From the output, you can also see the responsiveness of the website.