Hello viewers, Today in this blog you’ll learn how to create a Popup Subscription Form or Modal Box HTML this is certainly using CSS Javascript. Early in the day i've provided a little Working Awesome Calculator using HTML CSS & jQuery, now it’s time and energy to develop a Popup Email Subscription Form.
 |
| Popup Subscription Form using HTML CSS & Javascript |
A contact membership can be an choice for a site which allows visitors to get news and revisions through email by indicating their particular mail details within a membership form.
This may be a Popup Email Subscription Form based on HTML CSS & Javascript as you can see in the image. In the beginning, there clearly was merely a button shown all the same when you clicked in that button then this membership form shall appear. There exists a smooth sliding effect too that’ means once you clicked regarding the option this type will slide through the part that is top.
If you’re experience difficult to determine what i'm saying. You can view videos that is full on this system (Popup Subscription Form).
Video Tutorial of Popup Subscription Form utilizing Javascript
Coming Soon...
Then you can additionally produce this sort of membership form, modal script keepers if you’re a novice and now have some basic information about HTML & CSS. You need to use this membership that is popup on your own internet sites, jobs, and everywhere you need.
If you prefer this scheduled program(Popup Subscription Form) and would like to get supply codes. You can easily obtain the supply codes of the planned program(Popup Email Subscription Form). To get the supply codes you just need certainly to scroll down. And, I believe this planned program will help you a great deal.
Popup Subscription Form or Modal Dialog Box [Source Codes]
To create this planned program(Popup Subscription Form). Very first, you'll want to create two Files one HTML File and another one is CSS File. After producing these files simply paste the rules that are after your file.
First, develop an HTML file using the real name of index.html and paste the given rules in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingWang -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sliding Modal Box Style</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<body>
<div class="start-btn">
<a href="#">View Modal</a>
</div>
<div class="center modal-box">
<div class="fas fa-times"></div>
<div class="fas fa-envelope icon1"></div>
<header>Don't miss updates from us!</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, suscipit, pers
</p>
<form action="">
<div class="fas fa-envelope icon2"></div>
<input type="email" required placeholder="abc@example.com">
<button>Subscribe</button>
</form>
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
<script>
$(document).ready(function(){
$('.start-btn').click(function(){
$('.modal-box').toggleClass("show-modal");
$('.start-btn').toggleClass("show-modal");
});
$('.fa-times').click(function(){
$('.modal-box').toggleClass("show-modal");
$('.start-btn').toggleClass("show-modal");
});
});
</script>
</body>
</html>Second, create a CSS file using the true title of style.css and paste the offered codes in your CSS file. Keep in mind, you’ve to produce a file with .css extension.
@import url('https://fonts.googleapis.com/css?family=Lobster+Two:700|Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
text-align: center;
background: #d90000;
font-family: 'Poppins',sans-serif;
}
::selection{
color: white;
background: #d90000;
}
.center,.start-btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.start-btn a{
font-size: 25px;
background: white;
color: #d90000;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
box-shadow: 5px 5px 15px rgba(0,0,0,.1);
}
.modal-box{
top: 40%;
opacity: 0;
visibility: hidden;
background: white;
height: auto;
width: 400px;
padding: 30px;
border-radius: 5px;
border: 1px solid #d90000;
box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.start-btn.show-modal{
opacity: 0;
visibility: hidden;
}
.modal-box.show-modal{
top: 50%;
opacity: 1;
visibility: visible;
transition: .4s;
}
.modal-box .fa-times{
position: absolute;
top: 0;
right: 0;
background: #d90000;
height: 45px;
width: 50px;
line-height: 40px;
color: white;
font-size: 18px;
border-radius: 0 5px 0 50px;
padding-left: 13px;
cursor: pointer;
}
.fa-times:hover{
font-size: 22px;
}
.modal-box .icon1{
font-size: 60px;
background: #d90000;
height: 120px;
width: 120px;
color: white;
border-radius: 50%;
line-height: 120px;
text-align: center;
margin-bottom: 10px;
}
.modal-box header{
font-size: 31px;
font-family: 'Lobster Two';
margin-bottom: 10px;
}
.modal-box p{
/* margin-bottom: 10px; */
line-height: 20px;
color: grey;
}
form input, form button{
height: 50px;
width: 95%;
border-radius: 3px;
}
form .icon2{
position: absolute;
height: 50px;
width: 50px;
margin-top: 15px;
background: #d90000;
color: white;
line-height: 50px;
font-size: 24px;
border-radius: 5px 0 0 5px;
}
form input{
margin-top: 15px;
padding: 0 65px;
font-size: 18px;
outline: none;
border: 2px solid #d90000;
caret-color: #d90000;
}
input::placeholder{
color: #8c8c8c;
}
form input:focus{
box-shadow: 0 0 15px #d90000,
0 0 25px #f10505a4,
0 0 35px #ffffff;
}
form button{
margin-top: 15px;
background: #d90000;
color: white;
font-size: 25px;
border: 1px solid #d90000;
letter-spacing: 1px;
cursor: pointer;
outline: none;
transition: .3s;
}
form button:hover{
background: #d90000;
border: 1px solid #d90000;
letter-spacing: 2px;
}
.modal-box .icons{
margin-top: 25px;
}
.icons i{
font-size: 22px;
margin: 0 7px;
color: #d90000;
cursor: pointer;
}
.icons i:hover{
transform: scale(1.1);
color: #d90000;
}That’s all, now you’ve successfully created a Popup Subscription Form HTML that is making use of CSS Javascript. Then kindly comment down or e mail us through the contact page if for example the rule maybe not work or you’ve experienced any error/problem.
Post a Comment