Just Forms Pro

Every form has next css files in the "head" sections:

• demo.css - this file is  required only for demonstration purpose. It sets site background. The background image is located in the folder: "img/";
• font-awesome.min.css - file is required for Font Awesome icons;
• j-pro-chosen_style.css - main css file. Contains all css properties. All sections in this file are commented and you can do your form customization. This file is duplicated for all forms and extensions. You may select from four default styles:
  • j-pro-modern.css - modern style
  • j-pro-dark.css - dark style
  • j-pro-flat.css - flat style
  • j-pro-minimal.css - minimal style
  Every style has it's own css color files. You may connect them and change form color. Example of how to connect color file - at the "Intro" section

If you would like to edit a specific section of the form, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Every form has some of the next files in the head sections:

• j-pro-additions.js - additional methods for Just Forms Pro advanced version (show/hide password, hidden elements, select with conditions, etc.);
• jquery.2.2.4.min.js - jQuery library;
• jquery.ui.min.js - jQuery library for Sliders and Date Pickers. This library should be added to the forms with jQuery sliders and data pikers;
• jquery.maskedinput.min.js - jQuery plugin for masked inputs (date, phone, numbers, etc);
• jquery.stepper.min.js - jQuery plugin for nummeric stepper;
• jquery.ui.timepicker.min.js - jQuery plugin for time picker;
• jquery.ui.touch-punch.min.js - jQuery plugin for proper slider work on mobile devices;
• jquery.j-pro.js - Just Forms Pro main javavascript file

If you want to add any extension to your form (such as date picker or slider) - please be sure that you add appropriate js script to the "head" section on your html page.

Date Picker

Demo for date pickers: "extensions/html_examples_and_plugins/datepicker.html"

In this section we will discuss how you can add and configure date picker in your forms.

First of all, you have to add jquery.ui.min.js script in the "head" section of the html page. Second, you have to configure date picker settings.

Step 1:

In this step we add html markup for the date picker. Note: you have to configure some unique "id" attributes for date picker.

Step 2:

In this step we add js code for the date picker. You can add js code directly to the html page where your form is placed. Or you can add it to the "main" js file of your website.

In the "forms" folder you can find some form with date picker that has some differences. For instance, let's take a look to the "booking" form.

The difference lies in the fact that we create a wrapper function for every DatePicker instance. This function is required if we want to create DatePicker instance when we want, but not when html page is loaded. All forms are sent to the server without page reloading - and we need to reload the DatePicker instance manually, every time when a form is submitted successfully. This is what we do every time after successful form submitting.

More info about JavaScript config code - in the JS Config section.

Time Picker

Demo for time pickers: "extensions/html_examples_and_plugins/timepicker.html"

First of all, you have to add js scripts in the "head" section of the html page. Second, you have to configure time picker settings.

Step 1:

In this step we add html markup for the time picker. Note: you have to configure unique "id" attribute for time picker.

Step 2:

In this step we add js code for the time picker. You can add js code directly to the html page where your form is placed. Or you can add it to the "main" js file of your website.

Nummeric Stepper

Demo for numeric stepper: "extensions/html_examples_and_plugins/numeric_stepper.html"

First of all, you have to add js scripts in the "head" section of the html page. Second, you have to configure numeric stepper settings.

Step 1:

In this step we add html markup for the numeric stepper. Note: you have to configure unique "id" attribute for numeric stepper.

Step 2:

In this step we add js code for the numeric stepper. You can add js code directly to the html page where your form is placed. Or you can add it to the "main" js file of your website.

Sliders

Demo for sliders: "extensions/html_examples_and_plugins/sliders.html"

First of all, you have to add js scripts in the "head" section of the html page. Second, you have to configure slider settings.

Step 1:

In this step we add html markup for the slider. Note: you have to configure unique "id" attribute for slider.

Step 2:

In this step we add js code for the slider. You can add js code directly to the html page where your form is placed. Or you can add it to the "main" js file of your website.

Masking

Demo for masking: "extensions/js_additions/masking.html"

First of all, you have to add js scripts in the "head" section of the html page. Second, you have to configure masking settings.

Step 1:

