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

    Is there any way to change the format of the fields for Purchase Order?

    Asked by churchsaver on April 19, 2013 at 07:55 PM

    Currently, the view is (see attached):

    (checkbox) Item Name $Price

                     (custom quantity) Quantity

    (checkbox) Item Name $Price

                     (custom quantity) Quantity

    (checkbox) Item Name $Price

                     (custom quantity) Quantity

     

    What I would like is (see attached):

    (checkbox) Item Name $Price  (custom quantity) Quantity

    (checkbox) Item Name $Price  (custom quantity) Quantity

    (checkbox) Item Name $Price  (custom quantity) Quantity

     

    So, basically, I want each items info on one line, as to keep the length of the form shorter.

     

    Thanks in advance for your help!

    Page URL:
    www.getcashfordiabeticteststrips.com/free-quote

    Screenshot
    purchase format checkbox name quantity length
  • Profile Image
    JotForm Support

    Answered by EltonCris on April 20, 2013 at 06:48 AM

    Hi,

    Inject the following CSS codes to your form. This should transform your current style to the one you desired.

    .form-product-item {

    width: 600px !important;

    }

    .form-product-item br {

    display: none;

    }

    .form-product-item .form-sub-label-container {

    width: 300px !important;

    float: right;

    }

    input[name*="q1_tellUs1[special"] {

    float: left;

    }

    label[for="input_1_1053"]{

    width: 250px !important;

    display: inline-block;

    vertical-align: middle;

    }

    Result:
    Tested this on Chrome, FF and IE8. All displays the same, just wanted to make sure they are working on different browsers. :)
    Let us know if you need anything else. Thank you!