Popup Registration Form Javascript | Create A Popup Form In Html

Popup Registration Form Javascript | Create A Popup Form In Html

Popup Registration Form Javascript | Create A Popup Form In Html



Welcome🎉 to Code With Random blog. In this blog, we learn how we create Popup Registration Form Javascript. We use HTML, Css, and javascript for this Popup Registration Form Javascript. I hope you enjoy our blog so let's start with a basic HTML structure for the Popup Registration Form Javascript.

HTML Code

 <script src="https://kit.fontawesome.com/f9275dded9.js" crossorigin="anonymous"></script>  
 <!--Trigger-->  
 <a class="login-trigger" href="#" data-target="#login" data-toggle="modal">Login/Register</a>  
 <div id="login" class="modal fade" role="dialog">  
  <div class="modal-dialog">  
   <div class="modal-content">  
    <div class="modal-body">  
     <button data-dismiss="modal" class="close">&times;</button>  
     <div class="container" id="container">  
                               <div class="form-container sign-up-container">  
                                    <form action="#">  
                                         <h1>Create Account</h1>  
                                         <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-plus-g"></i></a>  
                                              <a href="#" class="social"><i class="fab fa-linkedin-in"></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>  
                               <div class="form-container sign-in-container">  
                                    <form action="#">  
                                         <h1>Sign in</h1>  
                                         <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-plus-g"></i></a>  
                                              <a href="#" class="social"><i class="fab fa-linkedin-in"></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>  
                               <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>  
    </div>  
   </div>  
  </div>   
 </div>  
There is all the HTML code for the Popup Registration Form Javascript. Now, you can see an output with Popup Registration Form Javascript then we write javascript for Popup Registration Form Javascript.
output
Popup Registration Form Javascript | Create A Popup Form In Html

CSS code

 body{  
  /*height: 100vh;*/  
  /*text-align: center;*/  
 }  
  /*Trigger Button*/  
 .login-trigger {  
  font-weight: bold;  
  color: #fff;  
  background: linear-gradient(to bottom right, #B05574, #F87E7B);  
  padding: 15px 30px;  
  border-radius: 30px;  
  position: relative;   
 }  
 /*Modal*/  
 .close {  
  color: #fff;  
  transform: scale(1.2)  
 }  
 .modal-content {  
  background: linear-gradient(to bottom right,#F87E7B,#B05574);  
 }  
 .modal-body {  
  position: relative;  
  padding:   
 }  
 @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');  
 * {  
      box-sizing: border-box;  
 }  
 body {  
      background: #d5b4b4;  
      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 #FF4B2B;  
      background-color: #FF4B2B;  
      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: #FF416C;  
      background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);  
      background: linear-gradient(to right, #FF4B2B, #FF416C);  
      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;  
 }  
Css Updated output

Popup Registration Form Javascript | Create A Popup Form In Html

Javascript code

 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");  
 });  
Final output


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Popup Registration Form Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Popup Registration Form Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

3 Comments

  1. its not working for me
    I mean its working but not in the right way
    can u help me

    ReplyDelete
  2. there's no code in your javascript file that allows content to be displayed only when login/register button is pressed
    how are u managing that in the video?

    ReplyDelete

Post a Comment

Previous Post Next Post