In this step we add html markup for the masking. Note: you have to configure unique "id" attribute for masking.

Step 2:

In this step we add js code for the masking. You can add js code directly to the html page where your form is placed. Or you can add it to the "main" js file of your website.

Currency format

Demo for currency format: "extensions/html_examples_and_plugins/currency.html"

Step 1:

First of all, you have to add js scripts in the "head" section of the html page.

Step 2:

Next, define a data attribute and class for every field with currency feature.

Step 3:

Add js code required for the plugin.

Autocomplete

Demo for autocomplete: "extensions/html_examples_and_plugins/autocomplete.html"

Step 1:

You have to add js library in the "head" section of the html page.

Step 2:

Add id attribute to the input with autocomplete feature.

Step 3:

Add js code required for the autocomplete.

Google Map

Demo for google map: "extensions/html_examples_and_plugins/form_google_map.html"

Step 1:

You have to add js library in the "head" section of the html page. Also you have to specify google map API key - Get API key

Step 2:

Add id attribute to the div with google map feature.

Step 3:

Add js code required for the google map.

Demo for js additions: "extensions/js_additions/additions.html"

In this section we will discuss all javascript additions that are available in the Just Forms Pro advanced version. These additions will help your users during form submission process.

Show / Hide Password

Step 1:

You can add to your form "show/hide password" feature. Note: you have to configure unique "id" attribute for "show/hide password" feature.

Step 2:

In this step we add js code for the "show/hide password" feature. You can add js code directly to the html page where your form is placed. Or you can add it to the "main" js file of your website.

Enabled input / button

Step 1:

You can add to your form "enable/disable elements" feature. Note: you have to configure unique "id" attribute for "enable/disable elements" feature. Take a look to the class="disabled-view" and attribute disabled. These class and attribute are required.

Step 2:

In this step we add js code for the "enable/disable elements" feature. You can add js code directly to the html page where your form is placed. Or you can add it to the "main" js file of your website.

Hidden elements - checkbox

Step 1:

You can add to your form "hidden elements" feature. Take a look to the class="hidden-elements" and class="j-hidden". These classes are responsible for the next features:

• class="hidden-elements" - this class is required for the js code. If this class is present - js code knows that current element should be hidden;
• class="j-hidden" - this class is responsible for hiding elements. It contains css properties.

Step 2:

In this step we add js code for the "hidden elements" feature. You can add js code directly to the html page where your form is placed. Or you can add it to the "main" js file of your website.

Hidden elements - select

Step 1:

You can add to your form "hidden elements" feature. Note: you have to configure unique "id" attribute for every hidden field. class="j-hidden" - this class is responsible for hiding elements. It contains css properties. Main idea of this feature: when user select some value - some element appears.

Step 2:

In this step we add js code for the "hidden elements" feature. You can add js code directly to the html page where your form is placed. Or you can add it to the "main" js file of your website.

Select with conditions

Main idea of this feature: when user select some value in the first select field - appropriate values appear in the second select field. If user selects default value in the any select field - values in the next select fields should disappear.

In this example we will work with cars and car models. You can add any values you want.

Step 1:

In the first step you have to add select fields to the html page. Note: you have to configure unique "id" attribute for every select field.

Because values in the select fields should appear dynamically - we should add values only for the first select field.

Step 2:

Let's take a look to the js code

First - we have to create a list with models for every car. We do it in the select № 2 section. For example, for the "BMW" car we added three models: M6, X5, Z3. We have created values for the select № 2.

Second - for every model we have to define required colors. We do it in the select № 3. For example, for the model "BMW Z3" we added next colors: 'teal', 'purple', 'cyan'. That is, we have to create arrays with values for the next select field. Every array from these arrays must match to the value from current select field.

Step 3:

In this step we have to add js code that should dynamically add values to the next select fields if current select field is changed.

If some value was selected in the first select field - we create list of values for the second select field and add this list to the html page.

If some value was selected in the second select field - we create list of values for the third select field and add this list to the html page.

Demo for JavaScript config file: "extensions/form_examples_and_form_settings/config_javascript_all_settings.js"

Just Forms Pro advanced version provides a lot of features "out of the box". In this section we will discuss JavaScript features.

