Browse Article by TopicsPurchase Order Order form Product Category Sub Category Sub Product Sub Label
- Order Form Basics
- Order Form Types
- Adding Order Form to Facebook
- How to Update the Multiple Payment Form
- Setting Up Your First Order Form
- How to Have Sub-Category or Sub-Labels on an Order Form
- How to Add a Sub-Category to an Order Form
- Create Sub-Products Based on a Product Option
- Configuring PayPal Express Integration
- How to Add Tax to Your Payment Form
Related Forum Questions
- My Conditions are not working
- Fillable PDF Form: One sub label does not appear in PDF form
- Email Alerts: Not receiving emails
- How do I fix "Form Failure"?
- My form says unavailable.
- Is it possible to calculate price based on drop down selections?
- How to add a "Re-Order" button on my form?
- How to add a clickable url to a sub label?
- How to pass a calculated amount to a payment field?
- Form fields > Sublabels: Raw HTML CODE showing on field sublabels
How to Add a Sub-Category to an Order FormLast Update: March 19, 2015
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 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.
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!