Responsive Login, Registration & Forgot Password Form Design Using Bootstrap 4 & jQuery

Share this post:

If you are a web developer, then you often required some kind of form on your website. And on those forms, the most widely used forms are the login, Registration, and Forgot Password form. So today in this post I'm going to show you how to design nice, elegant fully Responsive Login, Registration, & Forgot Password form using Bootstrap 4, jQuery, and FontAwesome.

Here I'll use most of the classes of Bootstrap 4 to make responsive forms. And I'll also use a few custom CSS properties in which I'll use a Google Font and also, I'll use some gradient colors.

I'll design three forms on the same page but by default, only the Login form will be visible and both others will be invisible. So, here I'll use jQuery to make other forms visible. I'm also using some FontAwesome Icons.

Okay now let's start designing these forms, so here I'll show you all the coding step by step:

Step 1: Create a project directory

In this step, we'll first create a project directory anywhere in your system. I'm creating in desktop. Let's name this directory responsive-login-registration or you can also keep any other name it's up to you. After creating the directory let's open this directory in your code editor and then just see the below image and make the project structure as you can see in the image below:

In the above image you can see I've created a CSS and js folder in the root of the project directory and in the CSS folder I've created a file style.css and in the js folder I've created a file script.js and I've also created an index.html file in the root of the project directory.

Step 2: Coding in Index.html page

If you have created all the files, then first, we'll code in the index.html file so open your index.html file and just copy the below code and paste into your file and save.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Login, Registration & Forgot Form Design</title>
    <!-- Bootstrap 4 CSS CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
    <!-- Fontawesome CSS CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body class="bg-info">
    <div class="container">
      <!-- Login Form Start -->
      <div class="row justify-content-center wrapper" id="login-box">
        <div class="col-lg-10 my-auto myShadow">
          <div class="row">
            <div class="col-lg-7 bg-white p-4">
              <h1 class="text-center font-weight-bold text-primary">Sign in to Account</h1>
              <hr class="my-3" />
              <form action="#" method="post" class="px-3" id="login-form">
                <div class="input-group input-group-lg form-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text rounded-0"><i class="far fa-envelope fa-lg fa-fw"></i></span>
                  </div>
                  <input type="email" id="email" name="email" class="form-control rounded-0" placeholder="E-Mail" required />
                </div>
                <div class="input-group input-group-lg form-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text rounded-0"><i class="fas fa-key fa-lg fa-fw"></i></span>
                  </div>
                  <input type="password" id="password" name="password" class="form-control rounded-0" minlength="5" placeholder="Password" required autocomplete="off" />
                </div>
                <div class="form-group clearfix">
                  <div class="custom-control custom-checkbox float-left">
                    <input type="checkbox" class="custom-control-input" id="customCheck" name="rem" />
                    <label class="custom-control-label" for="customCheck">Remember me</label>
                  </div>
                  <div class="forgot float-right">
                    <a href="#" id="forgot-link">Forgot Password?</a>
                  </div>
                </div>
                <div class="form-group">
                  <input type="submit" id="login-btn" value="Sign In" class="btn btn-primary btn-lg btn-block myBtn" />
                </div>
              </form>
            </div>
            <div class="col-lg-5 d-flex flex-column justify-content-center myColor p-4">
              <h1 class="text-center font-weight-bold text-white">Hello Friends!</h1>
              <hr class="my-3 bg-light myHr" />
              <p class="text-center font-weight-bolder text-light lead">Enter your personal details and start your journey with us!</p>
              <button class="btn btn-outline-light btn-lg align-self-center font-weight-bolder mt-4 myLinkBtn" id="register-link">Sign Up</button>
            </div>
          </div>
        </div>
      </div>
      <!-- Login Form End -->
      <!-- Registration Form Start -->
      <div class="row justify-content-center wrapper" id="register-box" style="display: none;">
        <div class="col-lg-10 my-auto myShadow">
          <div class="row">
            <div class="col-lg-5 d-flex flex-column justify-content-center myColor p-4">
              <h1 class="text-center font-weight-bold text-white">Welcome Back!</h1>
              <hr class="my-4 bg-light myHr" />
              <p class="text-center font-weight-bolder text-light lead">To keep connected with us please login with your personal info.</p>
              <button class="btn btn-outline-light btn-lg font-weight-bolder mt-4 align-self-center myLinkBtn" id="login-link">Sign In</button>
            </div>
            <div class="col-lg-7 bg-white p-4">
              <h1 class="text-center font-weight-bold text-primary">Create Account</h1>
              <hr class="my-3" />
              <form action="#" method="post" class="px-3" id="register-form">
                <div class="input-group input-group-lg form-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text rounded-0"><i class="far fa-user fa-lg fa-fw"></i></span>
                  </div>
                  <input type="text" id="name" name="name" class="form-control rounded-0" placeholder="Full Name" required />
                </div>
                <div class="input-group input-group-lg form-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text rounded-0"><i class="far fa-envelope fa-lg fa-fw"></i></span>
                  </div>
                  <input type="email" id="remail" name="email" class="form-control rounded-0" placeholder="E-Mail" required />
                </div>
                <div class="input-group input-group-lg form-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text rounded-0"><i class="fas fa-key fa-lg fa-fw"></i></span>
                  </div>
                  <input type="password" id="rpassword" name="password" class="form-control rounded-0" minlength="5" placeholder="Password" required />
                </div>
                <div class="input-group input-group-lg form-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text rounded-0"><i class="fas fa-key fa-lg fa-fw"></i></span>
                  </div>
                  <input type="password" id="cpassword" name="cpassword" class="form-control rounded-0" minlength="5" placeholder="Confirm Password" required />
                </div>
                <div class="form-group">
                  <div id="passError" class="text-danger font-weight-bolder"></div>
                </div>
                <div class="form-group">
                  <input type="submit" id="register-btn" value="Sign Up" class="btn btn-primary btn-lg btn-block myBtn" />
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- Registration Form End -->
      <!-- Forgot Password Form Start -->
      <div class="row justify-content-center wrapper" id="forgot-box" style="display: none;">
        <div class="col-lg-10 my-auto myShadow">
          <div class="row">
            <div class="col-lg-7 bg-white p-4">
              <h1 class="text-center font-weight-bold text-primary">Forgot Your Password?</h1>
              <hr class="my-3" />
              <p class="lead text-center text-secondary">To reset your password, enter the registered e-mail adddress and we will send you password reset instructions on your e-mail!</p>
              <form action="#" method="post" class="px-3" id="forgot-form">
                <div id="forgotAlert"></div>
                <div class="input-group input-group-lg form-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text rounded-0"><i class="far fa-envelope fa-lg"></i></span>
                  </div>
                  <input type="email" id="femail" name="email" class="form-control rounded-0" placeholder="E-Mail" required />
                </div>
                <div class="form-group">
                  <input type="submit" id="forgot-btn" value="Reset Password" class="btn btn-primary btn-lg btn-block myBtn" />
                </div>
              </form>
            </div>
            <div class="col-lg-5 d-flex flex-column justify-content-center myColor p-4">
              <h1 class="text-center font-weight-bold text-white">Reset Password!</h1>
              <hr class="my-4 bg-light myHr" />
              <button class="btn btn-outline-light btn-lg font-weight-bolder myLinkBtn align-self-center" id="back-link">Back</button>
            </div>
          </div>
        </div>
      </div>
      <!-- Forgot Password Form End -->
    </div>
    <!-- jQuery CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

