NEX-Forms - Documentation

• Created: 03/09/2014
• latest Update: 03/09/2014
• By: Basix
• Email: support@basixonline.net

Thank you for choosing NEX-Forms - The Ultimate WordPress Form Builder.

VIA WordPress

1. After your download log into your WordPress admin interface
2. After login click on  Plugins from the left  hand menu
3. Click on “Add new”
4. Click on “Upload”
5. Browse to the directory you downloaded the plugin to and click “Install Now”
6. After Wordpress has finished unpacking the file click on “Activate Plugin”
7. After the plugin has been activated you will notice a new menu item on the left hand navigation labelled NEX-Forms
    

VIA FTP

1. After your download unzip Nex-Forms from your download .zip
2. Open your FTP client
3. Browse to /your_wp_instalation/wp-content/plugins/ server
4. Uplaod Nex-Forms into this directory
5. Go to your wordpress admin panel
6. Go to plugins and activate NEX-Forms
7. After the plugin has been activated you will notice a new menu item on the left hand navigation labelled NEX-Forms
    

1. After Plugin Activation Go to your Admin Dashboard and navigate to NEX-Forms from the left hand menu.
2. Drag form elements from the left column to the center.
   You can delete form elements by cliking on the trash icon editing the field or simply drop in into the trash can at the bottom.
   
3. Click on the title, input or helptext to trigger the corrosponding settings (Input settings differ from field to field). Note that you can duplicate the field or add it to your clipboard to be used in other forms.
4. You can preview the form by clicking on the preview icon (notice that you can change the device)
5. When you are done give your form a title(at any piont) and click save form. You can save the form as a template to be re-opened and re-used as new forms.
6. When you are done give your form a title(at any piont) and click save form. You can save the form as a template to be re-opened and re-used as new forms.

Add to pages and post

1. After your form has been saved go to your pages (add new or edit)
2. Click on the NEX-Forms icon
3. Select the form
4. Click on “insert into post”
5. Save

Add to Sidebar Widget

1. After your form has been saved go to your widgets
2. Drag and drop NEX-Forms into your desired sidebar
3. Select the form
4. Save

