User Guide

 

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

    display:none;

    pointer-events: none;

}

input[id*="input number"] + label > .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;

}

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

Send Comment

14 Comments...

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

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

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