Cookie-enabled jQuery Subscribe Form Bar Plugin - SubscribeBar

A tiny and easy-to-use jQuery plugin that displays a cookie-enable subscribe form at the top of your webpage to grow your email subscribers.

Basic usage:

1. Load the necessary jQuery library and jQuery cookie plugin in the html document.

<script src="jquery.min.js"></script>
<script src="jquery.cookie.min.js"></script>

2. Download the plugin and include the jquery.subscribebar.js script after jQuery library.

<script src="src/jquery.subscribebar.js"></script>

3. Initialize the plugin to display a subscribe bar that uses the default options provided with the plugin.

$.subscribeBar();

4. The default CSS styles for the subscribe bar.

#subscribe-bar {
  font-size: 14px;
  background: #7a9515;
  height: auto;
  color: #eeeeee;
  text-align: center;
  padding: 0.5em 0;
}

#subscribe-bar form { display: inline; }

#subscribe-bar form input[type=text] { width: 180px; }

#subscribe-bar form input[type=button] { margin: 0 8px; }

#subscribe-bar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#subscribe-bar.fixed.bottom {
  bottom: 0;
  top: auto;
}

#subscribe-bar span {
  margin: 0 8px;
  padding: 0;
}

#subscribe-bar a.jsb-close {
  float: right;
  cursor: pointer;
  font-size: 150%;
  font-weight: bold;
  display: inline-block;
  line-height: 0px;
  padding: 0.5em 10px;
  color: #fff;
  text-decoration: none;
}

#subscribe-bar .jsb-close:before { content: "×"; }

5. Configuration options available.

$.subscribeBar({
  acceptCookieName: 'accept_cookie',
  acceptCookieValue: 1,
  checkAcceptCookie: false,
  debug: true,
  element: 'body',
  emailClass: "",
  emailPlaceholder: "email address",
  enableGaEvent: false,
  formAction: "#",
  formClass: "",
  gaEventCategory: "CTA",
  gaEventAction: "subscribe to newsletter",
  gaEventActionCancel: "close subscribe bar",
  gaEventLabel: "top subscribe bar",
  msg: "Stay tuned, subscribe to our newsletter!",
  msgClass: "",
  nextShow: 30,
  submitClass: "",
  submitLabel: "SUBSCRIBE",
});

Change log:

2016-02-04

• add smooth scroll, email value checking

---

This awesome jQuery plugin is developed by CharlyBr. For more Advanced Usages, please check the demo page or visit the official website.