You can see all the coding of the index.html file above. Now what I've done in this file is first you can see I've linked the Bootstrap 4 CSS CDN link, FontAwesome CSS CDN link, and also, I've linked my Custom style.css file inside the head tag. And then you can see I've designed all three forms on the same page but the registration and forgot password forms are not visible on the page because I've used display: none CSS property on both forms.

Step 3: Coding in style.css file

Let's code some custom CSS properties for all the forms. Just copy the below CSS codes and paste them into your style.css file and save.

@import url("https://fonts.googleapis.com/css?family=Maven+Pro:400,500,600,700,800,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Maven Pro", sans-serif;
}
.wrapper {
  height: 100vh;
}
.myColor {
  background-image: linear-gradient(to right, #f83600 50%, #f9d423 150%);
}
.myShadow {
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
}
.myBtn {
  border-radius: 50px;
  font-weight: bold;
  font-size: 20px;
  background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);
  border: none;
}
.myBtn:hover {
  background-image: linear-gradient(to right, #495aff 0%, #0acffe 100%);
}
.myHr {
  height: 2px;
  border-radius: 100px;
}
.myLinkBtn {
  border-radius: 100px;
  width: 50%;
  border: 2px solid #fff;
}
@media (max-width: 720px) {
  .wrapper {
    margin: 2px;
  }
}

In the above CSS codes, I've used Google font so at the top I've imported the font family. Now you can see all the codes are self-explanatory.

Step 4: Coding in script.js file

Now, this is an important step. Here We'll write jQuery codes to make the other forms visible and hide the other ones. So, for this first copy the codes of the script.js file from below and paste into your file and save.

$(function () {
  $("#register-link").click(function () {
    $("#login-box").hide();
    $("#register-box").show();
  });
  $("#login-link").click(function () {
    $("#login-box").show();
    $("#register-box").hide();
  });
  $("#forgot-link").click(function () {
    $("#login-box").hide();
    $("#forgot-box").show();
  });
  $("#back-link").click(function () {
    $("#login-box").show();
    $("#forgot-box").hide();
  });
});

Okay now, what here in this code I'm doing is you can see I've designed a Sign-Up button on the right side of the Login form. So, on this button, I'm using a click event by selecting the button using an id that is assigned in the index.html. So, when We click on the Sign-Up button then We are hiding the Login form and displaying the Registration form. Similarly, I've done all the button clicks.

Step 5: Output of the forms

So above you can see some screenshots of the forms. If you liked this post, then share this post with your friends. If you have any issues regarding this post then comment down your issues, I'll try to fix your issues as soon as possible. And if you want to learn more about Web Design & Development then you must visit my YouTube Channel.

Share this post: