CSS Question

  • Profile Image
    Asked on September 05, 2011 at 06:57 PM



    I would like to know how I can make quantity and gender appear on the same line as their corresponding product

    I have already tried expanding my form size, but that doesnt make a difference, I'm assuming that I may need to inject some css 

    into my form.


  • Profile Image
    Answered on September 05, 2011 at 10:39 PM

    Hi kmarimon1,

    You can use the Shrink function in order to fit in several fields in a single row. Just click the gear icon and select Shrink. Repeat this process with your other fields.

    Please let us know if you need further assistance. Thank you for using JotForm!


  • Profile Image
    Answered on September 07, 2011 at 05:56 PM

    I thought you would notice that my question is regarding the payment tool, the two drop down fields below are simply "options" that I added, for the user to specify during checkout.


  • Profile Image
    Answered on September 07, 2011 at 10:40 PM

    Hi there,

    Thank you for using JotForm!

    Unfortunately, this is currently cannot be done with JotForm's form builder. However, I do get how this could be useful especially in terms of the design. I will try to submit it to our feature request list and hopefully, our developers can integrate this in the future. For the mean time, you can try editing the form's full source code and make the necessary changes. Hope this helps.

    If you do need further assistance regarding JotForm, please feel free to contact us. Our team will be more than willing to help you with your issues.


    Albert  | JotForm Support

  • Profile Image
    Answered on September 09, 2011 at 12:46 AM

    Hi kmarimon1

    With due respect to my learned colleague, it is indeed possible to achieve the look you want, using the form builder's Inject Custom CSS feature.

    Copy the following CSS and paste it into the Inject Custom CSS box in your form's Preferences:

    .form-product-item {
    padding-top: 10px;
    .form-product-item .form-sub-label-container {
    top: 0;
    left: 490px;
    position: absolute;
    .form-product-item .form-sub-label-container + .form-sub-label-container {
    left: 550px;

    Please be advised that the above CSS will not work in Internet Explorer 6 and earlier versions. As a matter of fact, this tool shows that using such CSS makes the payment field in a form unusable! You can use one of the following methods to get around this obstacle:

    1. Simply put a notice on the form stating NOT to use IE6 or below

    2. Embed the full source of the form into a webpage of your own and use the @import rule with the media designation

    Should you require additional assistance with this or or any other aspect of our product, please let us know. Our team is always willing to help users get the most out of their forms.


    ~ Wayne