Form Wizard - Multi Step Material Form

Unlimited Steps With Effective Styles!

Created: March-2017
By: Hi-Tech Parks
Email: hitechparks@gmail.com

Thank you for Browsing our website. If you have any questions that are beyond the scope of this help file please feel free to contact with us at Hi-Tech Parks. Thanks again for Browsing our website!

Explanation

Multi Step Material Form UI Features:

Step by Step Form Validation
Jquery Validation
Step Navigation
Unlimited Steps Sign up
2/3/4/5/6/7/8+ Steps Form
Wizard With Progress Bar
Material Design
Effective Animation
Preview Before Submit
Tooltip Error Message
2 Different Form Formats
Awesome Colors
User Registration
Payment Registration
Employee Registration
Bank Registration
Subscription Form
Contact Form
Clickable or Disable Tabs
Can Use JQuery Validation or Not
Can Use Material Design or Not
Can Use Angular Preview or Not

Multi Step Material Form Technical Features:

Bootstrap Responsive
CrossBrowser Support
CSS2/CSS3 Usage
JQuery Usage
Angular Usage
Easy to Setup
Easy to Customize
Well Documented
And Much More!

Browser compatibility:

Form Wizard - Multi Step Material Form will run in on all modern browsers. However you need JavaScript enabled to run the script smooth.

Installation

Installation Form Wizard - Multi Step Material Form

Please follow all the steps carefully...

Step 1: Download the Zip file which you have purchased.

Step 2: Extract the zip file.

Step 3: Copy all plugin CSS, JS and fonts files (you can find that's inside of customs and externals folders inside of assets), and paste it your own website css, js and fonts folder.

Step 4: Link all plugin css file in your own web page head section and js file in your own web page before end of the body section (whose template page you want to add this Form Wizard).

-----

Step 5: Choice your Form Wizard template .html file, whose Format and Style you wont to use.

Step 6: Edit this HTML file in Notepad / Notepad++ (you can use another code editor).

Step 7: Copy the form content from form-wizard template and paste it where you need to show this in your website template body.
(Copy form there : Our form-wizard content srart from <section id="wizard" class="form-wizard"> and end from </section> that's commented inside of the template you can find it easily.)

Step 8: Save your own website template. It's done!

Note: After setup check your template, If your design broken then please rename or delete your plugin css class, whose class was broken your design.

Customization

If you wont to customize this form-wizard color, steps, icon or etcetera then flow this instruction carefully...

Step 01 - Change Form Color: If you need to change the form color then you have to just change the CSS file!! Do it very simply, open our custom files folder you can find there 2 different (one for red color and another one for green color form) css file just copy this one you need and Replace the file in your template css folder or you can custom this color as your required so easily!!!

Step 02 - Change Form Steps: If you need to Add or Remove some Form steps in the form-wizard then you have to do it very simply.

A: Add or Remove some tab nav from inside the navbar and order the tab link hyperlink value like as: href="#tab1" href="#tab2" href="#tab3"

B: Add or Remove some tab body from inside the tab-content and order the tab-pane id name/value like as: id="tab1" id="tab2" id="tab3"
NB: tab-pane id name and tab hyperlink value must be same

C: Formatting the every step of "Form Wizard" by the number like as "Step 1 - 4" / "Step 1 of 4" (You can find it inside the span tag of form every tab-pane haeding h4 tag)

Step 03 - Change Form Element: If you need to change the Form Element then you have to just copy our form element inside form our script!! just change the element label and name value and save it very simply for make it awesome!!!

Step 04 - Change Form Icon: If you need to change the header Icon or input group addon Icon then you have to use Font Awesome Library. Do it very simply for make it awesome!!!

-----

Step 05 - Change Form Requires: If you need to update Form Requirements from the form-wizard user then you have to just add or remove a class class="required" (You can find it inside the every form element).

Step 06 - Disable Header Tabs: If you need to Disable Tab click then you have to just change the custom js file!! Do it very simply, open our custom files folder you can find there (js file for non-progress and disable tab click) js file just copy this one you need and Replace the file in your template js folder!!!

Step 07 - Angular Live Preview: If you need to update Form Preview Page then you have to just add or remove a html attribute value like as: ng-model="phone" for get this field value (You can find it inside the every form element), then use another html attribute inside a div in preview page ng-bind="phone" inside a table cell.

-----

Step 08: Now save it. Let's go It's ready to use!

How To Use

01. Insert your info and Fill up the form
02. Press Next button to go Next step
03. Press Previous button to go Back

04. Press Nav Tab to go this step
05. Press Send or Submit button for Submit the info

Update