Just Forms Pro

full version

v 1.1

Form Framework


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:

Directory organization:

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:

  • extensions - contains extensions and form examples;
  • forms - contains ready-to-use forms

Basic HTML structure:

In general, HTML form structure looks like below:

html structure

Basic CSS structure:

All CSS code is in files:

html structure

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:

html structure

Basic JS structure:

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.

html structure

Case 1: Install a form like an independent/new html page

Copy files

You have to copy j-pro and index.php file to your server (some folder).

Form files:

html structure html structure
PHP config

Let`s take a look to the file "config.php" in the folder "j-pro/php/". This file contains all php settings:

html structure

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.

JavaScript config

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:

html structure

Case 2: Install a form to an existing html page

HTML markup

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.

html structure

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:

html structure

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.

html structure
Copy files

You have to copy j-pro to your server. Be sure that hmtl code contains proper path "j-pro" folder:

html structure html structure
PHP config

Let`s take a look to the file "config.php" in the folder "j-pro/php/". This file contains all php settings:

html structure

In these lines you have to enter your email address, your name and subject of the message that your clients will send to you.

JavaScript config

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:

html structure

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.

Grid sys​tem

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. 

  1. Use rows class="j-row" to create horizontal groups of columns class="j-span"
  2. Content should be placed within columns
  3. Column classes class="j-span" have to immediately be followed by a column number such as 6, so the entire class will look like this class="j-span6"
  4. class="j-offset" - class that allows you to make some offsets before or between columns
  5. Offset classes class="j-offset" have to immediately be followed by an offset number such as 4, so the entire class will look like this class="j-offset4"
  6. Grid form columns are created by specifying the number of twelve available columns you wish to span. 

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:

html structure html structure

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.

Elements

Demo of the elements: "extensions/html_examples_and_plugins/elements.html"

Form wrapper
html structure

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:

"Header" class

You can add a header to your form using this class.

html structure

"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.

html structure
"Content" class

You should to add all form elements inside this class.

html structure
"Footer" class

This class is used for buttons. Add your buttons inside this class.

html structure
Horizontal divider

Two types of dividers are allowed: line divider and text divider.

html structure

Also, you can set the height for the gaps for dividers. Let's take a look to the css file:

html structure

So, you can select or 20px height gap, or 45px height gap.

"j-pro" class

This class is required for all forms. You have to add this class to any form for proper form displaying.

html structure
"j-unit" class

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.

html structure html structure html structure

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).

html structure html structure html structure
"j-input" class

Note: you have to add this class to every field in the form. This class is required for validation process

html structure
Text input with left icon
html structure

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.

Text input with icon and label
html structure

More about icons and labels: "extensions/html_examples_and_plugins/icons_labels.html"

Tips: if you want to add one label for whole row, no matter how many columns it has - add "label" before first class="j-span" in the row. But if you need "label" for each column - add label after each class="j-span".
 
Label for a few columns:
html structure

Label for each column:

html structure
Email and URL inputs
html structure
Search and Textarea inputs
html structure
Select input
html structure
Link
html structure

Replace "#" in the "href" attribute with path to the "terms of service" document.

Tooltips

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"

html structure
Note message
html structure
Columned Checkbox and Radio
html structure
Inline Checkbox and Radio
html structure
Columned Toggles
html structure
Inline Toggles
html structure
Ratings
html structure
File Buttons

File upload button available in four variations.

Prepend wide button:

html structure

Append wide button:

html structure

Prepend narrow button and append narrow button:

html structure

For multiple file inputs you will have to adjust the markup. For example, it should look like this:

html structure

Notice: The "onchange", the "id" and the "name" changed to "file1" and "file2".  
Buttons

Submit and Reset button are available.

html structure

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.

Widget

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 addon

For instance, let's take a look to the html markup of narrow left-side widget addon:

html structure html structure

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

html structure html structure

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

html structure html structure
Disabled state

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:

html structure
Error state

Demo for error state: "extensions/html_examples_and_plugins/error_state.html"

HTML markup for error message: 

html structure

HTML markup for input field with error state:

html structure

The "span" with class="j-error-view" contains error message for the some particular field.

Success state

Demo for success state: "extensions/html_examples_and_plugins/success_state.html"

HTML markup for success message: 

html structure

