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

Last Update: January 28, 2016

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. View the source code of your form to get the label id# of the 'Free items'. Right Click in an empty canvass space in the form and click "View Form Source" or 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! 


9 Comments...


   
PTI (November 10, 2012 at 01:46 AM)

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).

View Answer


   
AssNLegs (July 17, 2013 at 01:02 PM)

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!

View Answer


   
guildfordchoral (October 12, 2013 at 11:36 AM)

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!

View Answer


   
tillmaj (December 09, 2013 at 06:39 AM)

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?

View Answer


   
JBFonesCMG (December 27, 2013 at 02:24 PM)

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

View Answer


   
jodychan (June 06, 2015 at 07:07 PM)

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

View Answer


   
Mobileonix (July 07, 2015 at 03:45 PM)

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

View Answer


   
pagewalker (January 28, 2016 at 01:11 PM)

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!

View Answer


   
pagewalker (January 28, 2016 at 01:13 PM)

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


Send Comment