Customize SharePoint List Form In A Wizard Style

In this example, we will create a list and show the list columns in a wizard style.

 

Follow the steps.

 

Step 1

Create an Employee list with the set of columns. I have created 24 columns to show them in 6 steps, in a wizard.

 

By default, if you click on the new item in the Employee list, the web form looks like below.

 

Screenshots for your reference 

 

 

Step 2 Enable content type in Advanced settings in the Employee list.

 

Click on the item content type and then click on Column order to set the position of each column to show in the right position in the wizard.

 

In this example, I have created 24 columns to show them in below 6 steps.

1. Employee: Basic Details (Contains 8 columns)
2. Employee: Project Details (Contains 3 columns)
3. Employee: HR Details (Contains 3 columns)
4. Employee: Finance Details (Contains 3 columns)
5. Employee: Insurance Details (Contains 4 columns)
6. Employee: Passport Details (Contains 3 columns)

To show the specific column in a specific step in the wizard, set the position from the top for each column in a sequence.

 

That means, as per the column order, step Employee: Basic Details will show 1st 8 columns, then step Employee: Project Details will show next 3 columns, then Employee: HR Details will show next 3 columns and so on.

 

Screenshots for your reference 

Step 3

Prepare the below JS and CSS files. Please find the attached zip file (SharePointListFormWizardStyle.zip) containing the below files.

• EmployeeFormWizardStyle.js (Custom file)
• jquery-1.11.1.min.js (Generic file)
• query-ui.css (Generic file)
• jquery-ui.js (Generic file)

Create a folder(WizardStyle) in a document library and upload these files.

 

 

Edit EmployeeFormWizardStyle.js file and change the source path of the following files.

• jquery-1.11.1.min.js
• jquery-ui.css
• jquery-ui.js

Screenshots for your reference

<script  type="text/javascript" src="/sites/TestSite/Shared%20Documents/WizardStyle/jquery-1.11.1.min.js"></script>
<link  type="text/css" rel="stylesheet" href="/sites/TestSite/Shared%20Documents/WizardStyle/jquery-ui.css" />
<script type="text/javascript" src="/sites/TestSite/Shared%20Documents/WizardStyle/jquery-ui.js"></script>

If you would like to change the Step name, change it in the EmployeeFormWizardStyle.js file.

 

Screenshots for your reference 

<div id="StepDesc1" style="display: block;font-size:20px;color:Black;font-weight:bold;">Employee : Basic Details</div>
<div id="StepDesc2" style="display: none;font-size:20px;color:Black;font-weight:bold;">Employee : Project Details</div>
<div id="StepDesc3" style="display: none;font-size:20px;color:Black;font-weight:bold;">Employee : HR Details</div>
<div id="StepDesc4" style="display: none;font-size:20px;color:Black;font-weight:bold;">Employee : Finance Details</div>
<div id="StepDesc5" style="display: none;font-size:20px;color:Black;font-weight:bold;">Employee : Insurance Details</div>
<div id="StepDesc6" style="display: none;font-size:20px;color:Black;font-weight:bold;">Employee : Passport Details</div>

Also, if you would like to change the number of columns to show in a specific step in the wizard, change the size in the EmployeeFormWizardStyle.js file.

 

Screenshots for your reference 

var tabInfo = [
    {title:"Step1",size:8},
    {title:"Step2",size:3},
    {title:"Step3",size:3},
    {title:"Step4",size:3},
    {title:"Step5",size:4},
    {title:"Step6",size:3}];

Save the EmployeeFormWizardStyle.js file and upload to document library.

 

Step 4

Click on New Item in Employee List which will redirect to /sites/TestSite/Lists/Employee/NewForm.aspx page. Edit the page and add a Content Editor Web Part. 

 

Screenshots for your reference

 

 

Step 5

Get the URL of EmployeeFormWizardStyle.js file from the document library and type it. Then, click "Apply" and stop editing.

 

Example of file URL: /sites/TestSite/Shared%20Documents/WizardStyle/EmployeeFormWizardStyle.js

 

 

Step 6

Now, click "New Item" in Employee List which will show the New Form in wizard style.

 

You can click "Next" and "Previous" buttons to navigate between the steps in the wizard. 

 

Click "Next".

Click "Next".

 

Click "Next"

Click "Next".

Click "Next " 

 

Step 7

Now if you would like to see the same wizard style design in EditForm.aspx page, follow the Steps 4 and 5 in /sites/TestSite/Lists/Employee/EditForm.aspx page.

 

Then, you will see the Edit form of an existing item as below.


Click "Next".

That's all!