The easiest way to see all available features is to open "config_javascript_all_settings.js". This file is very well commented.

Main idea of how JavaScript config from Just Forms Pro advanced version works:

Step 1:

Every form has Just Forms Pro jQuery plugin, connected in the "head" section

Step 2:

In the bottom of every form file you may find js code which defines plugin's features

Full list of available validation rules you will find in the "config_javascript_all_settings.js" file. Use this file as an example and a source of validation rules and copy/paste a code.

Now, let's talk about interesting moments:

Debug mode

By default debug mode is disabled. In case you will see "alert" window with "Oops! Debug errors occurred. Enable debug mode for JavaScript code" message - you have to set "true" for debug mode to see what exactly issue happens

Submit event

In case you don't want to send form data to server, but JavaScript validation should work properly - set "false" for submit feature. All default features will be available, but data won't be sent to a server

Error state

Demo: "extensions/form_examples_and_form_settings/simple_form_with_all_types_of _error_messages/"

Four types of error messages are available: in the block (div with class="j-response"), under the field with error, in tooltip, field highlighting. Six positions are available for error tooltip (example in the "config_javascript_all_settings.js" file).

Also, you may enable/disable a "scroll" feature - a form will be scrolled to a first error (works properly with modal and multistep forms).

Success state

You may enable/disable a "highlight" feature for success state - a field will be highlighted if field value is correct.

Validation event

Three types of validation events are available - on submit (validate form when "Submit" button is clicked), on field change (validate field when it is changed, when focus is lost), on key up (validate field for every keyboard click).

Form types

Modal form - more details in the Modal form section.

Multistep form - more details in the Multistep form section.

Form redirection

Demo: "extensions/form_examples_and_form_settings/simple_form_with_redirection/"

You may set an address of web page where a user should be redirected after successful form submission.

"Thank you" block after form submission

Demo: "extensions/form_examples_and_form_settings/simple_form_with_final_block/"

You may hide a form after successful submission - set "true" for "hide" feature and "Thank you" block will be shown without any changes in html code. Very simple and easy!! Default message from the vocabulary will be shown (more about vocabulary - in the "JS Plugin Code" section).

Also, you may add "close" button to the "thanks" block- set "true" for "closeBtn" feature.

