How to Create Responsive Sign In & Sign Up Form Using HTML & CSS & JS | Login & Registration Form

Hello Developers! Are you looking to create a sleek and professional Sign in & Sign up form for your website? In today’s digital landscape, user-friendly and visually appealing forms are essential for providing a seamless user experience. Our step-by-step tutorial blog will guide you through the process of creating a visually appealing and responsive Sign in & Sign up form using HTML, CSS, and JS.

I. Setting Up the Project | HTML JS CSS

To begin, let’s set up the project by following these steps:

1. Create a New HTML File:
   Start by creating a new HTML file using your preferred code editor. This file will serve as the foundation for your Sign in & Sign up form.
2. Linking Font Awesome Libraries and CSS Stylesheet:
   Incorporate Font Awesome libraries by linking the necessary CSS file in the head section of your HTML file. This will provide access to a wide range of icons that can be used in your form. Additionally, link an external CSS stylesheet to style the form elements and layout.

II. Creating the Sign in Form

The Sign in form is crucial for users who already have an account. Follow these steps to create an attractive and functional Sign in form:

1. Structure the HTML Form:
   Use the HTML form element to create the structure of the Sign in form. Include input fields for the username and password, along with a submit button.
2. Styling the Input Fields and Icons:
   Utilize CSS to style the input fields, such as setting appropriate font sizes, colors, and padding. Enhance the visual appeal by incorporating Font Awesome icons alongside the input fields.
3. Adding Social Media Icons:
   Enhance the Sign in form by including social media icons, enabling users to sign in using their preferred social platform. Use Font Awesome icons or other icon libraries to add social media icons and link them to the respective sign-in functionalities.
4. Styling the Sign in Form:
   Apply CSS styles to the Sign in form container, input fields, buttons, and social media icons to create a cohesive and visually appealing design. Use CSS properties like background color, border radius, and box-shadow to add depth and visual interest.

III. Creating the Sign up Form

The Sign up form is crucial for new users who want to create an account. Follow these steps to create an enticing and user-friendly Sign up form:

1. Structure the HTML Form:
   Use the HTML form element to structure the Sign up form. Include input fields for the username, email, and password, along with a submit button.
2. Styling the Input Fields and Icons:
   Apply CSS styles to the input fields, similar to the Sign in form, to ensure consistency in design. Add icons to the input fields for a visually appealing touch.
3. Adding Social Media Icons:
   Just like in the Sign in form, include social media icons in the Sign up form to offer users the option to sign up using their preferred social platform.
4. Styling the Sign up Form:
   Use CSS to style the Sign up form, maintaining a cohesive design with the Sign in form. Pay attention to the placement of form elements, color schemes, and typography.

IV. Building the Panel Container

To provide a smooth transition between the Sign in and Sign up forms, let’s create a panel container:

1. Structure the HTML for the Panel Container:
   Create a container element that will hold the panels for signing in and signing up. Use HTML elements such as divs to structure the panels.
2. Styling the Panels for Sign in and Sign up:
   Apply CSS styles to the panels, setting their width, height, and positioning. Use CSS properties like flexbox or grid to align the panels horizontally or vertically, depending on your desired layout. Apply appropriate background colors, borders, and spacing to differentiate between the Sign in and Sign up panels.

V. Adding Functionality with JavaScript To enhance the user experience

let’s incorporate JavaScript to allow seamless switching between the Sign in and Sign up panels:

1. Linking the JavaScript File: Create a new JavaScript file and link it to your HTML file. This will enable us to add functionality to the form.
2. Implementing Panel Switching: Use JavaScript to add event listeners to the Sign in and Sign up buttons within the panels. When clicked, these buttons will toggle between the Sign in and Sign up panels, providing a smooth transition.
3. Validating User Input: Utilize JavaScript to validate user input, ensuring that the required fields are filled out correctly before submitting the form. Implement validation checks for the username, password, and email fields.

VI. Testing and Responsiveness

To ensure that your Sign in & Sign up form works flawlessly across different devices, it’s essential to test its responsiveness:

1. Testing on Various Devices: Open your form on different devices such as desktops, laptops, tablets, and mobile devices. Check if the layout and functionality remain consistent and user-friendly across all screen sizes.
2. Implementing Media Queries: Use CSS media queries to adjust the layout and styling of your form based on the screen size. This ensures that the form remains visually appealing and functional on devices of all dimensions.

Conclusion: Creating a sleek and professional Sign in & Sign up form using HTML, CSS, and JS is an essential step in designing a user-friendly website. By following our step-by-step tutorial, you’ll be able to create a visually appealing and responsive form, incorporating stylish input fields, social media icons, and seamless panel switching. Remember to test your form on various devices

Video Tutorial

Source Codes

index.html

<!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">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="styles.css">
    <title>signin-signup</title>
