Responsive Login and Registration Form with Social Media Login Option in HTML, CSS and JavaScript

An elegant and easy to understand login and registration form is compulsory for any good website. A login and registration form that change its appearance according to the device’s screen size and increase the availability of social media login options will improve user experience in the login and registration processes on any device.

In this article, you will learn how to use, modify and create your own Responsive Login and Registration Form with Social Media Login Option in HTML, CSS, and JavaScript.

It is ready for any project or idea without having to worry about copyright issues.

GitHub Source: Responsive Login and Registration Form with Social Media Login Option

Features

Easy to Customize: The form layout and styling can be changed quickly without requiring the intervention of a web designer.
Compatible with All Modern CMS: This form is integration compatible with commonly used content management systems today.
Clean Code: It well-commented that enables other developers, as well as myself, to understand the code.

Technologies Used

HTML (Hypertext Markup Language)
CSS (Cascading Style Sheets)
JS (JavaScript)

Video Tutorial

Watch on YouTube

Steps to Build Form

Create Project Folder: The first step is to set up the project folder which will contain all the unique components of the project.
Create Images Folder: Now create images folder to place image assets to use in the form.
Create index.html: Create a new file that will be an html file where the structure of the form will be placed.
Create style.css: Include another link to the CSS file for styling your form and to make sure it’s responsive.
Create script.js: link a JavaScript file to the form so that it deals with form interactivity and form visibility.
Copy & Paste the Code: To easily integrate the use of it into this work, copy and paste the source code given below.

HTML

Here is the HTML code for your index.html file:

<!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/remixicon/4.2.0/remixicon.css">
      <link rel="stylesheet" href="styles.css">
      <title>Responsive login and registration form - JV Codes</title>
   </head>
   <body>
      <!--== LOGIN IMAGE ==-->
      <svg class="login__blob" viewBox="0 0 566 840" xmlns="http://www.w3.org/2000/svg">
         <mask id="mask0" mask-type="alpha">
            <path d="M342.407 73.6315C388.53 56.4007 394.378 17.3643 391.538 
            0H566V840H0C14.5385 834.991 100.266 804.436 77.2046 707.263C49.6393 
            591.11 115.306 518.927 176.468 488.873C363.385 397.026 156.98 302.824 
            167.945 179.32C173.46 117.209 284.755 95.1699 342.407 73.6315Z"/>
         </mask>
      
         <g mask="url(#mask0)">
            <path d="M342.407 73.6315C388.53 56.4007 394.378 17.3643 391.538 
            0H566V840H0C14.5385 834.991 100.266 804.436 77.2046 707.263C49.6393 
            591.11 115.306 518.927 176.468 488.873C363.385 397.026 156.98 302.824 
            167.945 179.32C173.46 117.209 284.755 95.1699 342.407 73.6315Z"/>
      
            <!-- Insert your image (recommended size: 1000 x 1200) -->
            <image class="login__img" href="images/bg-img.jpg"/>
         </g>
      </svg>      

      <!--== LOGIN ==-->
      <div class="login container grid" id="loginAccessRegister">
         <!--== LOGIN ACCESS ==-->
         <div class="login__access">
            <h1 class="login__title">Log in to your account.</h1>
            
            <div class="login__area">
               <form action="" class="login__form">
                  <div class="login__content grid">
                     <div class="login__box">
                        <input type="email" id="email" required placeholder=" " class="login__input">
                        <label for="email" class="login__label">Email</label>
            
                        <i class="ri-mail-fill login__icon"></i>
                     </div>
         
                     <div class="login__box">
                        <input type="password" id="password" required placeholder=" " class="login__input">
                        <label for="password" class="login__label">Password</label>
            
                        <i class="ri-eye-off-fill login__icon login__password" id="loginPassword"></i>
                     </div>
                  </div>
         
                  <a href="#" class="login__forgot">Forgot your password?</a>
         
                  <button type="submit" class="login__button">Login</button>
               </form>
      
               <div class="login__social">
                  <p class="login__social-title">Or login with</p>
      
                  <div class="login__social-links">
                     <a href="#" class="login__social-link">
                        <img src="images/icon-google.svg" alt="image" class="login__social-img">
                     </a>
      
                     <a href="#" class="login__social-link">
                        <img src="images/icon-facebook.svg" alt="image" class="login__social-img">
                     </a>
      
                     <a href="#" class="login__social-link">
                        <img src="images/icon-apple.svg" alt="image" class="login__social-img">
                     </a>
                  </div>
               </div>
      
               <p class="login__switch">
                  Don't have an account? 
                  <button id="loginButtonRegister">Create Account</button>
               </p>
            </div>
         </div>
         <div class="login__register">
            <h1 class="login__title">Create new account.</h1>

            <div class="login__area">
               <form action="" class="login__form">
                  <div class="login__content grid">
                     <div class="login__group grid">
                        <div class="login__box">
                           <input type="text" id="names" required placeholder=" " class="login__input">
                           <label for="names" class="login__label">Names</label>
      
                           <i class="ri-id-card-fill login__icon"></i>
                        </div>
      
                        <div class="login__box">
                           <input type="text" id="surnames" required placeholder=" " class="login__input">
                           <label for="surnames" class="login__label">Surnames</label>
      
                           <i class="ri-id-card-fill login__icon"></i>
                        </div>
                     </div>
   
                     <div class="login__box">
                        <input type="email" id="emailCreate" required placeholder=" " class="login__input">
                        <label for="emailCreate" class="login__label">Email</label>
   
                        <i class="ri-mail-fill login__icon"></i>
                     </div>
   
                     <div class="login__box">
                        <input type="password" id="passwordCreate" required placeholder=" " class="login__input">
                        <label for="passwordCreate" class="login__label">Password</label>
   
                        <i class="ri-eye-off-fill login__icon login__password" id="loginPasswordCreate"></i>
                     </div>
                  </div>
   
                  <button type="submit" class="login__button">Create account</button>
               </form>
   
               <p class="login__switch">
                  Already have an account? 
                  <button id="loginButtonAccess">Log In</button>
               </p>
            </div>
         </div>
      </div>
      <script src="main.js"></script>
   </body>
