Sign Up and Sign In Form Using HTML CSS and JS With Free Source Code
Introduction
In today’s digital age, when a user visits a website, his first impression is paramount; nothing strikes the tone better than a sleek and user-friendly authentication interface. Above is a modern dual-panel login and sign-up interface that strikes a clean balance between aesthetics and functionality.
On the left, it has returning users in mind, with a “Welcome Back!” soft gradient background that invites easy sign-in, while on the right, it allows new users to sign up easily with options for integration with social media.
In this post, we’ll break down the design principles behind this interface and discuss how one would implement said page using HTML, CSS, and JavaScript. Whether you’re a seasoned developer looking to reach that next level or just starting in the world of web design, this guide will give you a lot of insight on how to create a professional and polished authentication page for your next project.
index.html
This is the HTML document used for the user interface of a sliding sign-in and sign-up form. It will generate elements for registering a new user and for login, with social media icons for alternative sign-ins.
At the root lies a “container” div that holds three main parts: one for sign-up, one for sign-in, and the overlay panel. Both form sections include input fields where users should state their e-mail and password, and other details like name in the case of sign-up. Buttons exist for form submission, but in this provided code they don’t do anything but return a placeholder return false in the onclick attribute.
Social media icons link to Font Awesome. There is a log-in option, that links users through popular platforms like Instagram, Google, and TikTok.
The overlay panel provides a nice, smooth visual transition from the signin form into the signup form. There are two overlay panels: one for people who want to sign in and another for those who want to sign up. Each contains a friendly message and a button for switching forms.
Finally, when users click either the “Sign In” or “Sign Up” buttons on the overlay, a transition effect should be handled by the JavaScript code linked as `script.js`. This will make the form containers slide in and out of view.
The overall purpose of the code is to set up an interactive user-friendly form interface to enhance user experience by allowing smooth transitions between sign-in and sign-up processes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Sliding Sign In & Sign Up Form</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/08/post8-768x465.png 768w, https://developergoutam.com/wp-content/uploads/2024/08/post8-300x182.png 300w, https://developergoutam.com/wp-content/uploads/2024/08/post8-1024x620.png 1024w, https://developergoutam.com/wp-content/uploads/2024/08/post8-150x91.png 150w, https://developergoutam.com/wp-content/uploads/2024/08/post8-450x273.png 450w, https://developergoutam.com/wp-content/uploads/2024/08/post8-1200x727.png 1200w, https://developergoutam.com/wp-content/uploads/2024/08/post8.png 1202w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form>
<h1>Sign Up</h1>
<div class="social-container">
<a href="#" class="social"><i class="fab fa-instagram"></i></a>
<a href="#" class="social"><i class="fab fa-google"></i></a>
<a href="#" class="social"><i class="fab fa-tiktok"></i></a>
</div>
<span>or use your email for registration</span>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button onclick="return false;">Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form>
<h1>Sign In</h1>
<div class="social-container">
<a href="#" class="social"><i class="fab fa-instagram"></i></a>
<a href="#" class="social"><i class="fab fa-google"></i></a>
<a href="#" class="social"><i class="fab fa-tiktok"></i></a>
</div>
<span>or use your account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<a href="#">Forgot your password?</a>
<button onclick="return false;">Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>Please login with your personal info</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start your journey with us</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css
The overlay impact is managed by the .overlay-container, that’s positioned to cover the form containers. This container includes two panels, .overlay-panel, that slide in and out from opposite sides of the screen. The panels are styled with specific widths, background colors, and text alignments. They use CSS transitions on properties like transform and opacity to make sure the animations toggle between the signin and signup forms smoothly.
Transition Effects are a very important part of User Experience. Transition of movement of the panels is animated using CSS transitions of the classes .overlay-panel. Hence, wherever a JavaScript function manipulates the transform and opacity properties after a user clicked one of the buttons in transitioning from one form display to the next, it did a smooth slide in animation to make it pleasing to the eye.
Additional styling is applied to the buttons and social media icons within the forms. The .ghost class stylizes a button to present a more barebones approach with defined border and color properties to separate and emphasize it as a viable interaction. Social media icons, .social, are styled to have preset sizes and whitespace, thus fitting within the form, offering alternative ways of signing in using platforms like Instagram, Google, and TikTok.
As such, it incorporates layout technique, animations, and transitions in attaining an exciting and user-friendly sign-in and sign-up form interface.
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;800&display=swap");
:root {
--main-color: #6dd5ed;
--secondary-color: #2193b0;
--gradient: linear-gradient(
135deg,
var(--main-color),
var(--secondary-color)
);
}
* {
box-sizing: border-box;
}
body {
background: #f6f5f7;
font-family: "Nunito", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 1rem 0;
}
h1 {
font-weight: bold;
margin: 0;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #dddddd;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
cursor: pointer;
border-radius: 20px;
border: 1px solid var(--main-color);
background: var(--main-color);
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-out;
}
button:hover {
background: var(--secondary-color);
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #fff;
}
button.ghost:hover {
background: #fff;
color: var(--secondary-color);
}
form {
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
font-family: inherit;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
position: relative;
overflow: hidden;
height: 768px;
width: 480px;
max-width: 100%;
}
.form-container {
position: absolute;
top: 0;
width: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
top: 0;
height: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateY(100%);
}
.sign-up-container {
top: 0;
height: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateY(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
@keyframes show {
0%,
49.99% {
opacity: 0;
z-index: 1;
}
50%,
100% {
opacity: 1;
z-index: 5;
}
}
.overlay-container {
position: absolute;
left: 0;
top: 50%;
height: 50%;
width: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container {
transform: translateY(-100%);
}
.overlay {
background: var(--secondary-color);
background: var(--gradient);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #fff;
position: relative;
top: -100%;
width: 100%;
height: 200%;
transform: translateY(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateY(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
left: 0;
width: 100%;
height: 50%;
transform: translateY(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateY(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateY(0);
}
.overlay-right {
bottom: 0;
transform: translateY(0);
}
.container.right-panel-active .overlay-right {
transform: translateY(20%);
}
@media (min-width: 768px) {
body {
margin: -20px 0 50px;
}
.container {
width: 768px;
max-width: 100%;
height: 480px;
}
.form-container {
top: 0;
height: 100%;
width: 50%;
}
.sign-in-container {
left: 0;
width: 50%;
height: 100%;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
height: 100%;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
}
.overlay-container {
left: 50%;
top: 0;
height: 100%;
width: 50%;
}
.container.right-panel-active .overlay-container {
transform: translateX(-100%);
}
.overlay {
top: 0;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
top: 0;
left: 50%;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
}
script.js
Thus, it is a piece of JavaScript code to control the alternation of the displayed sign-in and sign-up forms merely by toggling their visibility. First, this code selects the sign-up, sign-in button, and the main container forms.
Event listeners for the button clicks are written as event listeners. If the user clicks the “Sign Up” button, then it adds the CSS class right-panel-active to the container, displaying the sign-up form; with a click on the “Sign In” button, this class is canceled and returns the view back to the form of sign in.
Basically, these class manipulations cause the code to implement the transition between the sign-in and sign-up forms smoothly, giving the user a better experience and a friendlier transition of an interactive form switch to the eye.
const signUpButton = document.getElementById("signUp");
const signInButton = document.getElementById("signIn");
const container = document.getElementById("container");
signUpButton.addEventListener("click", () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener("click", () => {
container.classList.remove("right-panel-active");
});