HTML markup for input field with success state:

html structure

The "span" with class="j-success-view" contains success message for the some particular field.

Info state

Demo for info state: "extensions/html_examples_and_plugins/info_state.html"

HTML markup for info message: 

html structure

HTML markup for input field with info state:

html structure

The "span" with class="j-info-view" contains info message for the some particular field.

Warning state

Demo for warning state: "extensions/html_examples_and_plugins/warning_state.html"

HTML markup for warning message: 

html structure

HTML markup for input field with warning state:

html structure

The "span" with class="j-warning-view" contains warning message for the some particular field.

Image blocks

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.

image block

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.

image block

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.

image block

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.

Tabs

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".

tabs

Next - add html elements for tabs with "id" attributes and "j-tabs-label" classes.

tabs

Add divs with forms, with "id" attributes and "j-tabs-section" classes.

tabs

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.

tabs

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

html structure
  • 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:

html structure
  • j-pro-additions.js - additional methods for Just Forms Pro full 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.

html structure

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.

html structure

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.

html structure

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.

html structure

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.

html structure

Step 1:

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

html structure

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.

html structure
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.

html structure

Step 1:

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

html structure

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.

html structure
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.

html structure

Step 1:

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

html structure

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.

html structure
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.

html structure

Step 1:

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

html structure

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.

html structure
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.

currency

Step 2:

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

currency

Step 3:

Add js code required for the plugin.

currency
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.

autocomplete

Step 2:

Add id attribute to the input with autocomplete feature.

autocomplete

Step 3:

Add js code required for the autocomplete.

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

google map

Step 2:

Add id attribute to the div with google map feature.

google map

Step 3:

Add js code required for the google map.

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.

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.

html structure

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.

html structure
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.

html structure

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.

html structure
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.
html structure

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.

html structure
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.

html structure

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.

html structure
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.

html structure

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

html structure

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.

html structure

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.

html structure

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

html structure

Step 2:

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

html structure html structure

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

html structure

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

html structure

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).

html structure

Success state

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

html structure

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).

html structure

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.

html structure

"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.

html structure

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).

html structure

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.

html structure

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

html structure

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">

html structure

Prevent repeated form submission

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

html structure

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.

html structure

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.

html structure

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.

html structure

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.

html structure

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

html structure

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

html structure

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:

html structure

Step 2:

This file connects required php files, including "config.php" where all user settings are placed:

html structure

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.

html structure

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.

html structure

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.

html structure

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.

html structure

Processing the form data

This block contains all available features for email sending process - email sending method, recipient feature, autoresponse feature:

  • "send" - set "true" if you wish an email should be sent
  • "method" - select a method which should be used for email sending:
    • "mail" - set "true" for mail() function
    • "sendmail" - set "true" for sendmail() function
    • "use_smtp" - set "true" for smtp() function. Do not forget to add your smtp settings
  • "recipient" - set "true" if you wish an email should be sent to recipient/recipients (the same email template with/without attachments for an admin and for recipients). About files as an attachments for admin and recipients we will talk later in this section.
  • "recipient_data" - an array which contains recipient's data (email addresses and names). You may add as many persons as you need. Pay attention: you may use field name from php config as a recipient's data (for example: newly received "name" and "email" fields). And you may add email and name manually (for example: "email@domain.com" => "Mr. President")
  • "autoresponse" - set "true" if you wish an autoresponse message should be sent to the user (unique email template like "Thanks, we got your message. We will contact you...")
  • "autoresponse_data" - an array which contains users's data (email address and name). You may add ONE PERSON ONLY for autoresponse message.
  • "autoresponse_attachment" - an array, where you may specify file/files to be sent as an attachment within autoresponse message. Rules for file names:
    • you may specify as many files as you want
    • use names of newly uploaded files from config["file"] array - file_name_1, file_name_2,...
    • for newly created PDF/CSV files, with form data, use aliases:
      • pdf, csv - if for every form submission new PDF/CSV file is created
      • file_name.pdf, file_name.csv - if for every form submission general PDF/CSV file is used. File name may be found in the "general_file_name" rule of appropriate section
      "example_autoresponse_attachment" => array("thank_you.html", "file_name_1", "csv", "file_name.pdf")

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.

