Add quantity field to images checklist

  • schenkco
    Asked on February 10, 2016 at 6:22 PM

    I'm finding it very difficult to make a form that allows both images with categories and a quantity field. (If we can incorporate pricing as well, that would be ideal). 

    I want my form to look like this ultimately (https://form.jotform.com/60405092105241) but there's no way for me to add quantity (or pricing) with the images checklist. I read on the forums that I needed to create a purchase order but that limited the ability to display multiple images in one line like the form mentioned above.

    I created a separate form to see what a purchase order form would look like (https://form.jotform.com/60406601077246) but I learned I could not add an image to sub products.

    Does anyone have any suggestions or workarounds? I would really love to get this to work. Thanks!

  • Charlie
    Replied on February 11, 2016 at 2:38 AM

    I would suggest using the plain form fields to recreate your product list with images and quantity fields. The sample form https://form.jotform.com/60405092105241, does not have a quantity field on it. 

     

    If you used the simple form fields, we can attain the design or styling much more freely. Here's a sample form: https://form.jotform.com/60411668879972.

    1. Here, I'll recreate each product using check boxes. One check box for each product. In the "Options" list, you can insert the <img> HTML tag there, or you can use our "Image" field and we will just position them using CSS. In my case, I'll just position it just below the check box option.

    I'll be using a spinner field for the "Quantity" field, you can also use a "Text box" if you want. The spinner field is found under the "Survey Tools".

    Add quantity field to images checklist Image 1 Screenshot 60

    2. The good thing with using plain form fields is that you can assign values and complex calculations on them. Here, I'll assign a calculation value on a check box on its properties. You can do that by following this guide: http://www.jotform.com/help/301-How-to-Assign-Calculation-Value 

    Add quantity field to images checklist Image 2 Screenshot 71

    3. Now we will use the "Form Calculation" widget to finalize our total price. 

    Add quantity field to images checklist Image 3 Screenshot 82

    4. Here's how my formula is setup.

    (Check box 1 value * Quantity 1) + (Check box 2 value * Quantity 2) ... so on = total price

    Here's a guide that you can follow to learn more about form calculations: http://www.jotform.com/help/259-How-to-perform-calculation-in-the-form 

    Add quantity field to images checklist Image 4 Screenshot 93

    5. We want to make it quite neat or more advance, I want the quantity field to only show when the check box is filled out. You can use the "Conditions" feature here. To learn more about this, here's a guide you can refer to: http://www.jotform.com/help/57-Smart-Forms-Using-Conditional-Logic 

    Add quantity field to images checklist Image 5 Screenshot 104

    6. How to pass our final calculation to our payment integration? That can be done by following this guide: http://www.jotform.com/help/275-How-to-pass-a-calculation-to-a-payment-field 

    7. For the styling or design of the form, you can use the Form Designer Tool. To learn more about it. You can check our video guides here: http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms-. If you are familiar with CSS, you can make further advance styling. If you need help on this, please let us know.

    After that form is setup, and you need more assistance on the layout and design, let us know and we will be glad to help.

  • schenkco
    Replied on February 11, 2016 at 10:32 AM

    Sweet, now we're making progress :D Question though... is there any way to show the checkboxes (and their image) in a horizontal format like in columns? We have just over a hundred choices to choose from which may mean lots of scrolling for the end user. Let me know, thanks!

  • schenkco
    Replied on February 11, 2016 at 10:58 AM

    Perhaps this might be a good alternative http://form.jotform.co/form/33604136500846 but I would want to keep the condition where the qty is hidden until checked. It would still be ideal if the products can be shown in 3 columns to optimize the space.

    Cheers.

  • Charlie
    Replied on February 11, 2016 at 12:42 PM

    The last form you have has the products inside in the payment tool, not using simple form fields. You can learn more on how to setup an order form on this guide: http://www.jotform.com/help/165-Setting-Up-Your-First-Order-Form 

    In the payment wizard, you can setup the image of the product, but you'll need to an image link. Which means you'll need to host it.

    Add quantity field to images checklist Image 1 Screenshot 20

    To make the product list in columns, you can follow this guide: http://www.jotform.com/help/235-How-To-Have-Two-Column-Payment-Form. The CSS code on that guide can be adjusted to have your form in 3 or more columns.

     

    Regarding the quantity field, unfortunately, the product list cannot be hidden/show using conditional logic, which means we cannot hide/show the quantity field based on a user input. If you wish to use the plain form fields, you can position the fields by following this guide: http://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm 

    Let us know if you need further assistance on this.

  • Charlie
    Replied on February 12, 2016 at 2:35 AM

    It seems like your reply did not go successfully in this post, however, I received it via email. I'm quoting your reply here:

    Answered by schenkco

    I think I'm really close..I just need to be able to sort them into sections/categories. How can I add categories? https://form.jotform.com/60415891393258

     

    Would you still like to have the products in categories or sections? I'm unable to visualize it properly, perhaps you can give us a sample list of products and how you would like to categorize it.

    We'll wait for your response.

  • schenkco
    Replied on February 12, 2016 at 12:13 PM

    Regarding the categories/sections, I would want it to look something like this if possible: (the products were repeated in this example but they will be different)
     Add quantity field to images checklist Image 1 Screenshot 20
  • Charlie
    Replied on February 12, 2016 at 1:38 PM

    Thank you for providing us more details. To better assist our users, we advise them to open one thread post for each question/topic. I went ahead and opened a separate thread for your concern regarding the categorizing of your product list. Please refer to this link instead: http://www.jotform.com/answers/771194. We will address it accordingly.