Cookie-enabled jQuery Subscribe Form Bar Plugin - SubscribeBar
File Size: | 21.2 KB |
---|---|
Views Total: | 1209 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.