html structure

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:

  • "directory" - specify directory name for form files (where uploaded files should be saved). You may specify any directory inside "j-pro" directory. Do not add a path to the directory, specify the name only. "form_files" is a directory name by default. If you set wrong directory name - default directory name will be used. Thus, "form_files" directory on your server is required (do not delete this directory from your server), even if your form doesn't contain "file" fields. It will be used for PDF and CSV files.
  • "file_name_1" - file name, should be the same like in "rules", "messages" and html <input type="file "name="file_name_1">. Next features are available for the file:
    • "upload" - set "true" if you want to upload file to server when form is submitted
    • "attachment" - set "true" if you want to send this file as an attachment within letter to admin and recipients
    • "delete" - set "true" if you want to delete this file from server after a letter will be sent

If your form doesn't have "file" fields - you may leave this block empty - like "file" => array()

html structure

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" - set "true" if you want to save form data into PDF/CSV file
  • "directory" - specify directory name for PDF/CSV files (where PDF/CSV files should be saved). You may specify any directory inside "j-pro" directory. Do not add a path to the directory, specify the name only. "form_files" is a directory name by default. If you set wrong directory name - default directory name will be used. Thus, "form_files" directory on your server is required (do not delete this directory from your server).
  • "new_file" - set "true" if you want the new PDF/CSV file should be created for every form submission. It means, that every time, when a form will be submitted - new PDF/CSV file with form data will be created. File name will be generated automaticaly, based on date and time.
  • "general_file" - set "true" if you want to save form data from all form submissions into ONE PDF/CSV file. It means that all form data received during some period of time will be saved into one file. New page for PDF file and new row for CSV file will be created for new form submission.
  • "general_file_name" - specify PDF/CSV general file name. Do not add ".pdf/.csv", only file name without file extension.
  • "attachment" - set "true" if you want to send PDF/CSV file as an attachment within letter to admin and recipients
  • "delete" - set "true" if you want to delete PDF/CSV file from server after a letter will be sent
html structure

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

  • "save" - set "true" if you want to save form data into database
  • "pdo" - set "true" if you want to use PDO database connection.
  • "mysqli" - set "true" if you want to use MySQLi database connection.

More details - in the Database section

html structure

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"]

html structure

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:

  • $config["rules"] and $config["messages"] contain rules/messages for this field
  • $_POST array contains this field (php code gets this field from html code)

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:

html structure

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

html structure

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.

html structure html structure

Step 3:

Add buttons to the form

html structure

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)

html structure

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.

order logic

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.

order logic order logic

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

order logic
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.

order logic

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.

order logic

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.

order logic

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 logic
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.

order logic

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.

order logic

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.

order logic

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

order logic
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.

order logic

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.

order logic

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

order logic

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.

  • 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 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.

html structure html structure

PHP config: you have to use field names instead special class to make fields you wish to be a part of validation process.

html structure

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.

html structure html structure

PHP config: you have to use field name to make field you wish to be a part of validation process.

html structure

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.

html structure html structure

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.

html structure

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:

html structure html structure

PHP config:

html structure

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/"

Step 1:

If your forms contains php tokens - you have to create php token for every form.

html structure

And add these tokens to your forms.

html structure
Step 2:

Add JavaScript config code for both forms.

html structure
Step 3:

Copy/paste next files in the "php" directory: "action.php", "config.php", "constants.php". Add some unique prefixes to every file.

html structure
Step 4:

Open both "action.php" files and change a code according to new file names.

html structure html structure
Step 5:

Open html code once again and add new values to "action" form attributes according to new file names.

html structure
Multistep and modal forms at one page

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.

CSRF protection

Each default form from "forms" directory contains next code in the HTML markup:

html structure

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:

html structure

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.

html structure html structure

Next, take a look to the part of code at "csrf.php" file.

html structure

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.

Tips: Be sure that your users will have enough time to fill and submit the form on your site. Do not set too short time periods for tokens.
XSS protection

All input data are validated on the server: default validation ( htmlspecialchars() and strip_tags() functions ) and your validation rules ( which you will add ).

Notice: Server side validation of all input data is requered! It will help you to secure your information.

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:

Step 1:

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.

captcha

You should get two keys: a site key - this key you have to insert into your html form

captcha

and the secret key: this key is required for the validation process on your server

captcha
Step 2:

