JotForm User Guide / Payment Forms /

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

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

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"] {


    pointer-events: none;


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



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"] {


    pointer-events: none;


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



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.

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:
Contact JotForm Support:

Send Comment


  • OrganicTouch

    I did everything the way I suppose to and it still showing "free"

  • DanFreeland

    I also have the Free after the sub category....Any resolution to this?

  • Joalfarming

    Yes i have done this but i fell the list is to long even under sub categories. I would like to have 3 categories
    Big head Roses Click on it it open that with its products under it
    Small head Rose Click on it it open that with its products under it
    Other flowers and Greenery Click on it open that with its products under it
    This all happening in purchase order under payments and allowing the person to see the total and submit button without taking 5 mints to get to the bottom of the page due to using purchase order
    ? a section collapse how to fit it in.

  • jchatters

    I am also unsure how to remove "free" after the subheading. Could someone please provide instructions?

  • Karan

    how can i get a link to download the form directly into my download folder, instead of submitting and getting in via email? because when it is coming via email the form changes into text and it is not appropriate.

  • txforesttrail

    Hi, is there any way to remove the "free" after the new subheading?

  • JIAgroup

    hello i have a similar issue to some people below. The subheadings thing worked but it's still showing FREE. How do i remove this?

  • LEWIShome

    I'd like to have the check boxes removed as well. Thanks!

  • TamsinHall

    Resolved please ignore my last questions, finger trouble :-)

  • TamsinHall

    Thanks for all of this, I have applied this to my form and I am still seeing the 'free' option. I have tried several of the solutions provided to remove these but I am still having no success..please is my form, pink highlighted fields where the 'free' should be removed thanks

  • chantellewilson2105

    This feed doesnt apply with the updated 4.0 designer. The instructions are no longer applicable. Can I have an update please.

  • kelleherk

    My category is still showing the "Free" in the category. How do I get rid of the price?

  • pagewalker

    Nevermind! It worked. I had the CSS code in the wrong place. Thanks!

  • pagewalker

    Hi there-

    I tried this and it worked. However, I still have a little checkbox right beside my item heading. How do I get rid of this? Thanks!

  • Mobileonix

    Have you guys made this process easier without having to touch code at all ?

  • jodychan

    Can we have sub-category or sub-labels on paypal payment forms?

  • JBFonesCMG

    I had this working fine, but I can't figure out what I did wrong to make "Free" show up again.

  • tillmaj

    I am VERY interested in your product. Currently I have this form:

    I want to have a checklist with a restricted # of selections (i.e. at least one but no more than 2) and subheadings. I've been trying to use your code and modify but have not had any luck. Here's my test in your product:

    I want to make "Associate of Science Majors" a subheading - is that possible?

  • guildfordchoral

    This looks great, but I think you can only add a Quantity option once for each would be great to be able to select different quantities for each sub-item. So, using the example above, how could people order 2x Fried Chicken, 1x Salisbury Steak, 3x French Fries and 3x Iced Teas.

    I'm trying to set up a ticket order form for our concerts, and we offer 4 price bands, with concession discounts are available on 3 of them. I can't get my head around how to achieve this without having a separate 'product' for each ticket type. This is ok, but it gives a long list of 7 items to choose from and spread down the page it look a bit ridiculous!

    Would be grateful for any ideas!

  • AssNLegs

    Greetings! ~ Was going to use this sub-label method on But when right-clicking in white space on form to "View form source" to get label IDs, the source code window shows as completely blank! I had earlier used this method to find Country field IDs and to only display the Print button, but now the Source is vacant. No longer need sub-labels on this form, but could need access to source code the future. ~ Any help would be appreciated!

  • PTI

    This is nice! Is there any way to get the same thing, but with radio buttons? We have different, mutually exclusive options with different prices. For example, if we were selling cars, we would want to be able to offer choice of transmission (standard or automatic, but not both) and then choice of tires (high performance or ordinary, but not both).