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 put the product and the quantity on the same line, preferably

    Asked by fltconference on November 28, 2012 at 05:20 PM

    How can I put the product and the quantity on the same line, preferably with the quantity first.



    This is a re-post of a comment on Setting Up Your First Order Form

  • Profile Image

    Answered by fxr on November 28, 2012 at 05:49 PM

    This is going to depend on the exact configuration of your form.

    But can you please try injecting this custom CSS?

    .form-sub-label-container  {display:block !important; margin-top:-20px !important; margin-left:170px !important;  }

    --

    If that isnt quite right, please provide the ID or a link to the form you are working on.

    Thanks.

     

     

  • Profile Image

    Answered by fltconference on December 05, 2012 at 12:09 PM

    Thanks for the respoinse, but that appeared to do nothing.

    I have tried the following and it seems to work:

    .form-product-item .form-sub-label-container { top: -4px; left: 0px; position: absolute; }

    .form-product-item .form-checkbox{ top: 0px; left: 60px; position: absolute; }

    .form-product-item label{ top: 0px; left: 155px; width:300px; position: absolute; }

    You can see my form at formID=23324302710135

    Now I'd like to hide the checkbox with

    .form-product-item .form-checkbox{ top: 0px; left: 60px; position: absolute; visibility:hidden;}

    since it ought to be redundant when the user chooses a quantity. However, if the user chooses a quantity and then changes their mind and sets it back to empty, the total no longer computes correctly. I tried putting zero in the quantity menu, but PayPal gets upset with that. So the checkbox must remain visible to clear the checkmark. I view this as a bug: If the user picks a number, the check box gets checked, If they pick the empty option, the checkbox ought to go back to unchecked.

    Maybe you could make the checkbox optional for backward compatibility.

     

     

  • Profile Image
    JotForm Support

    Answered by NeilVicente on December 05, 2012 at 01:18 PM

    @fltconference

    The total is being miscalculated because you have used a custom property and added a non-numerical value to it (empty).

    The acronym NaN, appearing in the total, means Not a Number in programming parlance.

    You should remove this empty value, making "1" the minimum quantity, and just keep the checkbox to make this form work properly.

  • Profile Image

    Answered by fltconference on December 05, 2012 at 01:52 PM

    I fully understand this. My point is that it is unnecessarily complicated for the user to have two controls (quantity menu and checkbox) to control the outcome.

    This is not a well designed user interface. If you automate one choice (changing quantity from empty to a number) you ought to automate the reverse in the same way. It is further asymmetrical in that clearing the checkbox does not clear the quantity leaving the user to wonder if they have done the right thing.

    You could work around this by ignoring the empty quantity when calculating the total. It is not unreasonable to assume that empty means zero in this context.

  • Profile Image
    JotForm Support

    Answered by NeilVicente on December 05, 2012 at 02:08 PM

    The quantity property was NOT designed to have an empty value.

    If the customer does not want to order a product, he simply needs to keep the checkbox unticked. If he wants to order a product, tick the checkbox then select a quantity.

    The checkbox is there for when a product does NOT have a quantity property.

    This shouldn't be complicated. Check out this clone of your form as an example: http://www.jotformpro.com/form/23395417852965?

    Best regards