</html>

CSS

Here is the complete code for style.css file to style the form:

/*== JVCodes.Com ==*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap");

:root {
  /*== Colors ==*/
  --first-color: hsl(27, 100%, 50%);
  --first-color-alt: hsl(12, 88%, 50%);
  --title-color: hsl(220, 68%, 4%);
  --white-color: hsl(0, 0%, 100%);
  --text-color: hsl(220, 15%, 66%);
  --body-color: hsl(0, 0%, 100%);
  --container-color: hsl(220, 50%, 97%);

  /*== Font and typography ==*/
  --body-font: "Montserrat", system-ui;
  --big-font-size: 1.5rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --tiny-font-size: .688rem;

  /*== Font weight ==*/
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;

  /*== z index ==*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

/*== Responsive typography ==*/
@media screen and (min-width: 1150px) {
  :root {
    --big-font-size: 3rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --tiny-font-size: .75rem;
  }
}

/*== BASE ==*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body,
input,
button {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body {
  background-color: var(--body-color);
  color: var(--text-color);
}

input,
button {
  border: none;
  outline: none;
}

a {
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/*== REUSABLE CSS CLASSES ==*/
.container {
  max-width: 1120px;
  margin-inline: 1.5rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

/*== LOGIN  ==*/
.login {
  position: relative;
  height: 100vh;
  align-items: center;
  overflow: hidden;
}

.login__blob {
  display: none;
}

.login__title {
  font-size: var(--big-font-size);
  color: var(--title-color);
  text-align: center;
  margin-bottom: 2rem;
}

.login__box {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--container-color);
  border-radius: 1rem;
}

.login__input {
  background: none;
  width: 100%;
  padding: 1.5rem 2.5rem 1.5rem 1.25rem;
  font-weight: var(--font-semi-bold);
  border: 3px solid transparent;
  border-radius: 1rem;
  z-index: 1;
  transition: border-color .4s;
}

.login__input:autofill {
  transition: background-color 6000s, color 6000s;
}

.login__label {
  position: absolute;
  left: 1.25rem;
  font-weight: var(--font-semi-bold);
  transition: transform .4s, font-size .4s, color .4s;
}

.login__icon {
  position: absolute;
  right: 1rem;
  font-size: 1.25rem;
  transition: color .4s;
}

.login__password {
  cursor: pointer;
  z-index: 10;
}

.login__forgot {
  display: block;
  width: max-content;
  margin: 1rem 0 0 auto;
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--text-color);
  transition: color .4s;
}

.login__forgot:hover {
  color: var(--first-color);
}

.login__button {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  background-color: var(--first-color);
  color: var(--white-color);
  font-weight: var(--font-semi-bold);
  padding-block: 1.5rem;
  border-radius: 4rem;
  margin-block: 2rem;
  cursor: pointer;
  transition: background-color .4s, box-shadow .4s;
}

.login__button:hover {
  background-color: var(--first-color-alt);
  box-shadow: 0 8px 24px hsla(208, 92%, 32%, .3);
}

.login__social {
  margin-bottom: 2rem;
}

.login__social-title {
  text-align: center;
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
  margin-bottom: 1rem;
}

.login__social-img {
  width: 1.5rem;
}

.login__social-links {
  display: flex;
  justify-content: center;
  column-gap: 1.5rem;
  
}

.login__social-link {
  width: 32px;
  height: 32px;
  background-color: var(--body-color);
  box-shadow: 0 4px 8px hsla(0, 0%, 0%, .1);
  border-radius: .5rem;
  display: grid;
  place-items: center;
  transition: transform .4s;
}

.login__social-link:hover {
  transform: translateY(-.25rem);
}

.login__switch {
  text-align: center;
  font-size: var(--small-font-size);
}

