How to Have Sub-Category or Sub-Labels on an Order Form

September 15, 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.


Have a long line-up of products in your Payment Form? Wouldn’t it be better if they are organized into grouped categories or have sub-labels to easily spot them among the long list of items or products?

This guide will show you how to add Sub-labels in the Products of a Purchase Order form.

1. Add Products with a price of “0” (Free) to your Purchase Order form. These will serve as the product sub-labels.

2. Get the source code of your form to get the Label ID# of the Free ($0) Products you just added. Follow this guide: How to get your Form Source Code

3.Get the numbers in the “for” attribute of the “label” tag of the Free Products. For example:

In the sample form, the numbers are 1008, 1009 and 1010.

4. Copy those numbers then use it in the CSS snippet below. Replace the input number with the actual number you got from the source code.

input[id*=”input number“] {

    display:none;

    pointer-events: none;

}

label[for*=”input number“] .form-product-details {

    display:none;

}

label[for*=”input number“] {

    font-weight: bold;

    text-decoration: underline;

    pointer-events: none;

}

If you added multiple Free Products (sub-labels), simply duplicate the CSS selectors above by separating each with a comma. Make sure you also change the respective input ID numbers. For example:

input[id*=”1008“], input[id*=”1009“], input[id*=”1010“] {

    display:none;

    pointer-events: none;

}

label[for*=”1008“] .form-product-details, label[for*=”1009“] .form-product-details, label[for*=”1010“] .form-product-details {

    display:none;

}

label[for*=”1008“], label[for*=”1009“], label[for*=”1010“] {

    font-weight: bold;

    text-decoration: underline;

    pointer-events: none;

}

5. Copy your finalized CSS codes then inject them to your Form Builder by following this guide: How to Inject Custom CSS Codes

Test and preview your form. If done correctly, the form should look and function similar to this form.

Comments and suggestions are welcome below. If you have a question, post it in our Support Forum so we can assist you.

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: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

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

Comments: