# I want to create a matrix that has various fields for a purchase order and then calculate the Total

• annefarley
Asked on November 08, 2017 at 11:25 PM

Hi

I want to create a matrix that has various fields for a purchase order and then calculate the Total based on the Quantity and Price.  I can see in another post that you can us

regular fields and custom CSS code to emulate the matrix appearance and this way you will be able to perform calculations in your form.

Is there an example of how this is achieved?  A template somewhere I can clone from to get this result.

The field I want to have in the matrix are

 Product Name Item Description Quantity Price per unit Unit of Measure Total Cost Centre

Where the calculation is Price per unit X Quantity into the Total column

If you can help that would be great

• BJoanna
Answered on November 09, 2017 at 02:26 AM

Inside of this guide, you can find how to perform a calculation in the Matrix field:

How to Perform Form Calculation in the Matrix Field?

However, the matrix table is limited to the type of one field. You can use multiple matrix fields one for each field type that you need and position them on the same line.

If you want to use the basic field you can also position them on the same line.

Inside of this guides, you can find how to do it:

Form Field Positioning

How to Position Fields in JotForm

I found one form on your account where you already did that. If you want to style that form with the CSS code looks more like a table, you can add borders to those fields. Here is my demo form: https://form.jotform.com/73121301451944

Feel free to test it and clone it.

Hope this will help. Let us know if you need further assistance.

• annefarley
Answered on November 14, 2017 at 07:50 PM

Thanks for the information.

However can you explain how the CSS is built.

I have another form I want to do this with but can't understand the CSS that has been built.

I thought it would have to list the field id and then change the border\vertical spacing

This is the new form.

https://form.jotform.co/73117512979867

I want to change #input_30 #input_34 #input_35 #input_37 and the 4 rows below to look more like a table.

Is there a good guide you can recommended to help newbies to learn CSS