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

Having a long line-up of items or products in your payment and purchase order form?

Wouldn't it be much better if they are organized by having Category grouping or having sub-labels to easily spot them among the long list of items or products?

This guide will show how to add sub-labels in the items/products on a Purchase Order form.


Please follow the steps below:

1. Add items 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 items'. Follow this guide: How to Get Form Source Codes.




3.Get the numbers with the 'for' value of the label tag of the 'Free Items'. For example:



In the sample form, the numbers are 10081009 and 1010.


4. Copy those numbers then use it in the CSS guide below (to be injected to your form):

input[id*="input number"]

{

display:none;

}

input[id*="input number"] + label > .form-product-details

{

display:none;

}

label[for*="input number"]

{

font-weight: bold;

text-decoration: underline;

}


If you have multiple product, simply duplicate the selectors above (in bold), then separate each with a comma.


For example:

input[id*="1008"], input[id*="1009"], input[id*="1010"]

{

display:none;

pointer-events: none;

}

input[id*="1008"] + label > .form-product-details, input[id*="1009"] + label > .form-product-details, input[id*="1010"] + label > .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 code then inject it to your form 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.

For questions, please write it below! 

Send Comment

7 Comments...

  • 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:

    https://formscentral.acrobat.com/app.html#d=JlyAcDrEbHEpfTEFwNLGSw

    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:
    http://form.jotform.us/form/33422317966154

    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 Category...it 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 http://form.jotform.us/form/31965599345167 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).