Popup Registration Form Javascript | Create A Popup Form In Html
Tags: html, css, javascript, webdev
Published: 2022-05-08 06:36:07

https://www.codewithrandom.com/2022/05/popup-registration-form-javascript.html
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvpjutcsrddl1yy6e4l8.png)
In this blog, we will learn how to create Popup Registration Form using 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>  
```
[read more](https://www.codewithrandom.com/2022/05/popup-registration-form-javascript.html)