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 can I swap the positions of quantity and price on form?

    Asked by carterceo on June 18, 2013 at 01:15 PM

    I would like to have the price below the name of the product and have the quantity located where the price is now.  When I add the quantity option the form becomes too long.  

    Page URL:
    printmypano.com

    quantity name product quantity option
  • Profile Image

    Answered by pinoytech on June 18, 2013 at 02:51 PM

    Hi,

    Can you please take a look at this cloned form if this is what you wan to achieved?

    http://www.jotformpro.com/form/31685902468968

    If yes, inject his custom css into your form.

    /*---PRODUCTS---*/

    #input_7_quantity_1004_0.form-textbox {

    position: absolute;

    margin-left: 130px !important;

    margin-top: -45px !important;

    }

    label[for="input_7_quantity_1004_0"] {

    position: absolute;

    margin-left: 176px !important;

    margin-top: -41px !important;

    }

    #input_7_quantity_1005_0.form-textbox {

    position: absolute;

    margin-left: 157px !important;

    margin-top: -45px !important;

    }

    label[for="input_7_quantity_1005_0"] {

    position: absolute;

    margin-left: 203px !important;

    margin-top: -41px !important;

    }

    .form-product-details {

    position: absolute;

    margin-top: 24px !important;

    margin-left: -90px !important;

    font-size: 12px !important;

    }

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image

    Answered by carterceo on June 18, 2013 at 02:57 PM

    This is perfect!

     

    Thank You!  Best support ever from a service!

     

    Tim Carter

    printmypano.com

  • Profile Image

    Answered by pinoytech on June 18, 2013 at 03:13 PM

    It's my pleasure! If you need our assistance again, feel free to contact us at anytime.

    Have a nice day!

  • Profile Image

    Answered by carterceo on June 18, 2013 at 05:14 PM

    One more question?

    Boss would like the prices to be both right or left aligned, not right and left.  Is it possible to control the position of $146.95 USD so that is left aligned?

  • Profile Image
    JotForm Support

    Answered by jonathan on June 18, 2013 at 07:31 PM

    Hi Tim,

    My colleague will get back to you with a CSS code solution on this once he's back online.

    I will also try to come up with one. We will notify you.

    Please stay tuned.

    Thanks.

  • Profile Image

    Answered by pinoytech on June 19, 2013 at 10:55 AM

    @carterceo

    Sorry to keep you waiting. I have now updated the codes that I use to this:

    /*---PRODUCTS---*/

    #input_7_quantity_1004_0.form-textbox {

    position: absolute;

    margin-left: 157px !important;

    margin-top: -45px !important;

    }

    label[for="input_7_quantity_1004_0"] {

    position: absolute;

    margin-left: 203px !important;

    margin-top: -41px !important;

    }

    #input_7_quantity_1005_0.form-textbox {

    position: absolute;

    margin-left: 157px !important;

    margin-top: -45px !important;

    }

    label[for="input_7_quantity_1005_0"] {

    position: absolute;

    margin-left: 203px !important;

    margin-top: -41px !important;

    }

    label span.form-product-details b{

    position: absolute;

    margin-top: 24px !important;

    margin-left: -90px !important;

    font-size: 12px !important;

    left: 115px;

    }

    This is how it looks like now: http://www.jotformpro.com/form/31685902468968

    If you need further assistance, do let us know.

    Thank you!

  • Profile Image

    Answered by CoverStarExperiences on July 25, 2013 at 04:53 AM

    Hi,

     

    Also need some help on this custom code:

    I currently have this:

     

    http://www.jotform.com//?formID=32034807832855

     

    I need to make it so that the price is displayed below the "Taster" Part and the "guests" is shown below the drop down box. Can this be done?

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 25, 2013 at 05:05 AM

    Hi,

    Do you want it to be like this?

    If yes, removed all the existing CSS codes injected to that specific form and inject this instead:

    .form-product-item{

    width: 258px;

    height: 59px;

    }

     

    .form-product-details{

    position: relative;

    top: 26px;

    left: 115px;

    }

    However, if you want it below the dropdown box, replace the 2nd CSS codes to this:

    .form-product-details{

    position: relative;

    top: 44px;

    left: -58px;

    }

    You can play around with the top and left value in this CSS codes to position the price text.

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on July 25, 2013 at 05:14 AM

    @CoverStarExperiences

    I have made corrections. Kindly check the right thread here: http://www.jotform.me/answers/248356