.login__switch button {
  background: none;
  color: var(--first-color);
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  cursor: pointer;
  transition: color .4s;
}

.login__switch button:hover {
  color: var(--first-color-alt);
}

.login__access, 
.login__register {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  transition: transform .4s, opacity .4s .1s;
}

.login__register {
  transform: translateX(15rem);
  opacity: 0;
  pointer-events: none;
}

/* Input focus move up label */
.login__input:focus ~ .login__label {
  transform: translateY(-12px);
  font-size: var(--tiny-font-size);
}

.login__input:focus {
  padding-block: 2rem 1rem;
}

/* Input focus sticky top label */
.login__input:not(:placeholder-shown).login__input:not(:focus) ~ .login__label {
  transform: translateY(-12px);
  font-size: var(--tiny-font-size);
}

.login__input:not(:placeholder-shown).login__input:not(:focus) {
  padding-block: 2rem 1rem;
}

/* Input focus color */
.login__input:focus {
  border-color: var(--first-color);
}

.login__input:focus ~ .login__label,
.login__input:focus ~ .login__icon {
  color: var(--first-color);
}

/* Show hide login & create account */
.active .login__access {
  transform: translateX(15rem);
  opacity: 0;
  pointer-events: none;
}

.active .login__register {
  transform: translateX(0);
  opacity: 1;
  pointer-events: initial;
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
  .container {
    margin-inline: 1rem;
  }
}

/* For medium devices */
@media screen and (min-width: 540px) {
  .login__area {
    width: 380px;
    margin-inline: auto;
  }
}

@media screen and (min-width: 350px) and (max-height: 600px) {
  .login {
    height: 760px;
  }
}

/* For large devices */
@media screen and (min-width: 1040px) {
  .container {
    margin-inline: auto;
  }

  .login__area {
    width: 460px;
    margin: initial;
  }
  .login__access, 
  .login__register {
    width: 600px;
  }
  .login__title {
    text-align: initial;
    margin-bottom: 3rem;
  }
  .login__button {
    margin-bottom: 3rem;
  }
  .login__group {
    grid-template-columns: repeat(2, 1fr);
  }
  .login__blob {
    display: block;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
  }
  .login__img {
    transform: translate(0rem, 0rem);
  }
}

JavaScript

Here is the complete code for script.js file to function the form:

/*== SHOW HIDE PASSWORD LOGIN ==*/
const passwordAccess = (loginPass, loginEye) =>{
   const input = document.getElementById(loginPass),
         iconEye = document.getElementById(loginEye)

   iconEye.addEventListener('click', () =>{
      // Change password to text
      input.type === 'password' ? input.type = 'text'
						              : input.type = 'password'

      // Icon change
      iconEye.classList.toggle('ri-eye-fill')
      iconEye.classList.toggle('ri-eye-off-fill')
   })
}
passwordAccess('password','loginPassword')

/*== SHOW HIDE PASSWORD CREATE ACCOUNT ==*/
const passwordRegister = (loginPass, loginEye) =>{
   const input = document.getElementById(loginPass),
         iconEye = document.getElementById(loginEye)

   iconEye.addEventListener('click', () =>{
      // Change password to text
      input.type === 'password' ? input.type = 'text'
						              : input.type = 'password'

      // Icon change
      iconEye.classList.toggle('ri-eye-fill')
      iconEye.classList.toggle('ri-eye-off-fill')
   })
}
passwordRegister('passwordCreate','loginPasswordCreate')

/*== SHOW HIDE LOGIN & CREATE ACCOUNT ==*/
const loginAcessRegister = document.getElementById('loginAccessRegister'),
      buttonRegister = document.getElementById('loginButtonRegister'),
      buttonAccess = document.getElementById('loginButtonAccess')

buttonRegister.addEventListener('click', () => {
   loginAcessRegister.classList.add('active')
})

buttonAccess.addEventListener('click', () => {
   loginAcessRegister.classList.remove('active')
})

Download Source Code

Get the full source code of this project below without any form of copyright infringement. This makes it possible for you to incorporate the code right into your project free from any limitation.

Download the complete source code by clicking the button below:

Download Source Code

Conclusion

Implementing this Universal Responsive Login & Registration form with social login integration will definitely improve the usability of your website. Kindly provide some credit to JV Source Codes by linking back which is good for SEO as well.

To see more useful videos, hit the Subscribe button, and don’t hesitate to type a comment — I will respond to each of them!

Responsive Masonry Image Gallery in HTML and CSS

Product Card in HTML and CSS

Infinite Autoplay Slider in HTML and CSS

Popup Image Gallery in HTML, CSS and JavaScript

Leave a Reply Cancel reply

Contact us

Lets Get in Touch

Headquarters

Our services

Company

Features

Technologies Used

Video Tutorial

Steps to Build Form

HTML

CSS

JavaScript

Download Source Code

Conclusion

Similar Posts

Leave a Reply Cancel reply

Contact us

Lets Get in Touch

Headquarters

Our services

Company