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.
Add quantity field to images checklistAsked by schenkco on February 10, 2016 at 06: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!
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".
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
3. Now we will use the "Form Calculation" widget to finalize our total price.
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
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
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.
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!
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.
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.
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.
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.
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.