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

    Side by side column for order options

    Asked by gocarrgo on October 30, 2015 at 01:42 PM

    Hello,

     

    I have a long list of order items and I wanted to see if I could have two columns side by side instead of one long column?

    Thx

    Screenshot
    side by side side two columns items products columns split
  • Profile Image
    JotForm Support

    Answered by Mike_G on October 30, 2015 at 08:27 PM

    In order for you to achieve what you would like to happen to the list of items on you form, you will be needing to add CSS codes using this guide: How-to-Inject-Custom-CSS-Codes

    Here's the code:

    #id_15{

    width: 100% !important;

    }

    .form-product-item:nth-child(even):nth-child(4n){

    float: right;

    clear:both;

    width: 350px !important;

    top:-75px !important;

    height: 64px !important;

    border: 1px solid lightgray;

    }

    .form-product-item:nth-child(even):nth-child(4n+2){

    width: 350px !important;

    display: block !important;

    height: 64px !important;

    border: 1px solid lightgray;

    }

    #id_15 br{

    display: none !important;

    }.form-sub-label-container{

    display:block !important;

    }

    Once you're added those codes to your form, your form should look like this. 

    Notice that I've added borders for each item to separate them. Also, I have made each item having the same height to make it look equal on your form since there are items that don't have images and/or option for quantity.

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 30, 2015 at 08:29 PM

    By the way, here's the clone form I've used for testing: https://form.jotform.com/53027009138954

    Feel free to clone it using this guide, How-to-Clone-an-Existing-Form-from-a-URL, to inspect the changes made to the form.

    Thank you.

  • Profile Image

    Answered by gocarrgo on October 30, 2015 at 09:48 PM

    Thank you thank you thank you!  You guys are superstars!

  • Profile Image
    JotForm Support

    Answered by Mike_G on October 31, 2015 at 06:20 AM

    You're most welcome! Please feel free to contact us anytime should you have any questions or concerns. Thank you.