How to set up multiple columns with text and images in the order form?

  • DELOZONE
    Asked on October 3, 2016 at 3:32 PM

    I'd like to include the following info for 21 separate listings. I'd like the below info to appear it's own section and apply to multiple columns and rows so I take up more of the horizontal part of the page, instead of just one long vertical column . The page gets pretty long when it's all in a vertical format. Can someone help please?

     

    Product Name (hyperlinked)

    Part Number

    Product Image

    Order Quantity (through use of pre-defined drop down) 

     

  • Mike_G JotForm Support
    Replied on October 3, 2016 at 9:34 PM

    I have checked your form by creating a clone version of it to my account. I see that the fields you are referring to above are separated but are all part of one product item.

    We can try to use CSS codes to format/style your form the way you want it to, but you can also try following the instructions in the guides below.

    Form-field-positioning

    The-importance-of-form-widths

    You may also want to consider using the Purchase Order under Payment Fields of the builder page for your products.

    How to set up multiple columns with text and images in the order form? Image 1 Screenshot 20

    Then, you can just add the options for each product.

    How-to-Add-Options-to-Payment-Forms

    I'm thinking that it would be easy for you to format/style (using CSS) your product list when each item in it are properly grouped using Purchase Order payment field.

    Please let us know how would you like to proceed. Thank you.

  • DELOZONE
    Replied on October 4, 2016 at 12:13 PM

    Thank you for your reply, but I think I need some further assistance. The presented options are not applying as needed as I need a grid layout, similar to how this looks -  http://www.designfinder.net/uploads/gallery/design-product-listing-515.png

    With the following included information:

    Product Name (which I can hyperlink)

    Part Number (just text)

    Product Image

    Order Quantity (through use of pre-defined drop down) 

    I don't know css very well, so if your team can help provide additional information, or configure the form in the format I'm looking for, that would be immensely helpful. 

  • Kiran Support Team Lead
    Replied on October 4, 2016 at 2:17 PM

    Please take a look at the guide that might help you in displaying the products in 2 columns.

    https://www.jotform.com/help/235-How-To-Have-Two-Column-Payment-Form

    Please give it a try and let us know if you need any further assistance. We will be happy to assist.