What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I made an product order form with multiple sub-categories?

    Asked by maidprointranet on March 28, 2016 at 11:56 AM

    We have 6 product order forms, like this one https://form.jotform.com/60875167514966 that we want to change into 1 large order form with 6 sub-categories, for ease of use by our customers.  We were hoping for something simple like this...

     

    HyKo Order Form

    Janitorial Tools

    item 1 $x.xx

    item 2  $x.xx

    Daily Cleaning Chemicals

    item 3  $x.xx

    item 4  $x.xx

    Specialty Cleaning Chemicals

    item 5  $x.xx

    item 6  $x.xx

     

    Total for entire order = $xx.xx

     

    I can't seem to find anything like this in the templates :(  Is this beyond the capabilities of Jotform?

     

    Thanks so much,

    Melissa Homer

    Page URL:
    https://form.jotform.com/60875167514966

    order form product sub how
  • Profile Image
    JotForm Support

    Answered by BJoanna on March 28, 2016 at 01:30 PM

    If I understood you correctly you want to add sub categories to your payment field. Unfortunately that is not possible to add sub categories inside of payment field.

    Possible workaround is to add "sub categories" as payment options and then use Custom CSS to hide check box options and to style and position "sub categories" text.

     

    Here is my demo form: https://form.jotform.com/60875290523963 

    I have added this CSS code to style and position Daily Cleaning Chemicals "sub categories" text.

    #input_21_1082 {

        visibility : hidden!important;

    }

    span#product-name-input_21_1082 {

        font-size : 16px;

        margin-left : -25px!important;

    }

    span#input_21_1082_price {

        visibility : hidden!important;

    }

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Feel free to clone my form

    If you have difficulties, I would suggest to add all products to your form and then tell us where you want to add "sub categories" text and we will help you with CSS code.

    Hope this will help. Let us know if you need further assistance.