On a website, visitors can select an email subscription option to receive news and updates via email by entering their email addresses into a subscription form.
You can also make modal dialog boxes and subscription forms of this kind if you’re just starting out and know some HTML and CSS. This popup subscription form can be used on your projects, websites, and anywhere else.
To develop this application (Popup Subscription Form). To begin, you must create two files—one that is an HTML file and one that is a CSS file. Simply insert the following codes into your file after creating these files. First, copy and paste the given codes into an HTML file with the name index.html. Keep in mind that you need to make a file with the.html extension.
Index.html File
<!DOCTYPE HTML>
<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="[email protected]">
<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>Styles.css File
Create a file named styles.css and paste the following codes into it.
@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: #44d1ee;
font-family: 'Poppins',sans-serif;
}
::selection{
color: white;
background: #48DBFB;
}
.center,.start-btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.start-btn a{
font-size: 25px;
background: white;
color: #48DBFB;
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 #50dcfb;
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: #48DBFB;
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: #48DBFB;
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: #48DBFB;
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 #1ed2fa;
caret-color: #48DBFB;
}
input::placeholder{
color: #8c8c8c;
}
form input:focus{
box-shadow: 0 0 15px #82e6fc,
0 0 25px #b4f0fd,
0 0 35px #ffffff;
}
form button{
margin-top: 15px;
background: #48DBFB;
color: white;
font-size: 25px;
border: 1px solid #1ed2fa;
letter-spacing: 1px;
cursor: pointer;
outline: none;
transition: .3s;
}
form button:hover{
background: #1ed2fa;
border: 1px solid #05cdfa;
letter-spacing: 2px;
}
.modal-box .icons{
margin-top: 25px;
}
.icons i{
font-size: 22px;
margin: 0 7px;
color: #48DBFB;
cursor: pointer;
}
.icons i:hover{
transform: scale(1.1);
color: #05cdfa;
}That concludes your project on creating a Popup Subscription Form with HTML, CSS, and Javascript. In the event that your code not work or you’ve confronted any blunder/issue then, at that point, if it’s not too much trouble, remark down or reach us from the contact page.