</head>
<body>
    <div class="container">
        <div class="signin-signup">
            <form action="" class="sign-in-form">
                <h2 class="title">Sign in</h2>
                <div class="input-field">
                    <i class="fas fa-user"></i>
                    <input type="text" placeholder="Username">
                </div>
                <div class="input-field">
                    <i class="fas fa-lock"></i>
                    <input type="password" placeholder="Password">
                </div>
                <input type="submit" value="Login" class="btn">
                <p class="social-text">Or Sign in with social platform</p>
                <div class="social-media">
                    <a href="#" class="social-icon">
                        <i class="fab fa-facebook"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-google"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                </div>
                <p class="account-text">Don't have an account? <a href="#" id="sign-up-btn2">Sign up</a></p>
            </form>
            <form action="" class="sign-up-form">
                <h2 class="title">Sign up</h2>
                <div class="input-field">
                    <i class="fas fa-user"></i>
                    <input type="text" placeholder="Username">
                </div>
                <div class="input-field">
                    <i class="fas fa-envelope"></i>
                    <input type="text" placeholder="Email">
                </div>
                <div class="input-field">
                    <i class="fas fa-lock"></i>
                    <input type="password" placeholder="Password">
                </div>
                <input type="submit" value="Sign up" class="btn">
                <p class="social-text">Or Sign in with social platform</p>
                <div class="social-media">
                    <a href="#" class="social-icon">
                        <i class="fab fa-facebook"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-google"></i>
                    </a>
                    <a href="" class="social-icon">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                </div>
                <p class="account-text">Already have an account? <a href="#" id="sign-in-btn2">Sign in</a></p>
            </form>
        </div>
        <div class="panels-container">
            <div class="panel left-panel">
                <div class="content">
                    <h3>Member of Brand?</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque accusantium dolor, eos incidunt minima iure?</p>
                    <button class="btn" id="sign-in-btn">Sign in</button>
                </div>
                <img src="signin.svg" alt="" class="image">
            </div>
            <div class="panel right-panel">
                <div class="content">
                    <h3>New to Brand?</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque accusantium dolor, eos incidunt minima iure?</p>
                    <button class="btn" id="sign-up-btn">Sign up</button>
                </div>
                <img src="signup.svg" alt="" class="image">
            </div>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

styles.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #444;
}
.container {
    position: relative;
    width: 70vw;
    height: 80vh;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.container::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, #df4adf, #520852);
    z-index: 6;
    transform: translateX(100%);
    transition: 1s ease-in-out;
}
.signin-signup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 5;
}
form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 40%;
    min-width: 238px;
    padding: 0 10px;
}
form.sign-in-form {
    opacity: 1;
    transition: 0.5s ease-in-out;
    transition-delay: 1s;
}
form.sign-up-form {
    opacity: 0;
    transition: 0.5s ease-in-out;
    transition-delay: 1s;
}
.title {
    font-size: 35px;
    color: #df4adf;
    margin-bottom: 10px;
}
.input-field {
    width: 100%;
    height: 50px;
    background: #f0f0f0;
    margin: 10px 0;
    border: 2px solid #df4adf;
    border-radius: 50px;
    display: flex;
    align-items: center;
}
.input-field i {
    flex: 1;
    text-align: center;
    color: #666;
    font-size: 18px;
}
.input-field input {
    flex: 5;
    background: none;
    border: none;
    outline: none;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    color: #444;
}
.btn {
    width: 150px;
    height: 50px;
    border: none;
    border-radius: 50px;
    background: #df4adf;
    color: #fff;
    font-weight: 600;
    margin: 10px 0;
    text-transform: uppercase;
    cursor: pointer;
}
.btn:hover {
    background: #c03cc0;
}
.social-text {
    margin: 10px 0;
    font-size: 16px;
}
.social-media {
    display: flex;
    justify-content: center;
}
.social-icon {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
    border: 1px solid #444;
    border-radius: 50px;
    margin: 0 5px;
}
a {
    text-decoration: none;
}
.social-icon:hover {
    color: #df4adf;
    border-color: #df4adf;
}
.panels-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 35%;
    min-width: 238px;
    padding: 0 10px;
    text-align: center;
    z-index: 6;
}
.left-panel {
    pointer-events: none;
}
.content {
    color: #fff;
    transition: 1.1s ease-in-out;
    transition-delay: 0.5s;
}
.panel h3 {
    font-size: 24px;
    font-weight: 600;
}
.panel p {
    font-size: 15px;
    padding: 10px 0;
}
.image {
    width: 100%;
    transition: 1.1s ease-in-out;
    transition-delay: 0.4s;
}
.left-panel .image,
.left-panel .content {
    transform: translateX(-200%);
}
.right-panel .image,
.right-panel .content {
    transform: translateX(0);
}
.account-text {
    display: none;
}
/*Animation*/
.container.sign-up-mode::before {
    transform: translateX(0);
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
    transform: translateX(200%);
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
    transform: translateX(0);
}
.container.sign-up-mode form.sign-in-form {
    opacity: 0;
}
.container.sign-up-mode form.sign-up-form {
    opacity: 1;
}
.container.sign-up-mode .right-panel {
    pointer-events: none;
}
.container.sign-up-mode .left-panel {
    pointer-events: all;
}
/*Responsive*/
@media (max-width:779px) {
    .container {
        width: 100vw;
        height: 100vh;
    }
}
@media (max-width:635px) {
    .container::before {
        display: none;
    }
    form {
        width: 80%;
    }
    form.sign-up-form {
        display: none;
    }
    .container.sign-up-mode2 form.sign-up-form {
        display: flex;
        opacity: 1;
    }
    .container.sign-up-mode2 form.sign-in-form {
        display: none;
    }
    .panels-container {
        display: none;
    }
    .account-text {
        display: initial;
        margin-top: 30px;
    }
}
@media (max-width:320px) {
    form {
        width: 90%;
    }
}

app.js

const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
const sign_in_btn2 = document.querySelector("#sign-in-btn2");
const sign_up_btn2 = document.querySelector("#sign-up-btn2");
sign_up_btn.addEventListener("click", () => {
    container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
    container.classList.remove("sign-up-mode");
});
sign_up_btn2.addEventListener("click", () => {
    container.classList.add("sign-up-mode2");
});
sign_in_btn2.addEventListener("click", () => {
    container.classList.remove("sign-up-mode2");
});

Don’t forget to Subscribe to our YouTube Channel for more.