1. Click on settings top bar
2. Click on Autoresponder
3. Complete the form as instructed
4. Note you need a text or custom field set to be validated as email to be used as the address to send user confirmation mails
5. Use the form data section to insert submitted values into your email body (values will be replaced with the field data found between the brackets {{ }}.

1. Choose to run or not to run the animation
2. If the animations runs change the time the animation should take to complete

Add your "thank you" message to be displayed after a successfull (validation passed) form submmision.

For the best support results use the form found by clicking NEX-Forms top right and then Support! There are alternatives to support but we recomend this.

If you realise the potential of this form builder please support it and make money in return by simply having a small link below your submit button.

Simply Add your envato username to your custom link and receive 30% (of the total value) from every first sale a user makes after clicking on your link!

Read more about this awesome Envato innitiative here

Below is the default CSS used for the layout of forms (File location: Nex-Forms/css/ui.css)

#nex-forms .style_bold{font-weight:bold !important;}
#nex-forms .style_italic{font-style:italic !important;}
#nex-forms .ui-nex-forms-container .grid-system .panel-body, 
#nex-forms .ui-nex-forms-container .grid-system .panel-body .row {padding: 0 !important;}
#nex-forms .animated{/*	visibility:hidden;*/}
#nex-forms .visible {visibility: visible !important;}
#nex-forms .ui-nex-forms-container .grid-system {border: medium none !important;box-shadow: none;outline: medium none !important;padding: 0 !important;}
#nex-forms .ui-nex-forms-container .upload-single .input-group{width:100%;}
#nex-forms  div.fileinput a {position: relative;z-index: 100 !important;}
#nex-forms .timepicker-picker a.btn span {text-align: center;width: 40px;}
#nex-forms .bootstrap-datetimepicker-widget td span {height: 25px !important;line-height: 25px !important;}
#nex-forms .align_right{text-align:right;right:0;}
#nex-forms .align_left{text-align:left;}
#nex-forms .align_center{text-align:center;}
#nex-forms .align_justify{text-align:justify;}
#nex-forms div.form_field .help-block.input-lg,
#nex-forms div.form_field .help-block.input-sm{padding:0;height:auto;}
#nex-forms .submit-button small {width: 100%;display: block;clear: both;margin-top: 7px;}
/* GRID SYSTEM */
#nex-forms .ui-nex-forms-container .grid-system {margin-bottom: 15px;}
#nex-forms .grid-system .row, .grid-system .input_holder,
#nex-forms .grid-system .col-sm-2,
#nex-forms .grid-system .col-sm-10 {padding: 0 !important;margin: 0 !important;}
#nex-forms .grid-system .panel.grid-system > .panel-body {margin: 0 !important;padding: 10px;min-height: 61px;background:none;}
#nex-forms input[name="company_url"]{position:absolute;z-index:-1;top:-100000px;}
#nex-forms .grid-system .panel.grid-system {border: 1px dotted #ccc;border-radius: 0;margin: 0;min-height: 61px;background:none;}
#nex-forms hr{border-color:#dddddd;margin:0;}
#nex-forms p {background: none !important;}
#nex-forms .submit-button span.fa-spinner {}
#nex-forms .panel-heading.btn-lg, 
#nex-forms .panel-heading.btn-sm {border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
#nex-forms .ui-nex-forms-container{visibility:hidden;}
#nex-forms .ui-nex-forms-container #field_container {margin-bottom: 10px;}
#nex-forms .ui-nex-forms-container label#nexf_title,
#nex-forms .ui-nex-forms-container .help-block{display:none;}
#nex-forms .ui-nex-forms-container .form_field .input_holder .grid-system .panel {margin-right: 15px;}
#nex-forms .ui-nex-forms-container .form_field .input_holder:last-child > .grid-system .panel {margin-right: 0;}
#nex-forms .ui-nex-forms-container .grid-system .panel.grid-system > .panel-body {padding: 0 !important;}
#nex-forms .ui-nex-forms-container .grid-system .panel.grid-system {border: medium none !important;margin: 0 !important;padding: 0 !important;}
#nex-forms .grid-system #field_container {padding: 0 !important;}
/**********************************/
/************* FIELDS *************/
/**********************************/
#nex-forms .square .form-control,
#nex-forms .square .input-group-addon,
#nex-forms .square .selectpicker,
#nex-forms .square .dropdown-menu,
#nex-forms .square .btn,
#nex-forms .square .ui-slider-range,
#nex-forms .square #slider,
#nex-forms .square .panel:first-child, 
#nex-forms .square .panel-body:first-child, 
#nex-forms .square .panel-heading:first-child{border-radius: 0 !important;}
/* not available yet */
#nex-forms .full_rounded .form-control,
#nex-forms .full_rounded .input-group-addon,
#nex-forms .full_rounded .selectpicker,
#nex-forms .full_rounded .btn{border-radius: 50% !important;}
#nex-forms .form_field.grid .panel {margin-bottom: 15px;}
#nex-forms .form_field.grid, 
#nex-forms .form_field.grid .input_holder {margin: 0 !important;}
#nex-forms div#nex-forms .color_pallet span.caret,
#nex-forms .bootstrap-select.btn-group .btn .caret{margin-top:0 !important;}
#nex-forms .btn.selectpicker {text-align: left;}
#nex-forms small.sub-text{font-weight:normal;color:#999;}
#nex-forms .ui-slider {margin-left: 6px;margin-right: 20px;position: relative;text-align: left;}
#nex-forms .ui-slider .ui-slider-handle{width:auto !important;height:auto !important;padding:5px;text-decoration:none !important;outline:none;cursor:pointer !important;top:-10px !important;font-size:12px !important;}
#nex-forms span.ui-spinner {width: 100%;}
#nex-forms span.ui-spinner input{border:none;padding:0 !important;padding-left:10px !important;}
#nex-forms div#star img,span.star_holder{position:relative;}
#nex-forms div#star{width:100% !important;}
#nex-forms span.ui-spinner.ui-widget-content{border:1px solid #ddd;}
#nex-forms button,
#nex-forms input,
#nex-forms select,
#nex-forms textarea{margin:0 !important;}
#nex-forms .is_required.btn-xs {padding: 0 !important;margin-right: 2px;font-size: 8px;top: -2px;}
#nex-forms .ui-slider-range-max:first-child {background: none repeat scroll 0 0 #F2F2F2;border:1px solid #ddd;}
#nex-forms .ui-slider-range-max:last-child {background: none repeat scroll 0 0 #FFFFFF;border:1px solid #ddd;}
#nex-forms .ui-slider{border:1px solid #ddd;}
#nex-forms .autocomplete, .autocomplete div.input-inner {z-index: 1001 !important;}
#nex-forms .ui-autocomplete {z-index: 1000 !important;background: #FFF !important;}
#nex-forms .the-radios .col-sm-12 {padding-left: 0;}
#nex-forms .prefix span, 
#nex-forms .postfix span {font-size: 17px;}
#nex-forms .heading .input_holder, 
#nex-forms .paragraph .input_holder, 
#nex-forms .divider .input_holder {margin: 0;}
#nex-forms .display-block{margin-right:0 !important;}
#nex-forms div.radio-group label.radio-inline,
#nex-forms div.radio-group label.checkbox-inline,
#nex-forms div.checkbox-group label{height: 30px;line-height: 30px;padding-left:35px;position: relative;}
#nex-forms div.radio-group label a,
#nex-forms div.checkbox-group label a{position:absolute;top:0;left:0;text-decoration:none;}
#nex-forms div.input_holder{position:relative;margin-bottom:18px;}
#nex-forms div.input-inner{position:relative;top:2px;left:0;}
#nex-forms ul.selectpicker {display:block !important;}
#nex-forms .popover h3 {display: none;}
#nex-forms .ui-nex-forms-container .paragraph .input-group,
#nex-forms .ui-nex-forms-container .heading .input-group {width: 100% !important;}
#nex-forms h1.the_input_element,
#nex-forms h2.the_input_element,
#nex-forms h3.the_input_element,
#nex-forms h4.the_input_element,
#nex-forms h5.the_input_element,
#nex-forms h6.the_input_element{color:#000;margin:0;font-weight:normal;}
/*******************************/
/************* SVG *************/
/*******************************/
#nex-forms svg{position:absolute;z-index:20;top:0;left:0;}
#nex-forms svg {pointer-events: none;}
#nex-forms .do_show {opacity: 1 !important;}
#nex-forms .do_hide {opacity: 0 !important;}
#nex-forms .line-drawing,
#nex-forms .illustration {-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
#nex-forms .line-drawing path {fill: none;stroke: #ccc;stroke-width: 1;}
#nex-forms path.line-round {stroke-linecap: round;}
#nex-forms path.stroke-medium {stroke-width: 2;}
#nex-forms path.stroke-thin {stroke-width: 0.5;}
#nex-forms .do_show, 
#nex-forms .do_hide {-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}

Locations of all CSS files included:

/wp-content/plugins/Nex-Forms/css/

This plugin uses the following javascript files:

• jQuery
• Bootstrap
• Backbone
• Underscore
• JSON
• Custom functions

We would like to thank Envato, WordPress, Bootstrap, Font Awesome and JQuery for their awsome platforms and ongoing improvement thereof as without it this plugin would not be possible.

And once again, thank you for purchasing this Plugin.

Basix