Design & Code: Notify Me Button Animation

When you’re running an eCommerce store, at some point you’ll run out of a product. So what happens to those potential sales? You could offer another product option (and you should), but most large stores are now offering a “notify me when it’s back” feature. I’ve used it several times myself on various sites!

When planning out this feature on your site, you could go with a simple design: a straight-up form with a button below. But sometimes, just a little added effort can make it look that much better. Take a look at Baggu‘s design below:

Creating this effect takes very little effort, but adds to the overall professionalism of the site.

The Setup: HTML

First, let’s look at how they set it up by examining the actual HTML on their page:

<div class="bis-container">
      <button class="button full" id="BIS_trigger">Notify me when it's back</button>
      <div class="bis__input-button-group visually-hidden">
         <input type="email" name="BIS_email" id="notify_email" placeholder="Enter Email Address">
         <button class="button full" id="BIS_submit" data-product-id="4737873346657" data-variant-id="32651823480929" data-shop="baggu.com">
             Submit
         </button>
         <p class="bis__error-message">Please enter a valid email</p>
      </div>
      <div class="bis__success visually-hidden">Thanks! We'll email you<br>when it's back in stock.</div>
</div>

They’ve used a wrap div called “bis-container” to put the three elements in. The first element is our “Notify me when it’s back” button. The second element is the “Enter email address” form, and the last one shows the “Thanks!” success message.

If you’ll notice, each element has an ID or class that explains what it’s doing: “BIS_trigger” for the initial button, “visually-hidden” for ones that start off hidden.

The Order: CSS

The only vital CSS to understand in this example is that the “visually-hidden” class:

.visually-hidden {
display: none!important;
}

Using a simple:

position: absolute;
top: 0;

Each successive element is stacked on top of each other, but set with a “display:none” until it’s ready to be shown. The only element they didn’t do this with was the “error-message”, because that one will only be shown if the email isn’t an email.

The Execution: jQuery

We’ll be using some fairly simple jQuery to create the initial action.

$('#BIS_trigger').click(function(){ 
$('bis__input-button-group').removeClass('visually-hidden');
});

By removing the “visually-hidden” class, you’ve now allowed the element “bis__input-button-group” to show normally.

The next change, showing the “thank you” message, is done the same way. The email is submitted and then the “visually-hidden” class is removed from the “bis__success” div.

The Summary

There are of course many different ways of implementing an interaction like this, but the stacked elements make it simple and clean. With this initial setup, you can add in animation by setting a starting point (like top:-25px) or using opacity to make the animation more impressive. The sky’s the limit!

Tell us below what you would add into the animation to take it to the next level.