Create Popup Subscription Form using CSS & Javascript

Create Popup Subscription Form, Having a mailing list of subscribed users is very important to get your users back to your website. Usually, people come to your website, read the post, and move on. If you post new content on your website, they may not return. So, having a list of subscribed users actually helps. when the user preferably visits your blog on your website, we pop-up a model subscription form on the window screen by clicking on subscribe button. If the visitors like your post, ask them to enter your email id and subscribe. In either case, if the user decides not to subscribe to your website mailing list, they can smoothly move to one.

Create Popup Subscription Form

One thing to hold in mind throughout this method is not to make multiple popups, in which case the user may get furious and leave your blog without reading it thoroughly.

So, today I am communicating the CSS popup subscription form. In other words, an HTML email signup form with a popup overlay feature. This subscription form has a responsive design. This complete email signup form reaches with virtually pure CSS which is desired to have a popup toggle switch. So, let’s start.

First, you need to create index.html, style.css, and Javascript files or you can add CSS and js code in the HTML file as well.

HTML Markup

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container">
  <a class="button popup-button" href="#">Open Model!</a>
</div>
<div class="wrapper">
    <div class="popup-box">
      <h2>SIGN UP & GET 10% OFF</h2>
      <p>Subscribe to our newsletters now and stay up-to-date with new collections.</p>
      <a class="close-button popup-close" href="#">x</a><div class="form-group">
      <form method="post">
        <input type="email" name="useremail-id" required placeholder="Please Enter your email">
        <button type="submit" id="subscribe">SUBSCRIBE</button>
      </form>
    </div>
    </div>
  </div>

CSS Style

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic);
body {
  font-family: "Open Sans";
  line-height: 200%;
  background: #7b78ff;
}
#subscribe{background:#ddd;padding:15px 30px 15px 30px;margin:10px;border:none;cursor:pointer;border-radius:10px;}
input {
  width: 100%;
  height: 55px;
  background-color: #eee;
  border: none;
  padding-left: 15px;
  outline: none;
  font-weight: 600;
  position: relative;
  border-radius:10px;
}
.container {
  width: 800px;
  margin: 10px auto;
  text-align: center;
}

h2 {
  margin-bottom: 20px;
  font-size: 32px;  color:#fff !important;
}

h3 {
  font-size: 16px;  color:#fff;
}

p {
  font-size: 16px;
  color: #fff;
}

.button {
  margin-top: 30px;
  padding: 2.2% 5.5%;
  display: inline-block;
  -webkit-transition: all linear 0.15s;
  transition: all linear 0.15s;
  border-radius: 3px;
  background: #fff;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  color: #333;
}
.button:hover {
  opacity:1.75;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  content: "";
  background: rgba(0, 0, 0, 1);
}

.popup-box {
  width: 400px;
  padding: 70px;
  transform: translate(-50%, -50%) scale(.5);
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0px 2px 16px rgba(255,255, 255, .9);
  border-radius: 20px;
  text-align: center;

}
.popup-box h2 {
  color: #1a1a1a;
}
.popup-box h3 {
  color: #888;
}
.popup-box .close-button {
  width: 35px;
  height: 35px;
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 10px;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
  border-radius: 1000px;
  background: #7b78ff;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  line-height: 190%;
}
.popup-box .close-button:hover {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.transform-in, .transform-out {
  display: block;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}
.transform-in {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}
.transform-out {
  -webkit-transform: translate(-50%, -50%) scale(0.5);
  transform: translate(-50%, -50%) scale(0.5);
}

Javascript code

$(document).ready(function() {
  $('.popup-button').click(function(e) {
    $('.wrapper').fadeIn(500);
    $('.popup-box').removeClass('transform-out').addClass('transform-in');

    e.preventDefault();
  });

  $('.popup-close').click(function(e) {
    $('.wrapper').fadeOut(500);
    $('.popup-box').removeClass('transform-in').addClass('transform-out');

    e.preventDefault();
  });
});

That’s It. Now you have successfully formed A Popup Subscription Form using HTML CSS and Javascript. If you have any suggestions or questions comment below.

Demo