JotForm User Guide / Advanced Features /

How to Add a Sub-Category to an Order Form

How to Add a Sub-Category to an Order Form

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. 
 
6. Embed the form's source code between the tags of the blank HTML page.
 
 
7. 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. 
 
 
 
 
 
 
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. 
 
c. In the HTML code, find the collapse fields section code.
 
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.
 
8. The form in action can be tried here.
 
9. 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!

Send Comment

2 Comments...

  • roel_heerema

    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.

  • dcueba

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