Double Slider Sign in and Sign up Form in HTML, CSS and JavaScript
A sign-in and sign-up process is crucial for any website so creating the form that will look great and function properly is a task number one; and what could be better than using a two-slider form to perform both actions in one space-saving way?
In this article, I am sharing the full code for the Double Slider Sign In and Sign Up Form Design absolutely free. The form in this design is created with HTML, CSS, and JavaScript, to allow users to switch between signing in or signing up.
GitHub Source: Double Slider Sign in and Sign up Form
Features
The Double Slider Sign In and Sign Up Form has several impressive features, making it ideal for integrating into modern websites:
- Customization: You may change the background colors, text fonts, and styles to fit the rest of your webpage interface.
- Compatibility: Although developed with WordPress in mind, this form is compatible with most modern CMS.
- Undeniable Clarity: Source code is clean and is written along with full comments.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- JS (JavaScript)
Video Tutorial
Steps to Build Menu
- Create Project Folder – It may sound pretty simple but to minimize the confusion of files later on, it is advisable to create a folder in your computer where all documents related to the form will be placed.
- Make an HTML file – It is necessary to make HTML file called index.html, that will have the structure of the sign-in and sign-up form.
- Create style.css – This CSS file will be used to style the form and to insert the effects of animation.
- Make script.js – This file will include the JS code to deal with the slider.
- Use the Source Code Below – With this HTML form template, you save time as you don’t have to begin writing codes from scratch as the code is already provided and you can simply copy and paste for use.
HTML
Here is the HTML code for your index.html file:
<!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">
<title>Double Slider Sign in/Sign up Form | JV Codes</title>
<!-- Link to the CSS file -->
<link rel="stylesheet" href="style.css">
<!-- Link to Font Awesome for social icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<div class="container" id="container">
<!-- Sign-up form container -->
<div class="form-container sign-up-container">
<form action="#">
<h1>Create Account</h1>
<!-- Social media icons for Sign-up -->
<div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social"><i class="fab fa-github"></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>Sign Up</button>
</form>
</div>
<!-- Sign-in form container -->
<div class="form-container sign-in-container">
<form action="#">
<h1>Sign in</h1>
<!-- Social media icons for Sign-in -->
<div class="social-container">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social"><i class="fab fa-github"></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>Sign In</button>
</form>
</div>
<!-- Overlay container for toggle effect -->
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us 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 journey with us</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
<!-- Link to JavaScript file -->
<script src="script.js"></script>
</body>
</html>
CSS
Here is the complete code for style.css file to style the form:
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
* {
box-sizing: border-box;
}
body {
background: #f6f5f7;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100vh;
margin: -20px 0 50px;
}
h1 {
font-weight: bold;
margin: 0;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid #3996ff;
background-color: #3996ff;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
}
form {
background-color: #FFFFFF;
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%;
}
.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;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(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;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #136ffa;
background: -webkit-linear-gradient(to right, #014edf, #3996ff);
background: linear-gradient(to right, #014edf, #3996ff);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.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;
}
JavaScript
Here is the complete code for script.js file to function the form:
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");
});
Download Source Code
The source code for the Double Slider Sign In and Sign Up Form can be used without any worry of copyright violation. There is a download button below where you can download the code and then include it in your website to make an easy login experience.
Conclusion
This Double Slider Sign In and Sign Up Form in HTML and CSS is perfect for modern web projects and gives the opportunity to manage users effectively.
You are very welcome to use this code. You can credit JV Source Codes by linking back the source which will also be beneficial to you.
For more useful resources, make sure to subscribe our YouTube channel and if you have any question, please leave your question in the comment section, and I’ll be more than happy to explain.
