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 do I create a 'Number of Items' field

    Asked by audiopod on May 24, 2011 at 12:21 AM

    I use Jotform as an online order form for my hire business. 

    At this stage I have a list of items for hire and a check box next to them, which my customers check the box next to the item that they wish to hire. Form works well, however doesn't give the option for customers to order more than 1 of any item.

    I want a field that sits in place of, or next to the check box that the customer can enter a number into to indicate the number of specific items that they want.

    Any help would be appreciated.

    Page URL:
    http://www.audiopod.com.au

    number field JotForm order form
  • Profile Image
    JotForm Support

    Answered by abajan on May 24, 2011 at 02:07 AM

    Hi audiopod

    You can provide customers with the choice to order more than one of any item on your form be using a "Purchase Order" field.

    I have constructed a partial copy of your current form as a demo. Feel free to clone and test it. (Be sure to configure the recipient email so that you can see how submissions would appear.)

    How to Setup a Similar Purchase Order Field

    1. Load the form in the form builder and in the "Payment Tools" menu, click "Purchase Order"

    2. When the wizard loads, choose your currency and click "Next" 

    3. "Sell Products" and "Users can select multiple products" are selected by default. If you wish to have the total displayed on the form, check that box and click "Next"

    4. Click "Add New Product", enter its name, price and (optionally) the URL of its image

    5. Click "Save Product"

    6. Repeat steps 4 and 5 for each subsequent product

    7. When you have finished adding all of the products, hover your mouse over the first product which you would like to provide customers the option of buying more than one and click "Add New Option"

    8. "Add Quantity Property" is selected by default. So just click "Next"

    9. The "Properties" box contains the numbers 1 to 10 but you may enter as long a list as you wish

    10. Click "Finish"

    11. Repeat steps 7 to 10 for each subsequent product that you want to give the option of purchasing more than one and when you're done click "Next" and "Finish", and save your changes. (Later, you can always hide the total and use the wizard to make other adjustments by clicking the icon indicated below)

    Please let us know if this solution fits your requirements and if we can assist you with anything else related to our forms.


    ~ Wayne

  • Profile Image

    Answered by audiopod on May 24, 2011 at 03:25 AM

    Brilliant.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by abajan on May 24, 2011 at 05:51 AM

    You're quite welcome, audiopod :)
    Always glad to help where we can. 


    ~ Wayne

  • Profile Image

    Answered by algarvesuncare on June 02, 2011 at 12:52 PM

    Hi, thanks for this post.

    Is it possible to change the position of the quantity drop down box? I'd prefer it to the right of the product description rather than below. 

     

    Also, is it possible NOT to have a check box and simply have the quantity default to 0?

     

    Thanks very much in advance!

     

  • Profile Image

    Answered by algarvesuncare on June 02, 2011 at 01:04 PM

    Also, sorry to pile it on but is it possible to change the font of the price as at the moment it's almost unreadably small?

     

    Thanks again

  • Profile Image
    JotForm Support

    Answered by NeilVicente on June 02, 2011 at 03:49 PM

    @algarvesuncare

    Try injecting this css code to position the quantity drop down:

    .form-product-item .form-sub-label-container {
        left436px;
        positionabsolute;
    }

    To change the font of the price, use this code:

    .form-product-details {
        color: #999999;
        font-size: 9px;
        font-style: italic;
    }

    You may change the values of this css property. To change color, please refer to HTML Color Codes and HTML Color Names

    font-style can either be italic or normal


    To inject custom css:

    1.  Go to Setup & Embed tab
    2.  Click Preferences Form button
    3.  Choose Form Styles tab
    4.  Copy and paste the css code in the Inject Custom CSS textarea


     

    Hope this helps.


    Neil

  • Profile Image
    JotForm Support

    Answered by abajan on June 02, 2011 at 04:14 PM

    Hi algarvesuncare

    Thanks for asking. Actually, you read my thoughts because since constructing the demo form for audiopod, like you, I have been wondering if there was any need to have a check box and figuring that it would be better to just have the dropdown on the same line as the product description. As a matter of fact, there is really no need for the "Quantity" label beneath the dropdowns either.

    One method to (almost) achieve the look you want would be to inject the CSS in the form in my update below (in my subsequent post).

    Two Important Points to Note:

    1. Unless the purchase order element was the fifth field inserted into your form, you would need to replace #id_5 with the correct ID. That can be easily discovered using Firebug.

    2. Although the CSS rules I have provided above will work with most modern browsers, adjacent sibling selectors are not supported by Internet Explorer 5, 5.5 and 6.

     

    Please let us know if using the solutions provided by our team meet your expectations and if there is anything else you need to find out about our forms.


    ~ Wayne

  • Profile Image
    JotForm Support

    Answered by abajan on June 02, 2011 at 06:05 PM

    UPDATE: After running some tests, the necessity for the check boxes became clear: In some browsers, when amounts are are chosen and the page refreshed, the total does not correctly reflect what is in the dropdowns.

    There was another issue I discovered. The blank choice in the dropdowns was causing NaN (Not a Number) to sometimes appear as the total. Replacing the blank with a zero solved that problem.

    Here is a new form with the corrections. Clone it and note the changes in the injected CSS.


    ~ Wayne

  • Profile Image

    Answered by algarvesuncare on June 02, 2011 at 06:41 PM
    Wow! Thanks so much guys for your very fast and very helpful responses. It looks a LOT better already, thank you.In case you couldn't tell, i'm a bit of a beginner but i've tried to combine your approaches to get what i want generally successfully. I'm having a problem with different browsers though...in IE8 all looks fine but in Chrome, the drop down boxes are not aligned correctly with the products, they are always too lowYou can see my form here...http://www.jotform.com/form/11520016309and the current CSS is ....form-product-details { color: #046D8B; font-size: 12px; font-style: normal; } .form-product-item {color: #046D8B;} .form-checkbox, label + br, label + br + br, select.form-dropdown + label {display:none;} .form-product-item {padding-left:0;} .form-product-item .form-sub-label-container { left: 450px; position: absolute; }Is there an alternative way of positioning the boxes in a column which may work cross-browser? Perhaps referencing them to the right hand side of the form (i tried and failed!).If i use the method of abajan, they do line up in Chrome, i just much prefer the boxes to be in a column.Also, i tried moving the prices to an absolute position just to the left of the drop downs but they then changed format on to 2 lines with the EUR below the priec, which again ruined the look of the form. Any ideas? An easy and preferable solution would be if it is possible to remove the EUR completely as the symbol is already there. Sorry to bombard you, but i thought i may as well whilst i have the chance!My final question is about multiple purchase orders. I have different product ranges and ideally would like separate sections on the form so as not to have 1 huge long form. Is it possible to have 2 purchase orders (on the same form) and to have just 1 grand total at the end? Or 2 totals and also a grand total?Huge thanks guys. Much appreciatedPhilps - is there a guide to css on jotform anywhere?
  • Profile Image

    Answered by algarvesuncare on June 02, 2011 at 06:55 PM

    UPDATE: Thanks so much  for the update abajan, just spotted it. The CSS im now using is below but the problems i described a moment ago are still persisting unfortunately. Thanks in advance for any light you may be able to shed on the subject.

    .form-product-details {

    color: #046D8B;

    font-size: 12px;

    font-style: normal;

    }

    .form-product-item {color: #046D8B;}

    label + br, label + br + br, select.form-dropdown + label {

    display:none;

    }

    .form-product-item {

    padding-top:0;

    padding-bottom:8px;

    padding-left:2px;

    }

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

    left: 450px;

    position: absolute;

    }

  • Profile Image

    Answered by audiopod on June 02, 2011 at 07:42 PM

    Thank you all for your ongoing posts.

    I have attempted injecting the above CSS but am also having the issue of the drop downs not aligning. I'll keep an eye on this post to see if this issue becomes solved.

    Would be great if an option was entered into the Form Tools section to allow for a drop down number in place of a check box. Surely for the designers of Jot Form this wouldn't be too big an ask. Jotform is a brilliant creation, and this would just make it a little better.

    I too would like the ability to enter more than one 'Purchase Order' field into my form to allow for multiple sections / classifications.

     

    Looking forward to following this post.

    Audiopod

  • Profile Image
    JotForm Support

    Answered by abajan on June 02, 2011 at 10:34 PM

    Hi again Phil and Audiopod

    In order to get the dropdowns lined up with their respective products (independent of which browser the form is viewed in) add a declaration of top: -4px; to the .form-product-item .form-sub-label-container rule. In other words

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

    becomes

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

    (I also increased the value of the left declaration by 10 pixels to better accommodate the price element.)
    That takes care of the positioning problem (in the form belonging to Phil) but Alas! there are other issues to which you also referred.

    To stop the .form-product-details (the price) element from wrapping, use the float property. I think that once a float is defined, a width must be included. That is why I put one in the CSS. So here is how your entire injected CSS would look at this point.

    Getting rid of the EUR after each price could be tricky and you may need to resort to embedding the full source of the form into your page and simply deleting every instance of the string. However let me see if I can find a solution somewhere online that would allow the use of injected CSS in this instance too.


    ~ Wayne

  • Profile Image

    Answered by algarvesuncare on June 03, 2011 at 08:26 AM

    Legend, thanks so much! Any solutions to the remaining issues would be really useful when you are able to look at them.

     

    Cheers

    Phil

  • Profile Image

    Answered by forkeo on February 13, 2013 at 02:34 PM

    I used the code to move my "quantity" over to the side but in doing so I lost the quanity boxes for the item that dont have images. Please help me figure this out!

    http://form.jotform.us/form/30406018139143

  • Profile Image
    JotForm Support

    Answered by Welvin on February 13, 2013 at 04:12 PM

    @forkeo,

    I've check your form and the quantity boxes are there; http://screencast.com/t/2d5fBujFaR99. Have you sorted this already?

    If not please let us know and tell us how you'd like the custom boxes from the producst that don't have images to appear, what side.

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by abajan on February 13, 2013 at 06:51 PM

    @forkeo

    I saw how your form looked when you posted the question. With that previous formatting, one way to have all the quantity boxes and checkboxes visible and aligned (which I believe was part of your goal) would be to include a blank image for each item that currently has no photo. The "spacer" image would have to be displayed at the same dimensions of the other images. Also, it would would either need to be the same color as the form's background (hex code #D9D1B1 or RGB 217 209 177) or be transparent, so that it won't be visible. The image need not actually be 174 pixels wide by 109 pixels high. You can use a technique that's well known to webmasters of old: a GIF image that's just 1px by 1px.

    Alternatively, we can come up with an injected CSS solution for you.

  • Profile Image

    Answered by g274 on July 11, 2015 at 01:09 AM

    Hello,

    Do you have a form in your available templates that already has the quantity drop down to the right of the product description?  I've tried injecting that CSS code but it makes the quantity box disappear altogether :

    Thanks