Workaround: Adding File Uploads to Multiple Items with Calculated Totals

Hoping that it would be possible to add Price List functionality to the Configurable List I'm using on an order form. We are hoping to create an order form that allows customers to select and order multiple products and sizes within a single submission. The form should support adding multiple items, where each item represents a specific product and size combination. For every item added, the user must be able to select a product type, choose a corresponding size (with size options dependent on the product type if needed), and optionally indicate quantity. Each item must also include its own required image upload field, and this upload must be directly associated with that specific product and size selection rather than shared across the entire form.

Hi Crystal,

Thanks for reaching out to Jotform Support. I'm an AI assistant here to assist you.

Regarding your request to add Price List functionality to the Configurable List widget for an order form where customers can select multiple products and sizes with associated image uploads:

The Configurable List widget allows you to create a group of multiple types of information and add rows as needed. However, it does not natively support price list functionality or dynamic price calculations within each row.

For your needs, where each item includes a product type, size selection (potentially dependent on the product), quantity, and a required image upload field associated with that specific item, the Configurable List widget alone may not fully meet these requirements.

You might consider combining multiple widgets or using other form elements such as:

• Product List element for product selection with pricing options.
• Dropdowns or Dynamic Dropdowns for size selection dependent on product choice.
• File Upload fields placed in a way that associates uploads with specific product/size selections.

Unfortunately, the Configurable List widget does not support embedding individual file upload fields per row or dynamic price lists directly.

If you want to have multiple items with individual image uploads and pricing, you may need to design the form with separate product sections or use custom scripting outside of the Configurable List widget's capabilities.

Let us know if you want guidance on how to set up such a form using available Jotform elements.

Give it a try and let us know how it goes.

How much would the custom scripting cost?

Hi Crystal,

Regarding the cost of custom scripting for your order form with Configurable List widget enhancements, I don't have specific pricing information available. Custom scripting costs can vary widely depending on the complexity and the developer or service you choose.

If you are interested in adding customized widgets or scripting to your form, you might want to explore registering and adding your own customized widget to Jotform. Here's how you can do that:

1. Go to the Online Form Widgets page and click on Add New Widget in the bottom-right corner.
2. Fill out the fields in the Add New Widget window for widget registration.
3. Click Add at the bottom of the window to complete registration.

After registering, you can add the widget to your form by opening your form in Form Builder, clicking Add Element, searching for your widget under the Widgets tab, and dragging it into your form.

Unfortunately, for specific custom scripting cost estimates, you would need to consult with a developer or service provider who can assess your requirements.

Give it a try and let us know how it goes.

Would it be possible for someone @ JotForm to contact me with options for this custom scripting

Hi Crystal,

I don't know this information and our support team will handle your request.

Hi Crystal,

I understand you want to combine product selection, pricing, and specific image uploads into one repeating list. Currently, the Configurable List widget cannot assign calculation values to options or pass a totalc price to a payment field. Additionally, the standard Product List element does not support adding a File Upload field to individual products.

The best way to achieve your goal is to use standard form fields, duplicate them for multiple items, calculate the total using a Form Calculation widget, and pass that total to your payment integration. Let me walk you through how to set this up:

1. In Form Builder, add standard form fields for Product Type (Dropdown field), Size (Dropdown field), Quantity (Number field), and Image (File Upload field). Group them together and label them as Item 1.

2. Then, select the field and click on the Gear icon. Now, in the properties for your Product Type or Size dropdowns, go to the Options tab and assign Calculation Values so each choice has a specific price attached to it.

Duplicate these grouped fields for as many items as you want to allow a customer to buy at once (Item 2, Item 3, etc.). You can use conditional logic to keep the extra items hidden until the user indicates they want to add another item. You can display questions based on selected answers in a few simple steps. Let me show first show you how to add the questions:

1. In Form Builder, click on Add Element and drag-drop the fields you want to use as follow-up questions (I used Short Text fields in this example)
2. Next, click on the Type a Question text and change it to the question you want to use.

Now, let's set up the conditions:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Settings.

2. Next, click on Conditions on the left of the page.

3. Now, click on Show/Hide Field to create your condition (if you already have a condition, first click on Add Condition and then click on Show/Hide Field).

4. Set the conditions like you see below and click on Save:

The condition is set to show the follow up questions when the user selects Yes. Check out the screencast below to see what happens when the condition is met or not met:

After that, add a Form Calculation widget to your form. Set up the formula to multiply the chosen price by the quantity for each item, and then add all those item totals together. Then, add your preferred Payment Integration to the form. Lastly, change the Payment Type to User Defined Amount, and select your Form Calculation widget in the Get Price From dropdown. I know this is a long guide, but feel free to contact us if you get stuck or need further help.

Give it a try and let us know if you need any help.

It looks like this solution will work, but I've already run into an issue with Step One:

1. In Form Builder, add standard form fields for Product Type (Dropdown field), Size (Dropdown field), Quantity (Number field), and Image (File Upload field). Group them together and label them as Item 1.

How do I Group them together? Your video clip doesn't show this action.

Hi Crystal,

To group related fields like Product Type, Size, Quantity, and Image Upload together, you use the Section Collapse element to group a set of fields into a collapsible section. Insert a Section Collapse element before the group of fields and another after to define the section. You can set the section to be expanded or collapsed by default and control the visibility of the toggle button. You can do it in just a few steps:

1. In Form Builder, click on Add Element in the left corner of the page.
2. Then, in the menu that opens on the left, scroll down to the bottom, then drag and drop the Section Collapse element to your form.
3. You can label the Section Collapse as Item 1.
4. Under the Item 1 label, you can place the standard Form Fields such as the Product Type (Dropdown field), Size (Dropdown field), Quantity (Number field), and Image (File Upload field).

You can add as many Sections as Items as you want to allow the customer to buy at once (Item 2, Item 3, etc.). These grouping methods help organize your form visually and make it easier for users to fill out multiple related fields as one item. Check out the screencast below for my results:

You can check and test my Demo Form if it meets your requirements. You can also Clone it for you to see how I set the section collapse and form fields.

Give it a try and let us know how it goes.