Submission Wizard using JavaScript and CSS

<< Click to Display Table of Contents >>

Navigation:  Using JavaScript >

Submission Wizard using JavaScript and CSS

Overview: In wizard mode, user is presented a series of pages in a sequence to enter the data. On the last page, there is a form to submit the request. User can click previous/back buttons on intermediate pages to navigate to different pages. Using Crow Canyon NITRO Forms, this experience can be easily configured.

Wizard_Example

1.Create a NITRO Form and add various pages as Tabs on the Form in the required sequence

2.On first Tab, add one script action (to go to next tab)

3.On intermediate Tabs, add two script actions (for previous and next)

4.On last Tab, add one script action for going back to previous Tab and one Submit action to save the request

Script Configurations:

In Forms designer, go to Advanced panel on left side then --> click on "Custom JavaScript". Select "Custom Script As" Eval and  use below script.

 

formContext.hideAllTabsORSections();

 

For Script actions to go to next Tab, configure below script for the action

 

formContext.showNextTabORSection();

functionCallback(false);

                                 

For Script actions to go to previous Tab, configure below script for the action

 

formContext.showPreviousTabORSection();

functionCallback(false);

 

For Submit action, if you want to update any hidden column value, then use below script:

 

var returnDataObj = {};

returnDataObj[[ColumnInternalName]] = valueforColumn;

functionCallback(false,returnDataObj);

                                          

Just enter the call to return control to NITRO Forms

 

functionCallback(false);

 

CSS Configurations:

In Forms designer, go to Advanced panel on left side then click on "Custom CSS" and use the below CSS.

 

#panelCCSTabs > .k-item {

   width: calc(100% - 20px);

   border-bottom: 1px #9f9f9f solid;

   margin-left: 10px;

   text-align:  center;

}

 

button.ccs_btn_ScriptAction {

   background: #253cc6;

}

 

button.ccs_btn_ScriptAction:hover {

   background: #0620ba;

}

 

button.ccs_btn_SubmitAction {

   background: green;

}

 

button.ccs_btn_SubmitAction:hover {

   background: #0d7e0d;

}