You are currently viewing How to Create Popup Form Using HTML & JavaScript?

How to Create Popup Form Using HTML & JavaScript?

Telegram Group Join Now

Create Popup Registration Form Using HTML & JavaScript

 
Create Popup Registration Form Using HTML & JavaScript
Create Popup Registration Form Using HTML & JavaScript

 

 

Welcome to the Codewithrandom blog. In this blog, We learn how to create a Popup Registration Form Using Html, Css, and JavaScript.there’s a button on the website Login/Register, and when you Click Form Popup and you can enter your details.

We use Html for creating a complete form and then use Css for styling the Popup Registration Form. We add JavaScript for this Popup Form Functionality so someone clicks on Login/Register Popup Registration Form Open.

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

Code by Jeevan Jyoti Dash
Project Download Link Available Below
Language used HTML , CSS and JavaScript
External link / Dependencies No
Responsive No
Popup Registration Form Table

I hope you enjoy our blog so let’s start with a basic Html Structure for the Popup Registration Form.

HTML Code For Popup Registration Form

<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. Now, you can see output without Css and JavaScript Code. then we write Css for styling the Popup Registration Form and write JavaScript for Main Functionality.

Ecommerce Website Using Html Css And Javascript Source Code

Only Html Code Output

 
Create Popup Registration Form Using HTML & JavaScript
Create Popup Registration Form Using HTML & JavaScript

CSS Code For Popup Registration Form

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;
}

Portfolio Website using HTML and CSS (Source Code)

HTML + CSS updated Output


 
 Popup Registration Form Using HTML & JavaScript
Popup Registration Form Using HTML & JavaScript

 

JavaScript Code For Popup Registration Form

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 Of Popup Registration Form JavaScript

 
 Popup Registration Form Using HTML & JavaScript
Popup Registration Form Using HTML & JavaScript

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Now that we have completed our Popup Registration Form. Here is our updated output with Html, Css, and JavaScript. Hope you like the Popup Registration Form Project. 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 Using HTML & 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
Code by – Jeevan Jyoti Dash

Which code editor do you use for this Popup Registration Form coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

No! this is Not a responsive project

Do you use any external links to create this project?

Yes!

Telegram Group Join Now

This Post Has 3 Comments

  1. Anonymous

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

  2. Anonymous

    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?

  3. Anonymous

    not working

Leave a Reply