Open a html form and add next script to the bottom of the "head" section:

captcha

Next, insert a div with google reCaptcha instance in the html markup. Use "site key" from the previous step to insert inside this div.

captcha
Step 3:

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".

captcha
Step 4:

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:

captcha

Note: field name in rules/messages array for google reCaptcha should always called "recaptcha". It is required for php build-in logic.

Step 5:

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:

captcha

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:
Google Docs
the library to work with reCaptcha
Language abbreviations

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).

Step 1

Open "config.php" file and set "true" for DB feature and connection method.

table name
Step 2

Open "constants.php" file and add you DB settings.

table name
Step 3

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.

table name

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.

Step 1

Open this form and take a look to the js functions for async DB request:

table name

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.

Step 2

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.

table name

So, open "database_constants.php" file and add you DB settings.

table name
Step 3

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".

table name
Step 4

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:

table name

MySQLi query:

table name

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

Step 1

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:

table name

Do not forget to add php token instance to the "form" later:

table name
Step 2

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):

table name
Step 3

Create "j-wrapper" div with desired width:

table name

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

table name

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

table name
Step 4

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

table name
Step 5

Copy "j-pro" directory to your server. Use any default form from "forms" directory in the pack as a source.

Step 6

Open "config.php" file in the "j-pro/php" directory and specify PHP config code according to form fields and desired php features:

table name
Step 7

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:

table name

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 !!!
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 both config files. If code generates an issue - it will be displayed ( "JS Config" and "PHP Config" sections contain 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
  • faq
  • 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 )

!!!!!!

I want to add a Google reCaptcha to my form

"Google reCaptcha" section contains detailed answer how to do that.

When I try to submit a form I get success message "Your information has been sent successfully" however I don't receive the email

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

faq

be sure that you set "true" for email sending feature and "true" for one of the methods for email sending

faq

Also check:

your spam folder

server error log file, if any issue arise - it should be there.

I receive the email successfully, but email body has black color

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.

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.

faq

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

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

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

How to duplicate the message to the user that sent the form?

PHP Config section contains "Processing the form data" subsection with detailed answer how to duplicate message to the user or sent an autoresponse message.

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:

faq
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:

faq

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

faq

Open PHP config code (config.php) and add validation rule and message. Now, this new field has server side validation:

faq

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.

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

For JavaScript code - open "jquey.j-pro.js" file and at the top you may see all default messages:

faq

For PHP code - open "constants.php" file:

faq
I have an error message: Incorrect token. Please reload this webpage. How can I add/delete security token? Why web page with form has ".php" extension?

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:

faq

Open "config.php" and add validation rule for token. Pay attention to the "prefix" value - the same value as in html code:

faq

I want to remove a token from my form:

Apply actions from section above in reverse order.

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

phone

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:

faq

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:

faq
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.

faq
I have an error message: Mailer Error: Could not execute: /usr/sbin/sendmail -t –i.
faq faq

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.

faq
Hello, I encounter an error: Mailer Error: SMTP connect () failed when I submit the form. Why this error?
faq

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.

Step 1:

First, please open "config.php" and set "true" for general debug mode and set "2" for smtp debug mode:

faq
Step 2:

Open JavaScript config code and set "true" for debug mode:

faq
Step 3:

Open "console" in your browser and you should see error description. How to open "console" you may read at the top of FAQ section:

faq

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:

faq

Some useful links where you can find why smtp error occurs:

send-email-using-gmail-smtp-server-through-php-mailer
smtp-connect-failed-error-in-phpmailer
phpmailer-to-use-gmail-as-smtp-server-could-not-connect-to-smtp-host-mailer-err
send-email-using-gmail-smtp-server-through-php-mailer
phpmailer-and-gmail-smtp-error-failed-to-connect-to-server
mail-not-sending-with-phpmailer-over-ssl-using-smtp
google-1
google-2
PHPMailer - issue-1
PHPMailer - issue-2
PHPMailer - issue-3
I have faced with next messages/issues. What is it?
Case 1:
new record

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

Case 2:
new record

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:
new record

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.

Case 4:

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.

  • 10/20/2019 - Just Forms Pro full version v 1.1

    Forms were tested with latest PHP versions (up to 7.3.9)

  • 12/20/2016 - Just Forms Pro full version v 1.0

    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.