Responsive switchable sign up and login form

Aug,10th,2022

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 variables
var i, switchcontent, switchlinks;

// Get all elements with class="switchcontent" and hide them using for loop
switchcontent = 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 loop
switchlinks = 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 form
document.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 variables
  var i, switchcontent, switchlinks;

  // Get all elements with class="switchcontent" and hide them using for loop
  switchcontent = 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 loop
  switchlinks = 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 form
document.getElementById("defaultOpen").click();

(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 -->

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

css
input: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

css
input:-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 🥳

Download source code