Thank you for purchasing Just Forms Pro full version. If you have any questions that are beyond the scope of this help file, please:
- pay attention to the FAQ section at the end of this document. This section contains a lot of answers and examples
- feel free to email me via contact form in my profile page.
Just Forms Pro full version is a form framework which is designed to help you with so important process like getting data from your website and further processing of this data - sending within an email, saving to a database, saving to PDF or CSV file.
In the pack you may find a list of ready-to-use forms and extensions. In point of fact, all forms is a one form which is adapted for different needs. This form contains main JavaScript file and a list of PHP files for different tasks - validation, PDF/CSV creation, database processing, etc.
Programming skills are not required at all, to work with Just Forms Pro full version. All form settings are pleaced at two files - JavaScript config file and PHP config file. All you have to do is to set "true" or "false" for one or another feature (detailed information about config files you may find in appropriate sections).
Moreover, if you want to add a custom field to default form or create your own custom form - all you have to do is to copy/paste html code and specify desired features in config files. That's it !! Custom form works properly now and has all features which are available for default forms (validation, email sending, etc)
Just Forms Pro full version makes next features available at one your click:
If you`re reading this line, most probably you already unzipped the downloaded package from CodeCanyon. Now, in the extracted package you will find a folder named "source". When you open this folder you will find 2 directories:
In general, HTML form structure looks like below:
All CSS code is in files:
Four styles are available for Just Forms Pro full version - "modern", "dark", "flat", "minimal". You may switch between styles very easy - just connect desired css file to the form. Any changes in html code are not required.
Every style has it's own default color. And you can select any color from available in the css folder. To change form color you have to add css file with color settings. Also, you have to add a "color" class to the form. Pay attention that "color" class has to be equal to the css file name. For instance, take a look to the picture below:
If you want to use some extra fields (date pickers, phone masking, etc.) - you have to add appropriate js scripts to the "head" section of your html page. More info - in the "JS Plugins" section.
You have to copy j-pro and index.php file to your server (some folder).
Form files:
Let`s take a look to the file "config.php" in the folder "j-pro/php/". This file contains all php settings:
In these lines you have to enter your email address, your name and subject of the message that your clients will send to you.
Now, your form is ready to use.
At the bottom of "index.php" file you may find javscript config settings for the form. Here you may add/change/delete settings for javascript config for the form:
First, you have to add necessary js scripts and files in the "head" section of your html page. Be sure that you set a proper path to form files inside scipt tags.
If your form contains php security token (all default forms from "forms" directory contain this token) - you have to copy php block with token creation to the top of html page where form is placed:
Second, you have to copy a form to the html page. The form is placed in the "div" with class="j-wrapper j-wrapper-640". More about form elements in the "HTML Structure" section.
You have to copy j-pro to your server. Be sure that hmtl code contains proper path "j-pro" folder:
Let`s take a look to the file "config.php" in the folder "j-pro/php/". This file contains all php settings:
In these lines you have to enter your email address, your name and subject of the message that your clients will send to you.
At the bottom of "index.php" file you will find javscript config settings for the form. Here you may add/change/delete settings for javascript config for the form. You may leave it here if webpage doesn't have javascript files. But most probably you have to copy this block to your main javascript file with custom code, inside "$(document).ready(function(){});" function.
Pay attention: you have to copy "$( "#form_id" ).justFormsPro({});" block inside your "$(document).ready(function(){});" function. Do not copy form's "$(document).ready(function(){});" function inside your's "$(document).ready(function(){});" function:
Now, your form is ready to use.
Let`s take a look to the HTML structure with more attention. All forms have similar structure so you don`t need to change a lot of code with other forms.
Demo of the grid system: "extensions/html_examples_and_plugins/grid.html"
All forms have responsive design. It works well for PC, tablets, mobile.
Grid system is used for creating form layouts through a series of rows and columns which include your form elements.
A combination of all columns in a row have to add up to 12.
For example:
For instance, take a look to the pictures below:
If you want to create an element that will be over the entire width of the form - you don't need to use class="j-row". Just wrap your element in class="j-unit". More about class="j-unit" - in the next section.
Demo of the elements: "extensions/html_examples_and_plugins/elements.html"
class="bg-pic" - this class required only for demonstration purpose. It sets site background.
class="j-wrapper" - wrapper-class for all forms.
class="j-wrapper-400" / class="j-wrapper-640" - this class sets the width of the form. You can toggle these classes and thereby toggle form width:
You can add a header to your form using this class.
"Header" class has to be added before "content" class in the html markup.
If you want to add an icon to your header - just add a line with icon.
You should to add all form elements inside this class.
This class is used for buttons. Add your buttons inside this class.
Two types of dividers are allowed: line divider and text divider.
Also, you can set the height for the gaps for dividers. Let's take a look to the css file:
So, you can select or 20px height gap, or 45px height gap.
This class is required for all forms. You have to add this class to any form for proper form displaying.
This class is required for creating indents between rows in the form. You can add this class to any element and this element will have bottom margin equal 25 pixels. Pay attention: these indents will remain on any device: PC, tablet or mobile. That's why class="j-unit" can be used by several ways.
Case 1 - standalone element
Add class="j-unit" to every standalone element. This element will display separately from another form elements on any devices.
Case 2 - group of elements
Add class="j-unit" to a group of elements (radio, checkbox, etc.) and this group will display without gaps on any device (any screen width).
Note: you have to add this class to every field in the form. This class is required for validation process
Pay attention to the class="j-icon-left". This class required for the left-side icons. For the right-side icons you have to add class="j-icon-right".
Also take a look to the "for" and "id" attributes. These attributes have to be equal if you want to make focus on the field when icon is clicked.
Font Awesome - free library of icons - is used for icons.
More about icons and labels: "extensions/html_examples_and_plugins/icons_labels.html"
Label for each column:
Replace "#" in the "href" attribute with path to the "terms of service" document.
Two types of tooltips are allowed: text tooltip and image tooltip. You can use tooltip with any input: text, textarea, select. For image tooltips don't forget to add images to the form and set proper path to these images. More about tooltips: "extensions/html_examples_and_plugins/tooltips.html"
File upload button available in four variations.
Prepend wide button:
Append wide button:
Prepend narrow button and append narrow button:
For multiple file inputs you will have to adjust the markup. For example, it should look like this:
Submit and Reset button are available.
For primary button you have to add class="j-primary-btn" to the button.
For secondary button you have to add class="j-secondary-btn" to the button.
For processing button you have to add class="j-processing" to the button.
You can use widget addons or widget buttons in your form. Widgets can be of of different widths: 50px and 130px. Also, widgets can be left-side and right-side.
Widget addonFor instance, let's take a look to the html markup of narrow left-side widget addon:
As you can see, widget is created using class="j-widget". We set left padding for input using class="j-left-50". Widget addon is created using class="j-addon". Width and placement (left side or right side) of addon are configured by class="j-adn-50" and class="j-adn-left" accordingly. Pay attention that padding for the input has to be the same as addon width (in this example - 50px)
Html markup for wide right-side widget addon
Widget button
All rules for widget addons are suitable for widget buttons. But widget button is created using class="j-addon-btn".
Html markup for wide left-side widget button
Demo for disabled state: "extensions/html_examples_and_plugins/disable_state.html"
You can make any form element disabled. Just add class="j-disabled-view" and "disabled" attribute to the element. HTML markup for the disabled text input:
Demo for error state: "extensions/html_examples_and_plugins/error_state.html"
HTML markup for error message:
HTML markup for input field with error state:
The "span" with class="j-error-view" contains error message for the some particular field.
Demo for success state: "extensions/html_examples_and_plugins/success_state.html"
HTML markup for success message:
HTML markup for input field with success state:
The "span" with class="j-success-view" contains success message for the some particular field.
Demo for info state: "extensions/html_examples_and_plugins/info_state.html"
HTML markup for info message:
HTML markup for input field with info state:
The "span" with class="j-info-view" contains info message for the some particular field.
Demo for warning state: "extensions/html_examples_and_plugins/warning_state.html"
HTML markup for warning message:
HTML markup for input field with warning state:
The "span" with class="j-warning-view" contains warning message for the some particular field.
Demo for image blocks: "extensions/html_examples_and_plugins/image_blocks.html"
You can use two types of image block: with or without text description. Html markup is similar for both types.
First of all - create a label with "j-checkbox-block" or "j-radio-block" class.
Next - add span with class "j-block-content" and span with class "j-block-image". If you want - you may add a title for image.
For image blocks with text description you have to do the same, but add several elements: span with class="j-block-text-title" for text title. And span with class="j-block-text-desc" for text.
Please note: you may use grid system for image blocks as you did for all another fields, but with one condition - use "span" tags instead "div" tags for grid system.
Demo for tabs: "extensions/html_examples_and_plugins/tabs.html"
You may use tabbed window to display multiple forms at one screen. First - add div with class "j-tabs-container".
Next - add html elements for tabs with "id" attributes and "j-tabs-label" classes.
Add divs with forms, with "id" attributes and "j-tabs-section" classes.
In case you need more tabs - you may easily add css settings for new sections. Open main css file (for style you have chosen for your form) and add as many tabs as you need. Do not forget to add appropriate "id" and classes to the html markup.
Every form has next css files in the "head" sections:
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:
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.
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.
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.
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.
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.
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.
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.
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.
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 full version. These additions will help your users during form submission process.
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.
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.
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:
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.
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.
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 full version provides a lot of features "out of the box". In this section we will discuss JavaScript features. Info about PHP features you may find in the "PHP Config" section.
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 full 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 PHP config file: "extensions/form_examples_and_form_settings/config_php_all_settings.php"
Just Forms Pro full version provides a lot of features "out of the box". In this section we will discuss PHP features. Info about JavaScript features you may find in the "JS Config" section.
The easiest way to see all available features is to open "config_php_all_settings.php". This file is very well commented.
Main idea of how PHP config from Just Forms Pro full version works:
Step 1:
Every form has "action" attribute with the path to php file on server. This file contains a logic for all available php features:
Step 2:
This file connects required php files, including "config.php" where all user settings are placed:
Full list of available validation rules you will find in the "config_php_all_settings.php" 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:
User's data
Add your name, email and subject for a message.
Debug mode
In case you will see server message "Oops! Debug errors occurred. Enable debug mode for php code" - you have to set "true" for debug mode to see what exactly issue happens.
PHP token
Demo form with php token: "extensions/form_examples_and_form_settings/simple_form_with_php_token/"
Demo two form with php tokens at one page: "extensions/form_examples_and_form_settings/simple_two_forms_on_page_with_php_token/"
Every form may contain php security token. Token validation is implemented on server only (JavaScript config doesn't have validation rule for token). More detailed info about token - in the PHP Token section.
Google reCaptcha
Demo form with google reCaptcha: "extensions/form_examples_and_form_settings/simple_form_with_google_recaptcha/"
Every form may contain google reCaptcha. reCaptcha validation is implemented on server only (JavaScript config doesn't have validation rule for reCaptcha). More detailed info about reCaptcha - in the Google reCaptcha section.
Processing the form data
This block contains all available features for email sending process - email sending method, recipient feature, autoresponse feature:
Admin/recipients email template: All fields from $config["rules"] with their values will be added automatically to the email template for admin and recipients. You don't have worry about adding/deleting new fields. For the files - values will be files names under which these files was saved on server.
Autoresponse email template: This email template doesn't have any fields/values from the form, it contains general information only. You may add any text you wish.
Processing the form files
Demo form with files: "extensions/form_examples_and_form_settings/simple_form_with_files/"
This block contains all available features for files uploaded through the form:
If your form doesn't have "file" fields - you may leave this block empty - like "file" => array()
Save form data to PDF/CSV files
Demo form PDF/CSV: "extensions/form_examples_and_form_settings/simple_form_with_save_data_to_csv_and_pdf/"
These blocks are similar, thus rules listed below are suitable for both features.
This block contains all available features for PDF/CSV files:
Save to database
Demo form with database: "extensions/form_examples_and_form_settings/simple_form_with_save_data_to_database/"
This block contains all available features for database
More details - in the Database section
We are finish with php config. Now, let's take a look to some special cases:
ALL fields
$config["rules"] and $config["messages"] arrays should contain ALL field names from html code. Fields with names from $config["rules"] and $config["messages"] arrays only will take part at php data processing (email sending, database storing, etc).
For example:
html code contains two fields: <input name="fname"> and <input name="lname">, but $config["rules"] and $config["messages"] arrays contain field "fname" only. In this case field "lname" will be lost and will not take part at php data processing
In case you need a field to be a part of php processing, but you do not want to apply php validation - set "false" for field in $config["rules"] and leave empty $config["messages"]
Hidden fields
Unlike from JavaScript config, php config doesn't know anything about "display:none;" / "visibility:hidden;" / 'disabled="true"' settings for a field. Therefore: field will be validated and will take part at php data processing if:
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:
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 multistep form with steps: "extensions/form_examples_and_form_settings/multistep_form_with_steps/"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/"
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.
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.
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.
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.
Demo for JavaScript validation rules: "extensions/form_examples_and_form_settings/config_javascript_all_settings.js"
Demo for PHP validation rules: "extensions/form_examples_and_form_settings/config_php_all_settings.php"
Demo form with all available validation methods: "extensions/form_examples_and_form_settings/simple_form_with_all_validation_rules/"
Just Forms Pro full version provides wide selection of build-in php and 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. All methods are available for both types of validation: javascript and php.
Pay attention: JavaScript config and PHP config contain a lot of settings and special cases. For better understanding, please read sections JS Config and PHP Config.
Below we will discuss interesting moments:
PHP Token and Google reCaptcha
These fields validated on server only (php validation). More details - in "PHP Token" and "Google reCaptcha" sections.
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.
PHP config: you have to use field names instead special class to make 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.
PHP config: you have to use field name to make field you wish to be a part of validation process.
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.
PHP config: you have to use field name only, without [] and additional "". PHP code automatically creates a string with values from an array in this case.
File validation:
This rule provides file checking. You may use this rule in next ways:
Pay attention: you have one error message for "size" and "extension" validation rules.
JavaScript config:
PHP config:
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/"
Demo simple forms with php tokens: "extensions/form_examples_and_form_settings/simple_two_forms_on_page_with_php_token/"
If your forms contains php tokens - you have to create php token for every form.
And add these tokens to your forms.
Add JavaScript config code for both forms.
Copy/paste next files in the "php" directory: "action.php", "config.php", "constants.php". Add some unique prefixes to every file.
Open both "action.php" files and change a code according to new file names.
Open html code once again and add new values to "action" form attributes according to new file names.
There are no special rules for several multistep/modal forms at one page. You have to complete all steps from this section.
Let us summarize: After you will move through previous steps – your forms will be ready for work independently from each other. ANd what about database, PDF or CSV files? All these features work independently from the form and form fields, thus they may be used with any type of form and with any quantity of forms.
Demo: "extensions/form_examples_and_form_settings/simple_form_with_php_token/"
Just Forms Pro full version contains strong defence against XSS attack and CSRF attack. You have already known about reCaptcha, let's take a look to another defence methods.
Each default form from "forms" directory contains next code in the HTML markup:
At the beginning of each HTML document, PHP class csrf.php is included and an instance of this class is created. This instance is necessary and helps create unique token. Every time, when a form is submitted, this token is checked on the server. If token isn't correct, user have to reload web page where form is placed. So, no one has opportunity to connect to your form and submit it with your information, like login and password.
File "config.php" contains rules and message for CSRF token validation:
Note: field name in rules/messages array for CSRF token should always called "token". It is required for php build-in logic.
Note: "prefix" is a token control rule for better security and should not have an error message in the "messages" array, unlike all other validation rules.
Note: "token" instance in html code and "prefix" rule in php config should have the same token name.
Next, take a look to the part of code at "csrf.php" file.
Pay attention to the timeout variable at the beginning of the code. This variable contains time period for each token in seconds. By default token will be valid 300 seconds (5 minutes). You can set any time period for tokens.
All input data are validated on the server: default validation ( htmlspecialchars() and strip_tags() functions ) and your validation rules ( which you will add ).
Demo: "extensions/form_examples_and_form_settings/simple_form_with_google_recaptcha/"
You may use Google reCaptcha within any default form from the pack. Let's take a look to the process of installation/tuning of reCaptcha:
First of all you have to go to this google page:https://www.google.com/recaptcha/intro/index.html and click "get reCaptcha" button. Sign in into your google account and register your site where the captcha will be placed.
You should get two keys: a site key - this key you have to insert into your html form
and the secret key: this key is required for the validation process on your server
Open a html form and add next script to the bottom of the "head" section:
Next, insert a div with google reCaptcha instance in the html markup. Use "site key" from the previous step to insert inside this div.
Now your reCaptcha works. But we should add verification rules to the php scripts, because now reCaptcha is only a nice looking checkbox in the user's browser.
Please open your "j-pro/php/constants.php" file and add "server key".
Open "j-pro/php/config.php" file and add validation rules for reCaptcha (if they are not already there). Example of these rules you may find in the "extensions/form_examples_and_form_settings/config_php_all_settings.php" file:
Note: field name in rules/messages array for google reCaptcha should always called "recaptcha". It is required for php build-in logic.
For now your recaptcha should works fine. Please test it. In case you did everything properly (please check one more time that you added valid keys and did not make any typo in the code), but recaptcha doesn't work - set "true" for alternative mode:
This mode actives another way to verify your recaptcha.
Note: this mode doesn't required and should not be added to php config file in case it is not used.
Note: "alternative_mode" is a recaptcha control rule for better user experience and should not have an error message in the "messages" array, unlike all other validation rules.
Useful links:Demo form with database feature: "extensions/form_examples_and_form_settings/simple_form_with_save_data_to_database/"
In this section we will discuss how to work with database (DB).
Open "config.php" file and set "true" for DB feature and connection method.
Open "constants.php" file and add you DB settings.
Now you have to create a table in a DB to save all form data there. Every default form from "forms" directory contains "sql_demo_database_table" directory with SQl code for default DB table. Create DB table using this SQL code.
For now, all form data should be saved in a DB properly.
Pay attention: Because DB feature works automaticaly - column names in a DB table should be the same as field names in html code, in JavaScript config and PHP config.
Pay attention: If your form contains php token or google reCaptcha - do not create DB columns for these fields. They will be removed from an array with values automaticaly. For example: PHP config fields - token, recaptcha, name, email, message. DB columns should be the next - name, email, message.
Demo form with database feature: "extensions/js_async_request_to_database/"
In this section we will discuss a form with ability to get data from DB asynchronously.
Open this form and take a look to the js functions for async DB request:
Main idea that you may specify field name ("name", "email", etc) whose value should be received from DB after js code will be loaded (right after web page will be loaded). Thus, a user will see a form with some predefined data from DB.
Open "j-pro/php" directory and you will see a new folder "database_async". This folder contains all required code for async DB feature and if you will add any changes - add them into the files inside this folder. Do not add changes to the default php files, because they contains code for default form features.
So, open "database_constants.php" file and add you DB settings.
Now you have to create a table in a DB to with data (or you already have such table). SQL code for default DB table you may find in the "sql_demo_database_table" directory.
Take a look to the "database_action.php" file. You may select a type of DB connection. According to this type appropriate functions will be called from "database_helpers.php".
Open "database helpers.php" and create your own DB query. Default DB query selects data from column which has a name equal to the value you specified in the html code.
PDO query:
MySQLi query:
In this section we will discuss how to create a new form from scratch.
If your form should have php token - do actions from this step, if not - skip this step.
Create web page with ".php" extension. Open it and copy php function for token:
Do not forget to add php token instance to the "form" later:
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):
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:
Open your main javascript file with custom code and specify JavaScript config code for a form according to form fields and desired js features:
Copy "j-pro" directory to your server. Use any default form from "forms" directory in the pack as a source.
Open "config.php" file in the "j-pro/php" directory and specify PHP config code according to form fields and desired php features:
If your form should save data to a DB - do actions from this step, if not - skip this step.
Open "constants.php" file in the "j-pro/php" directory and specify DB settings:
Create DB table for saving data from your form and set "true" for desired type of DB connection inside "config.php" file. More details - in the "Database" section.
!!!!!!
READ THIS SECTION !!!!!!!!!
If you have faced any issue during a work with framework - do next steps:
How can I open a browser console?
For avoiding a lot of errors please be sure that:
!!!!!!
"Google reCaptcha" section contains detailed answer how to do that.
First, we are talking about live server, not localhost. From localhost you can't get emails to your live email address
Open "config.php" file and check next items:
be sure that you added valid email address
be sure that you set "true" for email sending feature and "true" for one of the methods for email sending
Also check:
your spam folder
server error log file, if any issue arise - it should be there.
Sometimes mail server don't apply css settings from email template. You may delete this setting - bgcolor="#f6f6f6" - from the "body" tag in the "message.php" file. Now you will have default background color from email 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 and php configs.
"Modal Form" section contains detailed answer how to do that.
PHP Config section contains "Processing the form data" subsection with detailed answer how to duplicate message to the user or sent an autoresponse message.
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:
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:
Open PHP config code (config.php) and add validation rule and message. Now, this new field has server side validation:
And a new form's field is ready to work!! New field will be added automaticaly to PDF/CSV files and to mail template. In case your form saves data to DB - do not forget to add a DB table column for this new field.
If you want to delete any field - take all steps in reverse order.
For JavaScript code - open "jquey.j-pro.js" file and at the top you may see all default messages:
For PHP code - open "constants.php" file:
First of all, please read "PHP Token" section. It should help you with a lot of questions.
Web page with form has ".php" extension because the form has php security token. In the top of every default form pages you may find php code.
I want to add a token to my form:
In case you need a token - the extension of the web page where form is placed should be ".php", because there is php function.
Add a php token instance + specify a token name:
Open "config.php" and add validation rule for token. Pay attention to the "prefix" value - the same value as in html code:
I want to remove a token from my form:
Apply actions from section above in reverse order.
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.
All forms have two variants of width:
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:
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.
If you sometimes get this error - you are probably using a shared hosting. Quality of this hosting is not good. You can try to change your hosting.
If you always get this error:
First, this type of error arise when you don't have permission to use directory "usr/sbin" or there is no installed sendmail function in this directory. You can create a support ticket and ask your host about sendmail.
Second, you may use mail() or smtp() function for email sending. Open "config.php" and set "true" for one of the methods ( ONLY ONE, do not set "true" for all methods ). For smtp() - do not forget to add your smtp settings.
This error occurs because many reasons: smtp settings, your host settings etc. This error means that your form can't connect to your mail server. Most probable, error occurs because smtp settings on your host. Every host has his own smtp settings( port connection, authentication rules ) You can make a request to your host support and ask them about how you can solve this problem.
You have to know what kind of error appears when you try to connect to the server. Because this issue can occur for many reasons.
First, please open "config.php" and set "true" for general debug mode and set "2" for smtp debug mode:
Open JavaScript config code and set "true" for debug mode:
Open "console" in your browser and you should see error description. How to open "console" you may read at the top of FAQ section:
Now you know what exactly smtp error arise while you are trying to connect to your server. You can find the answers using links below.
Do not forget to change the code back in the "config.php" and JavaScript config.
Also, a screenshot with working smtp settings as an example:
Some useful links where you can find why smtp error occurs:
send-email-using-gmail-smtp-server-through-php-mailerYou have an error in JavaScritp config code. Enable "debug" mode for js code.
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.
If you can see this function when your form is placed on a real web server - for some reasons php code doesn't executing on your server. Please, check logs on your server.
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.
Forms were tested with latest PHP versions (up to 7.3.9)
Initial release
I`ve used the following products in my work:
Thank you for your attention and thank you for making the decision to buy this product. I hope you found it worthwhile.
Please, don`t forget to leave nice feedback about this product and rate it 5 stars :))
Best Regards, Alex.