Popup Email Form For CTA - DevSeries

CCarter · Jan 18, 2016

Alright so the motherload for CTA (Call To Action), the Popup Email Form for CTA. This will wait X amount of seconds AFTER the user's mouse stops, instead of just being timed for when the page loads. Once the user's mouse stops, I've got this one set to 10 seconds in the code, but in the example it's only set to 1 second (also in my example the cookie saving code is nulled so people can refresh it without having to empty cookies, but in the below code it works perfectly). Example: Popup Email Form CTA (Call To Action) Example

I also utilize jQuery Cookie so the user only sees this every 30 days. You can reduce this in the code as well. Otherwise the user would have to clear their cookies to see this popup again.

--

CSS inside the <head><head> tag:

Code:

<!-- Style this nonsense - @MercenaryCarter -->
  <style type="text/css">
body {
  margin: 0px;
}
.subs-popup {
   display: none;
   background-color: rgba(0,0,0,0.85); /*Dropshadow background*/
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
}
#email_signup {
   background-color: #ffffff;
   border-top: 30px #333333 solid;
   width:600px;
   margin: 200px auto;
   box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.20);
   padding: 20px;
   top: 0px;
   left: 0px;
   position: fixed;
}

#my-email-popup-form {
}

.email-close {
   height: 20px;
   width: 20px;
   position: absolute;
   top: -20px;
   right: -10px;
   background: #ffd200;
   border-radius: 50%;
   text-align: center;
   font-weight: bold;
   border: 2px solid #ffee7a;
   box-shadow: 0px 0px 4px 4px rgba(0,0,0,0.20);
   cursor: pointer;
   z-index: 999;
   color: #333;
}
.email-close:active {
    top: -18px;
    right: -8px;
}
.cc-img {
   box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.10);
   border-radius: 50%;
   border: 4px solid #eee;
   float: right;
   margin: 0px 15px;
   height: 150px;
}
  </style>
<!-- End of style this nonsense - @MercenaryCarter -->

--

HTML code sometime AFTER the opening <body> tag:

Code:

<!-- This is require mated - @MercenaryCarter -->
<div class="subs-popup">
   <div id="email_signup">
   <div class="email-close">x</div>
   <form action="#FormStuffShouldGoHereMates" method="post" id="my-email-popup-form" name="my-email-popup-form">

   <img src="http://1.gravatar.com/avatar/191efa6ab6390a68c25041970b26fb98?s=150&d=mm&r=g" class="cc-img" alt="Alleged Image of CCarter">

   <h2>Enjoying What You Are Reading?</h2>
   <p>Why not sign up for email updates? I promise I to spam the living daylights out of you!! Daily, hourly, and maybe even every minute if my servers allow!</p>

   <div>
     <input type="email" name="email_address" class="required email" id="email_address" placeholder="Email Address">
   </div>
    <div class="clear"><button type="submit" name="subscribe_button" id="subscribe_button" class="button">Subscribe</button>
   </form>
   </div>
</div>
<!-- End of require mated - @MercenaryCarter -->

--

javascripts/jQuery right BEFORE the closing </body> tag:

Code:

<!-- This is require mated - @MercenaryCarter -->

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src="https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>

   <script type="text/javascript">
idleTime = 0;
$(document).ready(function(){
   $waiting_time_limit = 10; //amount of seconds to wait after page loads, can be 5, 30, 90, 300 (I suggest 30)

   if ($.cookie('test_status') != '2501') {
     function timerIncrement() {
       idleTime = idleTime + 1;
       if (idleTime > $waiting_time_limit) {
         var document_height = $(document).height();
         $('.subs-popup').css({ height : document_height });
         $("#email_signup").center(true);
         $('.subs-popup').fadeIn(500);
         idleTime = 0;
         clearInterval(idleInterval);
       }
     }

     // Increment the idle time counter every second.
     var idleInterval = setInterval(timerIncrement, 1000); // 1 second

     // Zero the idle timer on mouse movement.
     $(this).mousemove(function (e) {
       idleTime = 0;
     });
     $(this).keypress(function (e) {
       idleTime = 0;
     });

     $.cookie('test_status', '2501', { expires: 30 }); //30 days
   }
});


     jQuery.fn.center = function(parent) { //Center stuff bro
      if (parent) {
      parent = this.parent();
      } else {
      parent = window;
      }
      this.css({
      "left": ((($(document).width() - this.outerWidth()) / 2) + $(document).scrollLeft() + "px")
      });
     return this;
     }

     $('.email-close').click(function() {
       $('.subs-popup').fadeOut(150);
       $waiting_time_limit = 999999;
     });
   </script>
<!-- End of require mated - @MercenaryCarter -->

--

Till next time.

- CC

coopreme · Nov 10, 2016

Awesome. You rock - would this be hard to setup to trigger at a specific point in the page?

CCarter · Nov 10, 2016

No, not really that hard. You can setup a javascript mouse scroll or view screen action that once it gets to a certain point the pop up appears rather easily. Let me see what I can do to get an example going for you.

dannyhw · Dec 14, 2016

Solid code but you could take it one step further by making it a jQuery plugin that just takes your form like $("#email-popup-form").timedPopup({delay: 10}); and wraps the popup code around the div you selected. Really easily reusable.

Popup Email Form For CTA - DevSeries

CCarter

Final Boss ®

coopreme

try hard

CCarter

Final Boss ®

dannyhw