For this moment, "Thank you" block feature works properly, no additional code is required - JavaScript code creates a block and inserts default success message from vocabulary. In case you want to add "Thank you" block manually - you may do that, it will save you some milliseconds of performance (if it's important for your web site).

Pay attention: "Thank you" block should be placed inside "wrapper", after "form".

Form total data

Demo: "extensions/form_examples_and_form_settings/simple_form_with_total_data_block/"

You may collect data from the form fields and show it to the user at the end of the form/before form submission.

First, set "true" for "formTotalData" feature.

Second, add a block with class="j-total-data" inside a form (anywhere you wish).

Third, add a span/spans with data-field="field_name" data attribute. "field_name" should be equal to the "name" attribute from html code.

For example: <input name="subject"> --> <span data-field="subject">

Prevent repeated form submission

You may allow a user to submit a form only once without webpage reloading - set "false" for "repeatSubmission" feature.

In this case, submit button become disabled and button text will be replaced by default text from a vocabulary - "Thanks" (more about vocabulary - in the "JS Plugin Code" section).

Timeout for success message

You may set desired timeout after which success message will be hidden and form become ready for next submission (of course, if you allow repeated form submission). Use milliseconds for timeout.

afterInitHandler()

It is a build-in function, which allows you to add custom code. If this function will return "false" - further form execution will be canceled.

Handler which is triggered after plugin initialization.

beforeSubmitHandler()

It is a build-in function, which allows you to add custom code. If this function will return "false" - further form execution will be canceled.

Handler which is triggered after successful validation and before sending form data to server.

afterSubmitHandler()

It is a build-in function, which allows you to add custom code. If this function will return "false" - further form execution will be canceled.

Handler which is triggered after successful result from server and before showing this result to a user.

We are finish with JavaScript config. Now, let's take a look to some special cases:

JavaScript validation

No matter javascript config contains validation rules for a value or not - this value will be sent to server. DO NOT RELY ON JAVASCRIPT VALIDATION ONLY! ALWAYS APPLY THE SERVER SIDE VALIDATION!

Fields without validation

In case you do not want to apply javascript validation for a field:

First way: comment out validation rules and messages for a field

Second way: set "false" for "required" rule for field

Third way: do not add a field to "rules" and "messages" arrays at all

Demo for modal form: "extensions/form_examples_and_form_settings/modal_form/"

Demo for two modal forms at one page: "extensions/form_examples_and_form_settings/modal_two_forms_on_page/"

Just Forms Pro allows you to create a modal form easily - just set "true" for appropriate feature in JavaScript config.

All modal forms are responsive.

Step 1:

Open JavaScript config code and set "true" for modal form:

Step 2:

Open html form code and add a button/link to show\hide modal window with your form and modal form is ready to work now!:

Pay attention to next moments:

• a button/link should have class="j-modal-open"
• a button/link should have data-modal-wrap data attribute with next value - j-modalwrap- + "id" attribute value of your form. For example, your form has "feedback" id attribute, thus modal button/link should have data-modal-wrap="j-modalwrap-feedback" data attribute.

Step 3:

For this moment, modal form works properly, no additional code is required - JavaScript code creates a modal wrapper around your form and adds modal logic automatically. In case you want to add modal wrapper manually - you may do that, it will save you some milliseconds of performance (if it's important for your web site).

Pay attention: this manually added modal wrapper should have class="j-modal-form" and "id" attribute which should be equal to "data-modal-wrap" data attribute.

Demo for multistep form: "extensions/form_examples_and_form_settings/multistep_form/"

Demo for two multistep forms at one page: "extensions/form_examples_and_form_settings/multistep_two_forms_on_page/"

Just Forms Pro allows you to create a multistep form easily - just set "true" for appropriate feature in JavaScript config.

All multistep forms are responsive.

Open JavaScript config code and set "true" for multustep form:

That's it! Multistep form is ready to work! Pay attention: for proper work in automatic mode your form should contain at least 4 blocks with class="j-row" or class="j-unit" - form will be divided by three blocks for one step.

For this moment, multistep form works properly, no additional code is required - JavaScript code adds multistep logic automatically. In case you want to add multistep logic manually - you may do that, it will save you some milliseconds of performance (if it's important for your web site).

Step 1:

Add class="j-multistep" to the form

Step 2:

Divide "content" block to steps using "fieldset" tags - these will be your steps. You may add as many blocks into every step as you want.

Tip: do not include class="j-response" block to the last step. If validation errors will be shown in this block (more details at "JS Config" section) - this block will be visible only for last step.

Step 3:

Add buttons to the form

Step 4:

In case you want to have multistep form with steps - add "steps" block to the top of the form (do not include this block to the first step)

In this section we will discuss order forms with calculations.

Demo for order form with checkboxes and radios: "extensions/form_with_calculations/calculation_checkbox_radio/"

Demo for order form with date range: "extensions/form_with_calculations/calculation_date_range/"

Demo for order form with dropdowns: "extensions/form_with_calculations/calculation_dropdown/"

Demo for order form with sliders: "extensions/form_with_calculations/calculation_slider/"

Order Form with checkboxes and radios

Every variable in the html markup has "data-price" attribute. This attribute is required. Values of all this attributes are summed and final price obtained.

In the js file we have several function. Every time when some field is changing - appropriate function obtain new price. calculateTotalPrice() function calculate total price.

Every time, after successful submission - "Total price" block become hidden.

Order Form with date range

Some variables in the html markup has "data-price" attribute. This attribute is required. Values of all this attributes are summed and final price obtained.

In the javascript code we have a few interesting moments. Let's take a look to these moments.

Take a look to the "parseDate()" function.

In this function you can select what type of the date format you want to use: "mm/dd/yyyy" or "dd/mm/yyyy". You can use any format. Just comment/uncomment appropriate line with code. Next, you also have to set a date format in the "dateFrom()" and "dateTo()" functions. Set the same format as you have already setted in the "parseDate()" function.

Now your calculations using date range should work properly.

All another code is well commented and any misunderstanding should not arise.

Every time, after successful submission - "Total price" block become hidden and date range is initialized from the scratch.

Order Form with sliders

Every slider in this form has a <input type="hidden"> field. This field is required for sending a value to the server. Also these fields have default values equal to the default values from the slider features.

In the javascript code every slider has it's own UI Slider instance. When user will drag a slider button - new value will be added to the <label> tag for displaying in the form and to the hidden input as we mentioned above.

In the "square feets" and "feets price" sliders we execute "calculateTotalPrice()" function. This function will calculate total amount of the money and add it to the html page.

Every time, after successful submission - "Total price" block become hidden.

Order Form with chained dropdowns

This form contains several "select" tags with related data. First "select" tag has options in the html markup, second and third tags - in js file.

Js code has a few moments: pay attention to the two arrays. First array "models" is for notebook models. You can add as many as you wish. Second array "actions" is for service actions and prices. You can add as many services as you wish. Do not forget to "price" element for every new "action" attribute.

Every time, after successful submission - "Total price" block become hidden and "Type of work" dropdown become empty.

Data Validation

---

Demo for JavaScript validation rules: "extensions/form_examples_and_form_settings/config_javascript_all_settings.js"

Demo form with all available validation methods: "extensions/form_examples_and_form_settings/simple_form_with_all_validation_rules/"

Just Forms Pro advanced version provides wide selection of build-in js validation rules. You may set any rule (and as many as you wish) for every form field in seconds.

List of default validation methods:

• required - field is always mandatory
• email - value should be proper email address
• url - value should be proper url
• integer - value should be integer - 2, 67, -234
• number - value should be integer or float - 2, 67.4, -234, 0.45
• minlength - minimal length of the value, integer
• maxlength - maximal length of the value, integer
• rangelength - range length of the value, array with two integers
• minvalue - field value should be greater than rule value, integer/float
• maxvalue - field value should be less than rule value, integer/float
• rangevalue - field value should be in range of values, array with two integers/floats
• equalTo - field value should be equal to newly received other field value
• requiredFromGroup - set a quantity of required values from the listed fields
• file check - validate a file

Pay attention: JavaScript config contains a lot of settings and special cases. For better understanding, please read sections JS Config.

Below we will discuss interesting moments:

Required From Group:

This rule provides minimum quantity of valid values which you have to specify. In this particular case - "1" is a minimum quantity of fields with valid value (not empty). You may set any desired quantity, according to the quantity of fields.

JavaScript config: you have to add some special class to the fields you wish to be a part of validation process.

Equal To:

This rule provides checking if current value is equal to another value.

JavaScript config: you have to use a value of "id" html attribute.

Group of checkboxes / Multiple dropdowns:

This rule provides checking if current value contains an array of values.

JavaScript config: you have to add "" and [] to the validation rule. Do not forget to add [] to the field name in html code.

File validation:

This rule provides file checking. You may use this rule in next ways:

• "validate" - set "true" if file is NOT mandatory, but if user adds a file - validate it
• "required" - set "true" if file is ALWAYS mandatory
• "size" - set allowed file size
• "extension" - set of allowed file extensions. List of allowed file extension you may find in the config files (this list is the same for JavaScript and PHP).

Pay attention: you have one error message for "size" and "extension" validation rules.

JavaScript config:

Several Forms at One Page

---

Demo modal forms: "extensions/form_examples_and_form_settings/modal_two_forms_on_page/"

Demo multistep forms: "extensions/form_examples_and_form_settings/multistep_two_forms_on_page/"

Step 1:

Copy html code for both forms to html page.

Step 2:

Add JavaScript config code for both forms.

New Form

---

In this section we will discuss how to create a new form from scratch.

Step 1

Open web page (create new web page) and copy "head" section from any default form. Specify desired style, color and jQuery plugins (jQuery library and jquery.j-pro.js are required files):

Step 2

Create "j-wrapper" div with desired width:

Add inside "j-wrapper" div "form" tag with required attributes: "action", "class", "id", "method", "enctype" (if your form will have "file" field):

Add "header", "content", "footer" with desired elements inside:

Step 3

Open your main javascript file with custom code and specify JavaScript config code for a form according to form fields and desired js features:

FAQ

---

!!!!!!

READ THIS SECTION !!!
FAQ ANSWERS BELOW INTENDS THAT YOU HAVE FOLLOWED THE STEPS FROM THIS SECTION !!!

!!!!!!

If you have faced any issue during a work with framework - do next steps:

• Turn on "debug" mode inside JavaScript config file. If code generates an issue - it will be displayed ( "JS Config" section contains info how to turn on "debug" mode )
• Open a browser console. It is development tools which will help you to see all errors

How can I open a browser console?

• Chrome dev tools - it is build-in tools for developers in the Chrome browser. Open your webpage and press F12. In the "Console" tab you should see errors description

• FireBug plugin - it is not build-in tools for Firefox browser and you have to download it first. You may download it from official web site here. After installation you have to open your page and press F12. In the "Console" tab you should see js errors description.

For avoiding a lot of errors please be sure that:

• you don't connect the same js script twice to your html page (for example jQuery library, at the top and bottom of the html page);
• you have a proper order of js scripts at your page (for Just Forms Pro js plugins - use default form as an example of proper order). Js scripts should be connected as below:
  • jQuery library
  • any js plugin...
  • Just Forms Pro plugin ( jquery.j-pro.min.js )
  • any js plugin...
  • your_main_js_file.js ( file with all custom code, including Just Forms Pro config code )

!!!!!!

When I click "Submit" button - fields validation occurs, but after all fields become valid - nothing happens, no success/error message from the server.

First, be sure you set "true" for "submit" event in JS config code.

Second, if submit button performs "processing" action (like on pic below) - open "console" and enable "debug" mode for js config.

I want to create my own button/link to open a modal form

"Modal Form" section contains detailed answer how to do that.

I want to upload a file. When I click on the button to choose the file to upload, I get "C://fakepath/filename". I want to see a real path to the file instead the fake path.

The browser changes the real path to "C:\fakepath\"" so malicious sites can't use javascript to glean information about your computer's directory structure.

Try to change "onchange" function in your html page like on pic below:

I want to add a new field to my form.

It is very easy with Just Forms Pro. Let's start:

Open web page with a form and add html code:

Open JavaScript config code and add validation rule and message. Now, this new field has client side validation:

And a new form's field is ready to work!!

If you want to delete any field - take all steps in reverse order.

Where could I find dictionaries with default messages? I want to add my own messages.

Open "jquey.j-pro.js" file and at the top you may see all default messages:

I want to change phone mask / phone validation rule.

Phone number validation process could be divided on two stages: masking and validation.

Masking:

Open JavaScript config code and change/delete a line with mask, like on the pic below. You may set any mask or delete it at all.

A lot of examples of masks you may find on home page of the mask plugin

Validation:

As for any other field you may set any validation rule for the "phone" field. More info - "Data Validation" section.

How can I change the width of my form?

All forms have two variants of width:

• class="j-wrapper-640" - 640 px;
• class="j-wrapper-400" - 400 px.

For example, you want multistep form will have a width 800px. Open main css file for your style and make changes:

Now your form have a width - 800 px, and it will be responsive when screen width will be equal to 620px. If you want your form will be responsive earlier, for example when screen width will be 750 px, change next line of code:

How can I change form style and color?

Four styles are available by default - "modern", "dark", "flat", "minimal". Every style has it's own default colors. All these files you may find in the "j-pro/css" directory.

Open web page with form and connect desired style file, connect desired color for this style (for example black color). Next - add appropriate css class to the form ( "j-black" ). Now your form and all form elements have selected style and color.

I have faced with next messages/issues. What is it?

Case 1:

You have an error in JavaScritp config code. Enable "debug" mode for js code.

Case 2:

If you get such type of error - most probably you are working on local host and you try to submit a form without localhost connection.

Case 3:

If you get an 500 Server Error - please check your backend files. This error may arise because any problem with server files: a typo, server settings, parse error, etc. Also, please take a look to the server log file, error description may be there. If you get this error after any changes in server files - check these files.