Separate products by categories or sections?

  • schenkco
    Asked on February 12, 2016 at 1: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)
     Separate products by categories or sections? Image 1 Screenshot 20
  • Charlie
    Replied on February 12, 2016 at 2: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:

    Separate products by categories or sections? Image 1 Screenshot 20

    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.