How to Add a Sub-Category to an Order Form

October 18, 2021

You can now categorize your product listing without the need for the below workaround. In our Payment Tools or Product List payment settings, toggle Enable Categories to Yes.

Please visit the following user guide to know more about Product Categories: How to Add Product Categories to Payment Fields.

This guide will show how to expand even further the sub-label feature shown on this guide. We 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 4 Collapse fields)

 3. Add the appropriate labels for the collapse field. For example

4. After completing the Purchase Order form, get its 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 body 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 the 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 product/item. 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 the 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. 

For questions, comments, and suggestions, please post them below or contact us through our support forum/email. 

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum:

Contact Jotform Support:

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


  • roel_heerema
  • dcueba