How to Add a Sub-Category to an Order Form

Last Update: March 19, 2015

This guide will show how to expand even further the sub-label feature shown on this guideWe will add a sub-category group that further organized the products/items of a Purchase Order form.

 
Please follow the steps below.
 
1. Create the Purchase Order Form. Add the sub-category sub-labels as mentioned using this guide.
 
2. Add Collapse field on the Purchase Order form. Add as many as necessary (on this guide we added Collapse field)
 
3. Add the appropriate labels for the collapse field. For example: http://www.jotform.me/form/22556296508461
 
 
 
4. After completing the Purchase Order form, get it's source code embed by following this guide: How to Get Form Source Codes
 
 
5. Create a blank template HTML page on your own website. This is where the form's source code will be embedded. For example: http://pastie.org/4710116
 
6. Embed the form's source code between the tags of the blank HTML page.
 
 
 
7. Using the sample form on this guide, this is now the code of the HTML (http://pastie.org/4710731) page after embedding the form's source code.
 
8. From this step and onward, we will now dissect the form's HTML code to move sections to create the sub-group and sub-label effect. It can be a bit tricky initially, but should be easy once understanding of the code is achieved.
 
a. An overview of the HTML code is necessary to understand the 'parts' of the source code. Knowing the code will help understand which part will be 'moved' and re-arranged to have the sub-group effect. The series of images below describes the important section/part of the sample form (http://pastie.org/4710164)
 
 
 
 
 
 
b. In preparation for the insertion and moving of the code sections, the HTML code was broken by spaces and comments to easily spot where to put the necessary codes. The starting HTML code for the sample form should now look similar to this (http://pastie.org/4710549)
 
c. In the HTML code, find the collapse fields section code. In the sample form, this is the code for the collapse fields (http://pastie.org/4710217)
 
d. The collapse field section will be inserted between the products/items to create the category group between each products/items. Note that the collapse field section is enclosed by a tag and should be closed between the products/items section.
 
 
e. The 1st category created when the collapse field is inserted should look like this.
 
 
Note the importance of closing the and tags at last product/item in the 1st category.
 
 
 
f. Just repeating the process of 'cutting/paste' of the codes for each sections (using the HTML comments as a guide), should result for the HTML code to be like this (http://pastie.org/8153853). 
 
9. The form in action can be tried here.
 
10. Finish.
 
Fact: 
The entire form's HTML source code can be easily copied and pasted on a blank HTML page, and the page should still work.
 
 
Questions? Please let us know below!


2 Comments...


   
dcueba (March 28, 2014 at 10:13 PM)

Holy crap! That's a lot of work! Is there no pre-made template for this that I can edit to make my own??

View Answer


   
roel_heerema (June 02, 2016 at 03:50 AM)

Extremely strange!

I am very interested in the working of this form, as I have an order list of 11 subcategories and a total of 74 products that can be ordered.

But, as I tried out the 'working' form (http://www.jotformpro.com/form/31807335276961), I noticed it does not work at all! I tried with the browsers Google Chrome (version 50.0.2661.102, Mozilla Firofox (version 46.0.1) and Microsoft Edge (version 25.10586.0.0) with Microsoft EdgeHTML (version 13.10586), but none of these browsers were capable to activate this form with its collapsible fields.

How to solve this? I do think it is the responsibility of the programmer to present us a working solution. Moreover: the way it is presented here is not at all a WYSIWYG approach.

View Answer


Send Comment