Knowledge Base / NKS: Subscription Form

Generated by Daux.io

Getting Started

Thursday, June 16, 2016 12:58 AM

Ninja Kick: Subscription Form is a WordPress plugin that adds subscription form with great clean design and push/sliding animation effect on every page of your site. Plugin form is responsive to screen size changes, works well on mobile devices and reacts on swipe gestures. Please, give a try to how it works and looks on Livepreview Page.

Installation

  1. Unzip plugin archive (NKS-subscription.zip).
  2. Place 'NKS-subscription' folder into the .../wp-content/plugins/ directory of your site.

Or you can do the second part in more handy way via WordPress Admin panel:

  1. On the Plugins panel press the Add New button.
  2. Press Upload tab.
  3. Browse for the NKS-subscription.zip file, select it, press Open.
  4. Click Install Now.

Files Structure

Ninja Kick: Subscription Form has standard WordPress plugin structure. It includes both PHP files for server-side and JavaScript files to operate on client-side.

Main plugin file main.php generates form HTML and injects JS (like main JS NKS-subscription.js and required JS libraries based on WordPress jQuery) from /js folder and CSS from /css folder on your site page.

Source code: PHP and JavaScript

Plugin main PHP class is defined in main.php. It provides standard WordPress plugin routine like settings and appearance presentation in admin and settings storage in WordPress database and also includes other .php files and injects .js, .css for browser pages. Nothing really to customize here, only in case of new functionality addition.

  • Files options-page.php and settings.php are both dedicated to handle settings page presentation and scripting.
  • Form dynamic content generation takes place in NKS-subscription.php. There can be found base HTML for form.
  • Logic of how form works on your page is encapsulated in NKS-subscription.js. Form setup, animations, form validation can be found here. If you want to change something of this stuff you should edit this file.

IMPORTANT: by default plugin uses minified NKS-subscription.min.js to optimize page load but editing of this file is much harder. We suggest your to switch to non-minified NKS-subscription.js. Search for string NKS-subscription.min.js in main.php and change the path. Then edit this file (found in /js folder) and minify it here. Save as new NKS-subscription.min.js.

This plugin imports two Javascript files only on Settings page:

  1. jQuery plugin tinycolor.js to work with colors.
  2. jQuery Colorpicker UI plugin jquery.colorpickersliders.js.

Design: CSS and images

We use two CSS files in this theme. The first one admin.css is for plugin styles in WordPress admin like settings page. The second file NKS-subscription.css contains all of the specific stylings for the form on your site pages.

Feel free to edit any of this CSS. Please double-check if editing more than just font or background color.

Usage

By default only way to expose sidebar is to click on floating button with icon. Plugin doesn’t generate buttons by itself, it looks for exact class nksub_trigger_element on page. If element with this class exists click on it will expose form. You need manually add class to desired element like this:

<a class="nksub_trigger_element" href="#">EXPOSE FORM!</a>

Also you can call form API methods NinjaSub.showSidebar() and NinjaSub.hideSidebar() from your JS code to control form visibility on certain conditions.

Browser support

  • Chrome >= 20
  • Mozilla Firefox >= 15
  • Internet Explorer >= 9
  • Safari >= 5
  • Opera >= 12
  • Safari Mobile for iOS
  • Chrome for Android / iOS
  • Firefox for Android

Dependencies

Only dependency is jQuery equal or greater than 1.7 version.

Support

To get support for any our product please visit our Help Center. Our Help Center is the only official Looks Awesome support handling mechanism. Questions sent using other channels may be ignored without notice. Check out our Support Policy.