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

    Separate products by categories or sections?

    Asked by schenkco on February 12, 2016 at 01:33 PM
    Regarding the categories/sections, I would want it to look something like this if possible: (the products were repeated in this example but they will be different)
  • Profile Image
    JotForm Support

    Answered by Charlie on February 12, 2016 at 02:06 PM

    I can't find that form in your account, I presume you are referring to a different form or a sample form.

    I have another workaround that might suit you. Here's a test form that I have: https://form.jotform.com/60425807621957. See if that is something that would work for you. You can clone it to see how I have set it up.

    Here's how to recreate that:

    1. First, I'll recreate your products and categorize them. Here's a guide: http://www.jotform.com/help/264-Create-Sub-Products-Based-on-a-Product-Option 

    2. In my case, I separated them in two categories, "Category 1 - Brown" and "Category 2 - White".

    3. In the sub product listing, you can actually add the HTML <img> tag on it. Here's mine:

    4. After that, we'll follow the guide on how to make the product listing in multiple columns. I have already shared it on the original thread, but for reference, here's the link to it: http://www.jotform.com/help/235-How-To-Have-Two-Column-Payment-Form 

    The only difference that I made on the CSS code is setting the float value from "center" to "left". Here my CSS code:

    .form-product-item {

        border : 1px solid #EFEFEF;

        margin : 1px;

        float : left;

        width : 253px;


    .form-product-item + br {

        display : none;


    br + b {

        float : left;

        padding-top : 20px;


    .form-payment-total {

        line-height : 50px;

        margin : 1px;

        border : 0px solid #EFEFEF;

        border-radius : 4px;

        padding : 15px;

        padding-right : 193px;

        padding-left : 6px;



    Noticed in my test form that each product opens and closes, would you like that to remain or you want each category to be open always?

    Let us know if that will somehow work for you. I understand that we have already provided different ways on how you can do this, I hope we're not confusing you. It's best to have a lot of options, depending on how your form works.