In this article we going to make login and registration form that pop up automatically after some time on page or window loads.
I have already shared a tutorial on how to make sliding login and registration forms using HTML & CSS. So, we are going to use that form (and make some changes) and make it appear automatically after some time(seconds) of page load.
You may have seen in many websites that when you visit, after some time (may be some seconds or half or 1 minute or more), the pop-up model that may be of signup form, newsletter subscription, some offers box or discount coupon etc, appears automatically.
In this article we are going to make a pop model of login and registration form using html css & javascript. You can make anything instead of forms. The main thing we are going to learn in this tutorial is how to show that form or whatever you made instead, automatic after some times of window loads.
Video Tutorial on Automatic Pop Up Form.
Automatic Login & Registration Form Pop Up on Page Loads.
As I said above, we are going to use the login and registration form that I have already shared in one of my previous blog posts. (Here is the tutorial and explanation of the login & registration form below).
Below is the full code of sliding login and registration form.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<div class="button_box">
<div class="slider_button"></div>
<button type="button" class="signup_button">Sign Up</button>
<button type="button" class="login_button">Login</button>
</div>
<div class="form_box">
<div class="form_slider">
<form action="#" class="signup_form">
<div class="input_field_box">
<div class="input_box">
<input type="text" required>
<label>Username</label>
</div>
<div class="input_box">
<input type="text" required>
<label>Email Id</label>
</div>
<div class="input_box">
<input type="text" required>
<label>Create Password</label>
</div>
<div class="input_box">
<input type="text" required>
<label>Confirm Password</label>
</div>
</div>
<p class="link">By creating an account you agree to our <a href="#">Terms and Conditions</a></p>
<button type="submit">Create Account</button>
<div class="contact_link">Need Help ? <a href="#">Contact Us</a></div>
</form>
<form action="#" class="login_form">
<div class="input_box">
<input type="text" required>
<label>Email Id</label>
</div>
<div class="input_box">
<input type="text" required>
<label>Password</label>
</div>
<p class="password_link"><a href="#">Forgot Password ?</a></p>
<button type="submit">Login</button>
<div class="contact_link">Need Help ? <a href="#">Contact Us</a></div>
</form>
</div>
</div>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(45deg, #a960ff, #ef60aa);
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 400px;
background-color: #fff;
padding: 15px 30px;
border-radius: 10px;
box-shadow: 0px 5px 50px -20px rgb(0 0 0);
}
.box .button_box{
width: 100%;
margin: 20px 0px;
display: flex;
position: relative;
}
.box .button_box .signup_button,
.box .button_box .login_button{
width: 50%;
padding: 10px 20px;
font-size: 25px;
font-weight: bold;
border: none;
background-color: transparent;
cursor: pointer;
transition: 0.6s;
}
.box .button_box .slider_button{
position: absolute;
width: 50%;
height: 100%;
background: linear-gradient(45deg , #1645c0 , #ed21e4);
z-index: -1;
border-radius: 5px;
left: 0px;
transition: all 0.4s cubic-bezier(0.150 , -0.100 , 0.700 , -0.500);
}
.box .form_box{
width: 100%;
height: 450px;
overflow: hidden;
position: relative;
}
.box .form_slider{
position: absolute;
width: 200%;
display: flex;
left: 0%;
transition: all 0.4s cubic-bezier(0.150 , -0.100 , 0.700 , -0.500);
}
.box .form_box form{
width: 100%;
margin: 0px 10px;
}
.box .form_box .login_form{
padding-top: 30px;
}
.form_box form .input_field_box{
height: 250px;
overflow-y: auto;
}
.form_box form .input_field_box::-webkit-scrollbar{
display: none;
}
.form_box form .input_box{
width: 100%;
margin: 30px 0px;
text-align: center;
position: relative;
}
.form_box form .input_box input{
width: 95%;
font-size: 25px;
padding: 8px 0px;
border-width: 0px 0px 2px 0px;
outline: none;
}
.form_box form .input_box label{
position: absolute;
left: 10px;
top: 10px;
font-size: 25px;
pointer-events: none;
color: #6d6d6d;
transition: 0.3s;
}
.form_box form .input_box input:focus,
.form_box form .input_box input:valid{
border-color: blue;
}
.form_box form .input_box input:focus + label,
.form_box form .input_box input:valid + label{
top: -16px;
font-size: 18px;
color: blue;
}
.form_box form .link,
.form_box form .contact_link{
font-size: 16px;
text-align: center;
margin: 20px 0px;
}
.form_box form .link a,
.form_box form .contact_link a{
color: blue;
text-decoration: none;
font-weight: bold;
}
.form_box form .password_link{
text-align: right;
margin: 20px 0px;
font-size: 20px;
}
.form_box form .password_link a{
text-decoration: none;
font-weight: bold;
color: blue;
}
.form_box form button{
width: 100%;
padding: 10px 25px;
font-size: 25px;
border: none;
background: linear-gradient(45deg , #1645c0 , #ed21e4);
color: #fff;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.form_box form button:active{
transform: scale3d(0.9 , 0.9 , 0.9);
}
JavaScript
<script>
let slider_button = document.querySelector(".slider_button");
let signup_button = document.querySelector(".signup_button");
let login_button = document.querySelector(".login_button");
let form_slider = document.querySelector(".form_slider");
signup_button.style.color = "#fff";
login_button.onclick = function () {
slider_button.style.left = "50%";
login_button.style.color = "#fff";
signup_button.style.color = "#000";
form_slider.style.left = "-100%";
}
signup_button.onclick = function () {
slider_button.style.left = "0%";
signup_button.style.color = "#fff";
login_button.style.color = "#000";
form_slider.style.left = "0%";
}
</script>
Output:
And here below is updated or changed design (html and css only, we add javascript later for pop up) of this login and registration form.
Some changes or updates:
- Added close button inside form box (class="close_button").
- Background with full width and height for form (class="signup_box").
- And also made some changes in the css file too.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="signup_box">
<div class="box">
<p class="close_button">+</p>
<div class="button_box">
<div class="slider_button"></div>
<button type="button" class="signup_button">Sign Up</button>
<button type="button" class="login_button">Login</button>
</div>
<div class="form_box">
<div class="form_slider">
<form action="#" class="signup_form">
<div class="input_field_box">
<div class="input_box">
<input type="text" required>
<label>Username</label>
</div>
<div class="input_box">
<input type="text" required>
<label>Email Id</label>
</div>
<div class="input_box">
<input type="text" required>
<label>Create Password</label>
</div>
<div class="input_box">
<input type="text" required>
<label>Confirm Password</label>
</div>
</div>
<p class="link">By creating an account you agree to our <a href="#">Terms and Conditions</a></p>
<button type="submit">Create Account</button>
<div class="contact_link">Need Help ? <a href="#">Contact Us</a></div>
</form>
<form action="#" class="login_form">
<div class="input_box">
<input type="text" required>
<label>Email Id</label>
</div>
<div class="input_box">
<input type="text" required>
<label>Password</label>
</div>
<p class="password_link"><a href="#">Forgot Password ?</a></p>
<button type="submit">Login</button>
<div class="contact_link">Need Help ? <a href="#">Contact Us</a></div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(45deg, #a960ff, #ef60aa);
position: relative;
}
.signup_box{
width: 100%;
height: 100vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: #ffffffef;
display: flex;
align-items: center;
justify-content: center;
}
.box{
width: 400px;
background-color: #fff;
padding: 15px 30px;
border-radius: 10px;
box-shadow: 0px 5px 50px -20px rgb(0 0 0);
transition: 0.2s;
}
.box .close_button{
font-size: 30px;
font-weight: bold;
float: right;
cursor: pointer;
rotate: 45deg;
}
.box .button_box{
width: 100%;
margin: 20px 0px;
display: flex;
position: relative;
}
.box .button_box .signup_button,
.box .button_box .login_button{
width: 50%;
padding: 10px 20px;
font-size: 25px;
font-weight: bold;
border: none;
background-color: transparent;
cursor: pointer;
transition: 0.6s;
}
.box .button_box .slider_button{
position: absolute;
width: 50%;
height: 100%;
background: linear-gradient(45deg , #1645c0 , #ed21e4);
z-index: -1;
border-radius: 5px;
left: 0px;
transition: all 0.4s cubic-bezier(0.150 , -0.100 , 0.700 , -0.500);
}
.box .form_box{
width: 100%;
height: 450px;
overflow: hidden;
position: relative;
}
.box .form_slider{
position: absolute;
width: 200%;
display: flex;
left: 0%;
transition: all 0.4s cubic-bezier(0.150 , -0.100 , 0.700 , -0.500);
}
.box .form_box form{
width: 100%;
margin: 0px 10px;
}
.box .form_box .login_form{
padding-top: 30px;
}
.form_box form .input_field_box{
height: 250px;
overflow-y: auto;
}
.form_box form .input_field_box::-webkit-scrollbar{
display: none;
}
.form_box form .input_box{
width: 100%;
margin: 30px 0px;
text-align: center;
position: relative;
}
.form_box form .input_box input{
width: 95%;
font-size: 25px;
padding: 8px 0px;
border-width: 0px 0px 2px 0px;
outline: none;
}
.form_box form .input_box label{
position: absolute;
left: 10px;
top: 10px;
font-size: 25px;
pointer-events: none;
color: #6d6d6d;
transition: 0.3s;
}
.form_box form .input_box input:focus,
.form_box form .input_box input:valid{
border-color: blue;
}
.form_box form .input_box input:focus + label,
.form_box form .input_box input:valid + label{
top: -16px;
font-size: 18px;
color: blue;
}
.form_box form .link,
.form_box form .contact_link{
font-size: 16px;
text-align: center;
margin: 20px 0px;
}
.form_box form .link a,
.form_box form .contact_link a{
color: blue;
text-decoration: none;
font-weight: bold;
}
.form_box form .password_link{
text-align: right;
margin: 20px 0px;
font-size: 20px;
}
.form_box form .password_link a{
text-decoration: none;
font-weight: bold;
color: blue;
}
.form_box form button{
width: 100%;
padding: 10px 25px;
font-size: 25px;
border: none;
background: linear-gradient(45deg , #1645c0 , #ed21e4);
color: #fff;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.form_box form button:active{
transform: scale3d(0.9 , 0.9 , 0.9);
}
JavaScript
<script>
let slider_button = document.querySelector(".slider_button");
let signup_button = document.querySelector(".signup_button");
let login_button = document.querySelector(".login_button");
let form_slider = document.querySelector(".form_slider");
signup_button.style.color = "#fff";
login_button.onclick = function () {
slider_button.style.left = "50%";
login_button.style.color = "#fff";
signup_button.style.color = "#000";
form_slider.style.left = "-100%";
}
signup_button.onclick = function () {
slider_button.style.left = "0%";
signup_button.style.color = "#fff";
login_button.style.color = "#000";
form_slider.style.left = "0%";
}
</script>
Output:
As you can see that the background and form are visible. But we only have to show it after a few seconds of page load.
So, let’s hide it. To hide and show the forms and background. We are going to add and remove separate classes to the forms (class=”box”) and background (class=”signup_box”).
First, we hide the form (class=”box”). I have also added the transform: scale(0.5) property because I want to make the form appear like a zoom out when it appears.
CSS
.box{
width: 400px;
background-color: #fff;
padding: 15px 30px;
border-radius: 10px;
box-shadow: 0px 5px 50px -20px rgb(0 0 0);
transform: scale(0.5);
opacity: 0;
pointer-events: none;
transition: 0.2s;
}
Creating seperate class (.active) to show the form. By adding this element with class=”box”, the form will visible.
CSS
.active{
transform: scale(1);
opacity: 1;
pointer-events: fill;
}
Output:
Now let’s hide background too.
CSS
.signup_box{
width: 100%;
height: 100vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: #ffffffef;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
}
Creating seperate class (signup_box_active) to show background when added in class="signup_box".
CSS
.signup_box_active{
opacity: 1;
pointer-events: fill;
}
Output:
JavaScript For Automatic Pop Up.
Adding javascript to add and remove that above newly created classes (.active & .signup_box_active) to show and hide form and background.
We are going to run a function onload event on the window. In that function we'll add the newly created class .active to box (form) and class signup_box_active to signup_box (background).
And we'll run another function on click on close button to close the pop up form. To close the form we'll remove the classes that we add in above function on onload function.
JavaScript
let signup_box = document.querySelector(".signup_box");
let box = document.querySelector(".box");
let close_button = document.querySelector(".close_button");
window.onload = function(){
setTimeout(() => {
signup_box.classList.add("signup_box_active");
box.classList.add("active");
}, 3000);
}
close_button.onclick = function(){
signup_box.classList.remove("signup_box_active");
box.classList.remove("active");
}
So that’s it. You'll be able to understand better if you see the video. You can see the demo in the above YouTube video.
You can add more things in this pop up model. That you can add functionality to close this form by clicking outside of it. Here is a tutorial in which I have shown how you can close the pop up box by clicking outside of it.
You may like:
Final code:
So that’s how you can create automatic pop-up modal or pop-up login and registration forms that pop up after some times of page loads. If you have any query or suggestion you can write in the comment section.
Share your thoughts.