Create an easy Login and Signup Form in 4 steps

Summary of the Project

This project involves creating a modern, interactive interface that facilitates user login and signup form functionalities. It employs HTML for structure, CSS for styling, and JavaScript for interactivity, resulting in a sleek, responsive form system that enhances user experience.

Key Features Summary:

Login and Signup Form: Two separate forms are designed for user authentication, catering to both existing users (login) and new users (signup).
Interactive UI: JavaScript-driven interactions enable smooth transitions between the login and signup form, enhancing user experience.
Visual Appeal: Custom fonts, color schemes, and animations are utilized to create a professional and engaging interface that captivates users.
Responsive Design: The layout is designed to adapt seamlessly to various screen sizes and devices, ensuring a consistent user experience across platforms.

Join Our Telegram Channel to Download the Project Source Code: Click Here

Step 1: Create the Project Directory

Create a new directory for your project, for example, login-signup-form.
Inside this directory, create three files: index.html, styles.css, and scripts.js.

Step 2: Write the HTML Code

This file contains the structure of the webpage, including the login and signup form. The HTML file provides the structure of the web page. It defines the elements that you see on the screen, such as forms, buttons, and text.

Open index.html in your preferred text editor.
Copy and paste the HTML code provided.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <title>Login and Signup Form</title>
</head>

<body>
    <div class="form-container">
        <div class="login-container" id="login-container">
            <h1 class="title">Log In</h1>
            <p class="desc">Login to your account to upload or download pictures, videos, or music.</p>
            <div class="input-container">
                <input type="email" placeholder="Enter Your Email Address" autofocus>
            </div>
            <div class="account-controls">
                <a href="#">Forgot Password?</a>
                <button>Next <i class="fas fa-angle-right"></i></button>
            </div>
            <span class="line"></span>
            <span class="other-login-text">Or log in with</span>
            <div class="social-logins">
                <button class="social-login"><i class="fab fa-facebook-f" style="color:#1e7bf2"></i></button>
                <button class="social-login"><i class="fab fa-google" style="color:#ea4335"></i></button>
            </div>
            <span class="signup-text">Don't have an account yet? <a id="signup-form-toggler">Sign up</a></span>
        </div>
        <div class="placeholder-banner" id="banner">
            <img src="https://img.freepik.com/free-vector/abstract-flat-design-background_23-2148450082.jpg?size=626&ext=jpg&ga=GA1.1.1286474015.1708934801&semt=sph" alt="" class="banner">
        </div>
        <div class="signup-container" id="signup-container">
            <h1 class="title">Signup</h1>
            <p class="desc">Create your account to upload or download pictures, videos, or music.</p>
            <div class="input-container">
                <input type="email" placeholder="Enter Your Email Address">
            </div>
            <div class="input-container">
                <input type="password" placeholder="Enter Your Password">
            </div>
            <div class="account-controls">
                <button>Next <i class="fas fa-angle-right"></i></button>
            </div>
            <span class="line"></span>
            <span class="other-login-text">Or Signup with</span>
            <div class="social-logins">
                <button class="social-login"><i class="fab fa-facebook-f" style="color:#1e7bf2"></i></button>
                <button class="social-login"><i class="fab fa-google" style="color:#ea4335"></i></button>
            </div>
            <span class="signup-text">Already have an account? <a id="login-form-toggler">Login here</a></span>
        </div>
    </div>
    <script src="scripts.js"></script>
</body>

</html>

Step 3: Write the CSS Code

This file includes the styles that make the login and signup form and other elements look visually appealing. The CSS file styles the elements in the HTML file to make them visually appealing and ensure a good user experience.

Open styles.css in your text editor.
Copy and paste the CSS code provided.

/* Reset */
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body */
body {
    font-family: "Roboto", sans-serif;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8efef;
}

/* Form Container */
.form-container {
    height: 500px;
    width: 600px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    background-color: white;
    overflow: hidden;
    position: relative;
}

/* Login & Signup Container */
.login-container,
.signup-container {
    width: 50%;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    transition: all 500ms ease;
}

.signup-container {
    transform: scale(0);
}

/* Title */
.title {
    font-size: 20px;
    font-weight: 500;
}

/* Description */
.desc {
    font-size: 12px;
}

/* Input Container */
.input-container {
    margin-top: 10px;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: 2px solid #d6e0eb;
    display: flex;
    align-items: center;
}

/* Input Field */
input {
    height: 100%;
    border: none;
    margin-left: 5px;
    outline: none;
    width: 100%;
    padding: 0 10px;
    font-family: "Roboto", sans-serif;
}

/* Account Controls */
.account-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Account Control Links */
.account-controls > a {
    text-decoration: none;
    color: #5293aa;
    font-size: 12px;
}

/* Account Control Button */
.account-controls > button {
    width: 65px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none;
    background: #046586;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 500ms ease;
    box-shadow: 0 3px 10px -5px #73aabb;
}

.account-controls > button:hover {
    transform: scale(1.1);
}

/* Line Separator */
.line {
    width: 100%;
    height: 2px;
    background-color: #bfc0c9;
    border-radius: 10px;
}

/* Other Login Text */
.other-login-text {
    text-align: center;
    font-size: 12px;
    color: #64656a;
}

/* Placeholder Banner */
.placeholder-banner {
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    transition: all 500ms ease;
    z-index: 4;
}

/* Social Logins */
.social-logins {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Social Login Button */
.social-login {
    height: 40px;
    aspect-ratio: 1 / 1;
    border: 2px solid #bfc0c9;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 500ms ease;
}

.social-login:hover {
    transform: scale(1.1);
}

/* Signup Text */
.signup-text {
    margin-top: 5px;
    font-size: 12px;
}

/* Toggler Links */
#signup-form-toggler,
#login-form-toggler {
    cursor: pointer;
    text-decoration: none;
    color: #046586;
}

#signup-form-toggler:hover,
#login-form-toggler:hover {
    border-bottom: 1px solid;
}

/* Banner Image */
.banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

Step 4: Write the JavaScript Code

The JavaScript file adds interactivity to the HTML structure by allowing users to toggle between the login and signup form. It handles the transitions and animations between the forms.

Open scripts.js in your text editor.
Copy and paste the JavaScript code provided.

const banner = document.getElementById("banner")
const loginContainer = document.getElementById("login-container")
const signupContainer = document.getElementById("signup-container")
const loginToggle = document.getElementById("login-form-toggler")
const signupToggle = document.getElementById("signup-form-toggler")

signupToggle.addEventListener('click', () => {
    banner.style.transform = "translateX(-100%)";
    loginContainer.style.transform = "scale(0)";
    signupContainer.style.transform = "scale(1)";
})

loginToggle.addEventListener('click', () => {
    banner.style.transform = "translateX(0%)";
    signupContainer.style.transform = "scale(0)";
    loginContainer.style.transform = "scale(1)";
})

Conclusion

In conclusion, this project demonstrates the implementation of a login and signup form with an aesthetically pleasing and user-friendly interface. The project achieves seamless transitions between the login and signup form sections while maintaining responsiveness and visual appeal by combining HTML, CSS, and JavaScript. Using custom fonts, color schemes, and animations adds a professional touch to the design. Overall, this project serves as a practical example of creating interactive and visually appealing forms for user authentication on web platforms.

Join Our Telegram Channel to Download the Project Source Code: Click Here

For your convenience, the total source code of this “login and signup form” project instructional practice is accessible for download by clicking the Download Code button.

Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.

download code