In this tutorial we’re going to learn how to create a cool switchable signup and login form using html css and javascript
🔗Prerequisites
🔗Get started ✌
The switchable signup and login form we’ll build in this tutorial will be pretty cool. a user can switch a form by clicking button
I’ll explain how to build each project, but you must follow along by typing the code and running it on your end to get the most out of this tutorial
Click here to get starter files
🔗Add google font cdn
We’ll use roboto font family in this project for that we have to include cdn of roboto google font
css<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"rel="stylesheet" />
🔗create switch system with simple content
Markup of switchs and switch-container
html<!-- form switch links start --><div class="switchs"><!-- calling openForm function onclick and passing event, and id of as a argument --><button class="switchlink">Sign Up</button><button class="switchlink">Log In</button></div><!-- form switch links end --><!-- switch content container start --><div class="switch-container"><div id="SignUp" class="switchcontent"><h1 class="title">Sign Up for Free</h1></div><div id="LogIn" class="switchcontent"><h1 class="title">Welcome Back!</h1></div></div><!-- switch content container end -->
🔗Let’s add styling
Basic styling
css* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Roboto", sans-serif;}body {background: #3c3232;}
Css for styling switch system
css/* switch system start *//* css for styling the switchs */.switchs {overflow: hidden;border: 1px solid #ccc;background-color: #f1f1f1;width: max-content;position: absolute;right: 2rem;top: 2rem;border-radius: 2rem;}/* css for styling the switchlink buttons */.switchlink {background-color: inherit;float: left;border: none;outline: none;cursor: pointer;padding: 10px 12px;transition: 0.3s;}/* Change background color of switchlink buttons on hover */.switchlink:hover {background-color: #ddd;}/* Create an active/current switchlink class */.switchlink.active {background-color: #ccc;}/* adding margin to center a switch content */.switch-container {margin: 20% 15% auto 15%;}/* Style the switchcontent */.switchcontent {display: none;padding: 6px 12px;border-top: none;}/* fade effect animation on switchcontent */.switchcontent {animation: fadeEffect 1s; /* Fading effect takes 1 second */}/* Go from zero to full opacity */@keyframes fadeEffect {from {opacity: 0;}to {opacity: 1;}}/* styling title */.title {margin-bottom: 3rem;color: #eee;font-size: 2.5rem;}/* switch system end */
- In above css code we defined styling for switchs div container , switchlink buttons
- Hide All
<div>
elements with class="switchcontent" by default with CSS - Defined fade effect animation on switchcontent
- Created active / current switchlink class which we’ll use in javascript function to add to the button that opened the switchcontent form
🔗Let’s start building feature to open form based on formName
We can open form based on fornName using getElementById see below
As you can see above we getting form content based on fornName but we don’t want to do it manually we want to open form dynamically for that we can create function which open form based on formName value
🔗Create function to open form dynamically based on formName
- target element with the id
"forName"
parameter which is , we getting from the button onclick then show the content of current button - add
"active"
class to the button that opened the switchcontent
js/* function to open form based on formName */function openForm(evt, formName) {document.getElementById(formName).style.display = "block";evt.currentTarget.className += " active";}
In above code we created function openForm and passsing evt and fornName as a parameter
- When function call on onclick button it will open the form that "matches" this button
- Adding active class to the button that opened the switchcontent form
Call function onclick button and pass event and value of id of each button (update markup of switchlink element as follows )
html<button class="switchlink" onclick="openForm(event, 'SignUp')">Sign Up</button><button class="switchlink" onclick="openForm(event, 'LogIn')">Log In</button>
As you can see above it’s working as expected it’ll opening form based on formName and adding active class to the button that opened the switchcontent form but there is something wrong
We want to hide all form content and remove active class from all buttons on call function and only show the content of current switchlink when the formName match the id of form and add an "active" class to the button that opened the switchcontent form using event currentTarget.className
We can do that by using for loop
- oncall function hide all elements with class="switchcontent"
- remove the class "active"from all button elements with class="switchlink"
js// Declare all variablesvar i, switchcontent, switchlinks;// Get all elements with class="switchcontent" and hide them using for loopswitchcontent = document.getElementsByClassName("switchcontent");for (i = 0; i < switchcontent.length; i++) {switchcontent[i].style.display = "none";}// Get all button elements with class="switchlink" and remove the class "active" for loopswitchlinks = document.getElementsByClassName("switchlink");for (i = 0; i < switchlinks.length; i++) {switchlinks[i].className = switchlinks[i].className.replace(" active", "");}
See below it’s working perfect
Show form by default To open a specific form on page load, use JavaScript to "click" on the specified switch button:
js// show default formdocument.getElementById("defaultOpen").click();
In above javascript code we used click() method to simulates a mouse-click on an element. Let’s define defaultOpen id to the any one button
js<button class="switchlink" onclick="openForm(event, 'SignUp')" id="defaultOpen"> Sign Up</button><button class="switchlink" onclick="openForm(event, 'LogIn')">Log In</button>
Final javascript code
js/* function to open form based on formName */function openForm(evt, formName) {// Declare all variablesvar i, switchcontent, switchlinks;// Get all elements with class="switchcontent" and hide them using for loopswitchcontent = document.getElementsByClassName("switchcontent");for (i = 0; i < switchcontent.length; i++) {switchcontent[i].style.display = "none";}// Get all button elements with class="switchlink" and remove the class "active" for loopswitchlinks = document.getElementsByClassName("switchlink");for (i = 0; i < switchlinks.length; i++) {switchlinks[i].className = switchlinks[i].className.replace(" active", "");}document.getElementById(formName).style.display = "block";evt.currentTarget.className += " active";}// show default formdocument.getElementById("defaultOpen").click();
🔗Let’s create sign up and login form
Markup of sign up and login form
(update switch content container as follows )
html<!-- switch content container start --><div class="switch-container"><!-- sign up form start --><div id="SignUp" class="switchcontent"><h1 class="title">Sign Up for Free</h1><form action="/" method="post"><div class="field-wrap"><input type="text" id="name" required autocomplete="off" /><label for="name">Full Name</label></div><div class="field-wrap"><input type="email" id="email" required autocomplete="off" /><label for="email">Email Address</label></div><div class="field-wrap"><input type="password" id="password" required autocomplete="off" /><label for="password">Set A Password</label></div><button type="submit" class="actionbtn" />Get Started</button></form></div><!-- sign up form end --><!-- login form start --><div id="LogIn" class="switchcontent"><h1 class="title">Welcome Back!</h1><form action="/" method="post"><div class="field-wrap"><input type="email" id="signInEmail" required autocomplete="off" /><label for="signInEmail">Email Address</label></div><div class="field-wrap"><input type="password" id="signInPswd" required autocomplete="off" /><label for="signInPswd">Password</label></div><p class="forgot"><a href="#">Forgot Password?</a></p><button class="actionbtn" />Log In</button></form></div><!-- login form end --></div><!-- switch content container end -->
Styling sign up and login form
css/* sign up and login form start *//* styling field-wrap div */.field-wrap {position: relative;height: 5rem;line-height: 44px;}/* css for label */label {position: absolute;top: 0;left: 0;width: 100%;color: #d3d3d3;transition: 0.2s all;cursor: text;font-size: 1.2rem;}/* css for input field */input {width: 100%;border: 0;outline: 0;padding: 0.5rem 0;border-bottom: 2px solid #6e6a6a;box-shadow: none;background-color: transparent;font-size: 1.5rem;color: #fff;}input:invalid {outline: 0;}input:focus,input:valid {border-color: #ccc;}/* css for forgot link */.forgot {margin: 1rem auto;font-size: 1rem;}.forgot a {color: #eee;text-decoration: none;font-size: italic;}/* css for action button */.actionbtn {padding: 0.7rem;margin-top: 1rem;width: 100%;font-size: 1.2rem;cursor: pointer;transition: all 0.5s ease;}.actionbtn:hover {background-color: #ccc;}
In above css code we defined styling for div element with class .field-wrap , label, forgot link , submit button
CSS for input animation
cssinput:focus ~ label,input:valid ~ label {font-size: 10px;top: -2rem;color: #ccc;}
In above css code we moving label to above the input field on focus and valid
CSS for input autofill
cssinput:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus {-webkit-text-fill-color: #fff;transition: background-color 5000s ease-in-out 0s;}
See the complete code at the end of this step
🔗Let’s create two column layout
Markup
(we want two column layout where in left side we insert image and right side switch form section )
We can create two column layout very easily by using grid First create container div and divide into 50% 50% (Two Column Layout) using grid
html<!-- div container start --><div class="container"><!-- left side div start --><div class="left"></div><!-- left side div end --><!-- right side div start--><div class="right"></div><!-- right side div end --></div><!-- div container end -->
Styling
css/* css for creating two column layout */.container {display: grid;height: 100vh;overflow: hidden;grid-template-columns: 50% 50%;}/* css for adding background image in left side */.left {background-color: #ffffff;background-image: url(Images/background.webp);background-repeat: no-repeat;background-size: cover;background-position: top;}/* css for setting background for right side div */.right {background: #3c3232;}
- In above css code we added image to left side div using background property
- Let’s move your switch link and switch content in right side div
Update html as follows
html<!-- div container start --><div class="container"><!-- left side div start --><div class="left"></div><!-- left side div end --><!-- right side div start--><div class="right"><!-- form switch links start --><div class="switchs"><button class="switchlink" onclick="openForm(event, 'SignUp')" id="defaultOpen"> Sign Up</button><button class="switchlink" onclick="openForm(event, 'LogIn')">Log In</button></div><!-- form switch links end --><!-- switch content container start --><div class="switch-container"><!-- sign up form start --><div id="SignUp" class="switchcontent"><h1 class="title">Sign Up for Free</h1><form action="/" method="post"><div class="field-wrap"><input type="text" id="name" required autocomplete="off" /><label for="name">Full Name</label></div><div class="field-wrap"><input type="email" id="email" required autocomplete="off" /><label for="email">Email Address</label></div><div class="field-wrap"><input type="password" id="password" required autocomplete="off" /><label for="password">Set A Password</label></div><button type="submit" class="actionbtn" />Get Started</button></form></div><!-- sign up form end --><!-- login form start --><div id="LogIn" class="switchcontent"><h1 class="title">Welcome Back!</h1><form action="/" method="post"><div class="field-wrap"><input type="email" id="signInEmail" required autocomplete="off" /><label for="signInEmail">Email Address</label></div><div class="field-wrap"><input type="password" id="signInPswd" required autocomplete="off" /><label for="signInPswd">Password</label></div><p class="forgot"><a href="#">Forgot Password?</a></p><button class="actionbtn" />Log In</button></form></div><!-- login form end --></div><!-- switch content container end --></div><!-- right side div end --></div><!-- div container end -->
But what about responsiveness
As you can see below it’s not responsive
CSS for responsiveness
css@media only screen and (max-width: 725px) {/* layout start */.container {display: grid;grid-template-columns: 100%;}.left {display: none;}/* layout end *//* switch system start */.switch-container {margin: 50% 5% auto 5%;}/* switch system end */}
Congratulation we have successfully created switchable singup and login form 🥳