Form Calculations: Displaying Items, Quantity, Description, and Calculated Totals in a Table Format with Repeatable Rows

I'm sure this is a common request. I'm looking for a way to show equipment/items, item descriptions, quantity and their prices in a table-like format on a form. But I also need to be able to run calculations on those fields so a Configurable List won't work. I would like to multiply the quantity by the price to show the total line price and then also total the multiple items for a grand total. It'd be nice if the rows for the items would be repeatable and a user could add more lines. What feature would work for this scenario? Thanks!

Hi Melissa,

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

For your scenario where you want to show equipment/items with descriptions, quantities, and prices in a table-like format, and also perform calculations such as multiplying quantity by price for line totals and summing those for a grand total, here’s what you can do:

Use the Form Calculation widget combined with multiple fields for each item:

1. Create fields for item description, quantity, and price for each row.
2. Add a Form Calculation widget to multiply quantity by price to get the total for each line.
3. Use another Form Calculation widget to sum all the line totals for the grand total.
4. To allow repeatable rows, you can use the Dynamic Textbox widget or multiple sets of these fields, but note that fully dynamic repeatable tables with calculations are limited in Jotform's native form builder.

Unfortunately, the Configurable List widget does not support calculations, so it won't work for your needs. The Data Grid widget can display data in a table format but does not support calculations either.

For advanced calculations and repeatable rows, you may need to create multiple sets of fields manually or explore custom scripting outside of Jotform.

Let me know if you want detailed steps on setting up the Form Calculation widget for this purpose.

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

I am surprised that there is not a feature for this. I don't think standard fields are the best option. Is there another feature we could use?

Hi Melissa,

I understand your concern about the limitations of standard fields for your needs.

Currently, Jotform does not have a native feature that fully supports repeatable rows with calculations in a dynamic table format within the form builder itself. The Configurable List widget does not support calculations, and the Data Grid widget does not support calculations either.

However, you can consider using the following approach as an alternative:

• Use multiple sets of fields for each item (description, quantity, price) combined with Form Calculation widgets to calculate line totals and a grand total.
• For repeatable rows, you can use the Dynamic Textbox widget to allow users to add more lines, but calculations will need to be managed separately.
• For product sales scenarios, the Inventory Widget or Ticket Purchases Widget can be used along with the Form Calculation widget to handle quantities and pricing with stock management.

Additionally, you can leverage Jotform Tables after form submission to perform advanced calculations using the Advanced Formula feature. This allows you to sum fields in rows and columns for detailed calculations and summaries, but this happens after submission rather than dynamically on the form.

Unfortunately, there is no single built-in feature that combines all these requirements (repeatable rows, inline calculations, and dynamic table format) fully within the form builder at this time.

Let me know if you want guidance on setting up any of these options or using Jotform Tables for post-submission calculations.

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

How would I get 5 standard fields next to each other in a row?

Hi Melissa,

Let me help you with that:

To get 5 standard fields next to each other in a row in Jotform, you can use the Shrink feature for each field. Here’s how to do it:

1. Open your form in Form Builder.
2. Click the gear icon on each field to open its Properties panel.
3. Go to the Advanced tab in the Properties panel.
4. Toggle the Shrink option to On for each of the 5 fields you want to place side by side.
5. The shrunk fields will automatically align next to each other in the same row as long as there is enough space in the form width.

If you want to move a shrunk field to a new line, you can toggle the Move to a new line option to On in the Advanced tab.

For more columns or a more customized layout, you may also consider adjusting your form width or using custom CSS if needed.

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

Can you have a human support rep double check this please?

Hi Melissa,

One of our Support Team members will take it from here to follow up shortly.

Hi Melissa,

You can utilize an Input Table to show the product title, description, quantity, and the total based on the pricing. It's really easy to do. Let me show you how:

1. In Form Builder, click on Add Element on the left side of the page.
2. Then, in the Form Elements menu, under the Basic tab, scroll down the list and choose the Input Table field.
3. Now, just drag and drop it to your form.

Set up the row and column headers like this:Then, it's easy to set up your Input Table element to accept various input types. Let me walk you through how to do it:

1. In Form Builder, click on the Input Table element, and then click on the Gear icon.
2. Then, in the menu that opens on the right side of the page, click on Fields at the top.
3. Next, in the Input Type section, click on Multi-type Columns.
4. Finally, scroll down to the bottom, find the Column Types section, click on the Dropdown menu next to each column name, and choose the cell type for that specific column.

Now, to set up the Decription and calculation, you can use an Update/Calculate condition.

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

2. In the menu on the left side of the page, click on Conditions, and then select Update/Calculate Field. (If you already have a condition set, first click on Add Condition, then select Update/Calculate Field.)

3. Set the condition like you see below, and click on Save.

Take a look at the screenshot below to see how it works:Give it a try and reach out again if you have any other questions.

Hi Ronald, thanks for the help!

Ideally, we'd like to be able to calculate fields inside the table by field. i.e., we'd like to have a list of Products in the Model/Description dropdown, and have to way to calculate based on each field. I suppose this would be many calculations to create. But something like...

If Input Table Row 1, Model/Description = GS045, calculate Input Table Row 1 Show Price = $10000 x Input Table Row 1 Quantity.

If Input Table Row 1, Model/Description = GS080, calculate Input Table Row 1 Show Price = $8000 x Input Table Row 1 Quantity.

etc. for all Models/Descriptions and then for each Input Table Row.

Is it possible to get those calculations inside the table somehow? I don't see a way to do this since the IF criteria only allows me to search by the whole table not each individual row/field.

Then I'd like to sum all the Show Prices to the Total Cost.

That would be a lot of calculations. Perhaps there is a better way?

Thanks!

Is that is not possible, and we have to calculate the Show Prices manually, is it possible to sum all the values in Show Price into Total Cost?

Hi Melissa,

Currently, it is not possible to create calculations that reference a specific column or individual row within an Input Table. As you correctly observed, the conditions and calculations can only reference the entire table field, rather than each row or column separately. Because of this limitation, performing row-by-row calculations such as multiplying the quantity by a price based on the selected model inside the table is not supported at the moment.

Additionally, dropdown options inside an Input Table cannot dynamically display or calculate associated values. The most reliable way to achieve what you described would be similar to the approach my colleague suggested.

Give it a try and let us know if you have any other questions.

I see. Thanks. Let me see if we can rework the table. With Ronald's method and example, could we somehow total the Price field?

Hi Melissa,

If you're referring to calculating the Total Cost from the value in the Show Prices column, then that is possible by using the Form Calculation widget. Currently, I noticed that you're using the Short Text field, but the easier way to do this is by using the Form Calculation widget. Let me show you how to do it:

1. In Form Builder, click on the Add Element button located at the upper left of the page.
2. Next, go to the Widgets tab, then drag and drop the Form Calculation widget to your form.
3. Once added, click on the Add Field button, then select the Input Table.

4. Tick all the rows under Show Prices, then click on Done.

5. Lastly, follow the same formula below, then click on Save.

Here's the result:

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