Build A Less Annoying Newsletter Signup Form

How many times have you visited a website to be overwhelmed with pop-up windows that try to get you to take some sort of action? Most blogs and news related sites deploy this sort of pattern in efforts to gain more information about their users.

The hopes of gaining an email address could potentially mean a sale to the end-user over time. Blogs and websites alike need to monetize and grow to stay afloat so this pattern has become the norm these days.

Gaining more readers or followers means more impressions typically as well as offers being delivered directly to the user’s inbox.

I often get bombarded with these pop-ups myself and always end up asking myself if there’s a better way. Luckily today I’m going to show you how to create your own pop up that is less obstructive to the user.

View demo

Goals

We have some simple goals to acknowledge first off. All I essentially want to do is create a newsletter sign up form that isn’t a pain in the ass for the user to deal with.

Create a form that gathers users' email addresses for a newsletter.
Make the formless obstructive and allow the user to still read the content.
Style the form to look enticing to the user.
Make the form only appear if the user has scrolled down the page.

Getting Started

For the purposes of this tutorial, a lot of the content I’ll be using is for demonstration purposes only. You may want to take the code and use it on a larger site or even a WordPress based site. I won’t be covering how to do that but if you understand the code here it should be easy to add to your own site. (For a WordPress site, for example, you could create a small plugin that does the exact thing we are about to cover)

Alright, enough talk, To start we need some HTML to work with. Let’s build a makeshift blog layout that is long enough for scrolling purposes. You’ll see why this matters soon.

<header>
  <nav>
    <ul>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
    </ul>
  </nav>
</header>
<article>
  <p>Messenger bag four dollar toast 3 wolf moon, direct trade street art retro single-origin coffee stumptown flexitarian shoreditch sriracha franzen schlitz tacos butcher. Four loko truffaut echo park fashion axe, bespoke 8-bit lumbersexual helvetica kinfolk selfies chambray. Photo booth intelligentsia mixtape paleo quinoa normcore. Pabst pitchfork selfies ugh synth art party. Kale chips organic 8-bit cray tofu. Marfa humblebrag messenger bag thundercats asymmetrical stumptown. Fashion axe normcore meh disrupt, next level chambray PBR&amp;B kitsch slow-carb artisan leggings flannel salvia fixie.</p>
...
</article>
<footer><p>Oh look a footer</p></footer>

Here I’ve created both a header and a footer as well as the main content area filled with dummy text for now. To save some space, I omitted a bunch of paragraphs above but you’ll want to add more to be able to scroll as I’ve stated before. Simply copy and paste to do so or enter your own content.

Next, we need to build out the newsletter pop up. I want this to not be front and center like most typically are so to do this we will use some CSS to position it in the lower right corner of the browser window. Before I get to the CSS we need the markup to target. Add this code below the footer element.

<div class="news-wrap">
<div class="news">
  <div class="news-content">
    <form>
      <label>Email</label>
      <input type="email" placeholder="enter email">
      <input type="submit" value="Subscribe">
    </form>
  </div>
</div>
</div>

The new html code added will be our form. It’s currently shown by default, but we will soon hide it so it only appears upon scrolling further down a page.

Styling The Page and Form

Next, we need to add some style to get this working the way we like. After styling, I’ll add a bit of jQuery to make this all tie together.

I make heavy use of Sass in my workflow. I highly suggest you check it out if you haven’t yet. There are too many articles to list on the language so simply Googling it should suffice if you’re interested in learning more.

Here’s my Sass:

 header { background: purple;}
 footer { 
   background: magenta; 
   p { padding:0 20px; color: white;}
 }

 header, footer {
   padding: 10px 0;
   max-width:680px;
   margin:0 auto;
   ul { list-style: none; }
   li {
     display: inline; 
     padding: 0 10px; 
     color: white; 
     &amp;:first-of-type {
       padding-left: 0;
     }
   } 
 }

 article {
   max-width: 600px;
   margin:2em auto;
 }

 .show {
   display: block !important;
 }

 .news {
   background: forestgreen;
   padding: 50px;
   position: fixed;
   display: none;
   bottom:20px;
   right: 20px;

   label { 
    color: white;
    padding: 0 10px 0 0;
   }
   input[type="email"] {
    padding:8px;
    border-radius: 4px;
    border: none;
    outline: none;
   }
   input[type="submit"] {
    background: white;
    border: none;
    font-size: 1em;
    padding: 8px;
    border-radius: 4px;
    margin-left: 10px;
  }
}

The style isn’t “breathtaking” by any means, but that’s not the point of this tutorial. I’ve divided up each section with different colors as well as made a makeshift navigation menu inside our header element to resemble an article/blog structure. Below that, you have the content and following that the footer.

You may notice at this point our newsletter signup form is missing from the page. This is because the CSS rule assigned to it is display: none. We need it to be hidden by default so it’s not always in plain sight. I’ll use jQuery to toggle its appearance coming up next.

Sprinkling In Some JavaScript

I could write this in vanilla JavaScript, but I’ve opted for jQuery because on most websites it is already loaded. Use it at your own discretion.

Toggling the appearance is down with short snippet below:

 $(document).scroll(function() {
  var y = $(this).scrollTop(),
      news = $('.news');

  if (y > 600) {
    news.fadeIn();
  } else {
    news.fadeOut();
  }
 });

To figure out how far the user has scrolled, I needed a way to get the value of the y axis inside the browser window. To do this, I called the $(document) with jQuery to access its parameters. From there I used the .scroll() method to get the scroll height of the window.

I defined a variable called news which targets the entire block we are hiding and showing. And of course a variable y is assigned the .scrollTop() function in jQuery. This spits out the y axis number when a user scrolls through a given page.

The next step is to write an if statement to check if the window is passed a certain point. Here I used 600 for the point at which our jQuery will add a class to show the .news div.

So if I scroll down the page past 600 on the y axis I should see the newsletter form appear. Simple enough right?

For grins If you wanted to write it in pure JavaScript it would look similar to this:

 news = document.getElementById("news");

 var myScrollFunc = function() {
   var y = window.scrollY;
   if (y >= 600) {
     myID.className = "bottomNews show"
   } else {
     myID.className = "bottomNews hide"
   }
 };

 window.addEventListener("scroll", myScrollFunc);

Going this route means changing our CSS and HTML a bit

For the html portion, we are simply adding an id to the news div as well as a new class for the style and appearance-related effects.

<div id="news" class="bottomNews hide">...</div>

The CSS (Sass) is updated below:

.bottomNews {
  background: forestgreen;
  padding: 50px;
  position: fixed;
  display: none;
  bottom:20px;
  right: 20px;

  label { 
    color: white;
    padding: 0 10px 0 0;
  }
  input[type="email"] {
    padding:8px;
    border-radius: 4px;
    border: none;
    outline: none;
  }
  input[type="submit"] {
    background: white;
    border: none;
    font-size: 1em;
    padding: 8px;
    border-radius: 4px;
    margin-left: 10px;
  }
}
.show {
    display: block;
}
.hide {
    display: none;
}

If you wanted this to be more accessible you would want to not use display: none but rather positioning and opacity rules. That would change the show and hide classes to have this CSS.

.hide {
  opacity: 0;
  left: -100%;
}
.show {
  opacity: 1;
  left: 0;
}

View Demo

Wrapping Up

Feel free to use this code anywhere you wish. I was inspired to write something like this out of the need for a less obstructive way to get more subscribers. There are plugins for WordPress that exist which do essentially the same thing but are rather limiting in terms of design. Building my own solution turned out to be way more suitable for my needs and hopefully, it will for yours as well.