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 to split my products list in two columns?

    Asked by sreken on April 11, 2014 at 01:19 PM

    Hi,

    I have not yet uploaded my form as I wish to know if it is possible to spread my items so that I could have 5 items on the left and the other 5 items to the right of those.

    Its called Product Order Form

    layout order form product items and
  • Profile Image

    Answered by EliezerN on April 11, 2014 at 02:53 PM

    Hi,

    To split your Products in two columns simply inject this CSS code to your form:

    .form-all

    {

    width:695px !important

    }

    .form-product-item {

    border: 1px solid #EFEFEF;

    margin: 1px;

    float: center;

    width: 293px;

    }

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

    }

    Then it will look this way: 

    Here is how to inject css code to forms: How to inject custom CSS codes

    You can find this workaround in this guide: How to have a two columns payment form

    Please inform us if you need further assistance with this inquiry.

    Thanks

  • Profile Image

    Answered by sreken on April 12, 2014 at 07:46 AM

    Thank you for that, however although the next button works in the preview, when I embed on my page it does not work using source code. Also even when I just use the embed code the next button works but my items are not displayed as above ie 5 on the left and 5 on the right

  • Profile Image
    JotForm Support

    Answered by liyam on April 12, 2014 at 07:50 AM

    Hello sreken,

    It would be great if you can provide us the URL when you have placed your form with so we can check and provide you a further fix with your page's layout.

    Looking forward to your response.

    Thanks.

  • Profile Image

    Answered by sreken on April 12, 2014 at 08:32 AM

    I do apoligise it seems to be working now, i have to view it in a browser rather then in preview using front page.

    I am posting a new thread question on the form lay out.