User Guide

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

Last Update: March 2, 2017

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! 

14 Comments...

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

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

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

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

  • JBFonesCMG

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

  • jodychan

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

  • Mobileonix

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

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

  • pagewalker

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

  • kelleherk

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

  • chantellewilson2105

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

  • 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 advise...here is my form, pink highlighted fields where the 'free' should be removed thanks http://gorgeous2go.co.za/free-online-quote/

  • TamsinHall

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

  • LEWIShome

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

Send Comment