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.

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. 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 Code:

<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:

$(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();
  });
});

I shared this post from Popup Subscription Form using CSS & Javascript you can read in detail from there.

To see live demo Codepen

I hope this post supported you learn how to create subscription popup model to your website. If you have any questions or suggestions please discuss below.