Create a cookie based Newsletter Sign-Up with jQuery and Gravity Forms

In this article, I will show you how I’ve created a fancy looking newsletter sign-up form which slides from the bottom right of a web page once a user scrolls halfway down the page.

I am sure there are many plugins available for WordPress but it’s always a good idea to code something of your own. So let’s see how it actually works!

The HTML

We will have a div container which is going to have a fixed position. Once a user reaches halfway down the page the sliding form will slide up using jQuery. Now let’s see how it is done.

<div class="slideout-form">
   <button class="close" type="button">
      <span aria-hidden="true">×</span>
   </button>
   <div class="slideout-form-header">
      <h3>Sign up to Newsletter</h3>
   </div>
   <div class="slideout-form-body">
      //Gravity Forms Shortcode will go here
   </div>
</div>

The CSS (SASS)

We have “slideout-form-header” and “slideout-form-body” divs inside the “slideout-form” div which is positioned fixed. The “slideout-form-body” div contains form the Gravity Forms shortcode, and the “button” will close the slider and drop a cookie on a users browser.

/*Slide out form*/
body{
   position:relative;
}
.slideout-form {
    position:fixed;
    right:0;
    bottom:0;
    display:none;
    text-align:left;
    background:#ffffff;
    color:#333333;
    padding:0;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom:0;
    border-top:1px solid #333333;
    border-left:1px solid #333333;
    border-right:1px solid #333333;
    z-index:999;
    .slideoutform-header {        
        padding:15px 30px;
        h3 {
            padding:0;
            margin:0 0 15px 0;
            color:#333333;

        }
    }
    .close{
        right:10px;
        top:0;
        color:#ccc;
        font-size:30px;
        opacity:0.6;
        &:hover{
            opacity:1;
        }
    }    
}

The jQuery (JavaScript)

In the javascript below, you will notice some cookie script and also the slider effects.

Cookies are data, stored in small text files, on your computer. Cookies were invented to solve the problem “how to remember information about the user”:

1. When a user visits a web page, his name can be stored in a cookie.
2. Next time the user visits the page, the cookie “remembers” his name.
   Cookies are saved in name-value pairs like (username = John Doe).

In this example, the cookie will be dropped if a user signs up or if the user clicks on the close button. This will make sure the user doesn’t see the slider of x amount of days, depending on how long you set the cookie for.

In the example, the cookie will expire in 30 days which will then slide up again once the user goes to your site again.

//Slider with Form Script

//Create the cookie
function setCookie(key, value) {
   var expires = new Date();
   expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
   document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + "; path=/";
}

//Get the cookie if it exists
function getCookie(key) {
   var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
   return keyValue ? keyValue[2] : null;
}

//Detect the user's scrolling on the page
$(window).scroll(function () {
   if ($(window).scrollTop() > $('body').height() / 2) {
     
      //Do a check if a cookie exists
      if (getCookie('slideHideGF')) {
         $('.slideout-form').hide();
      } else {
         $('.slideout-form').slideDown();
      }
   } else {
      if (getCookie('slideHideGF')) {
         $('.slideout-form').hide();
      } else {
         $('.slideout-form').slideUp();
      }
   }
});

//If cookie exists hide slider
if (getCookie('slideHideGF')) {
   $('.slideout-form').hide();
}
//Set the cookie on the close button for x amount of days, below it's set to 30
$('.slideout-form .close').on('click', function () {
   setCookie('slideHideGF', 30);
   $('.slideout-form').hide();
});

//Set the cookie on the submit button for x amount of days, below it's set to 30
$('.slideout-form .gform_button').on('click', function () {
   setCookie('slideHideGF', 30);
   $('.slideout-form').hide();
});

Gravity Forms Shortcode

All that is left now is to insert your shortcode for Gravity Forms. If you are not using Gravity Forms you can use any other form builders shortcode.

<?php 
   echo do_shortcode( '[gravityform id="your form id" title="false" description="false"]' );
?>

Download

You can download the code and play around with it, please click on the link.  jQuery Slide-Up with Form

That is it

The code above is purely an example and you may need to update the styling so that it works well with your theme. If you need any help with this or if you would like me to help you implement this on your website, feel free to contact me.