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.


  • Profile Image

    Is it possible to create an order form with multiple rows

    Asked by yogishchandra on July 25, 2017 at 01:57 AM

    Hi,

    Is it possible to create an order-form with multiple rows using drop-down fields.

    Example:

    S. No. | Item                      | Qty. | Rate | Amount

    1        | Dropdown - Item 1 |  2

    2        | Dropdown - Item 2 |  1

    3        | Dropdown - Item 3 |  5

    .

    .

     

    Tax%

    Total Amount

    Advance

    Balance

  • Profile Image
    JotForm Support

    Answered by Charlie on July 25, 2017 at 05:23 AM

    You can use the Configurable List widget to allow your users to add rows dynamically, here's a guide about it: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget. However, this widget was not designed to communicate directly to the Conditional Logic feature and on the payment integration fields. 

    If you want to have some kind of multiple rows, the only way to do this is recreate them using plain form fields then use Conditional Logic to hide/show them. Here's a guide that might help: https://www.jotform.com/help/297-Show-or-Hide-Multiple-Fields-at-Once-Using-the-Form-Collapse-Tool. This guide shows 3 sections where 3 guest information are filled out. The guest sections display based on the number of guest entered by the user. 

    Here's an example form that I made: https://form.jotformpro.com/72052139380956. Below are are steps on how i did mine:

    1. Here you can see that I have added "Section Collapse" fields on my form to divide the section of each products. 

     

    2. I needed to recreate the fields you mentioned but on my case it is much more simpler. I have a product drop down field, quantity box, a form calculation widget and a check box if the user wants to add a new product. 

    In my drop down product field, you can assign calculation values on them, which serves as the prices. 

     

     

    3. In the properties of the drop down field under the "Surveying" tab, you can assign calculation values. To learn more about this, you can follow this guide: https://www.jotform.com/help/301-How-to-Assign-Calculation-Value 

     

    4. Now I will need "Form Calculation" widget on the product 1 group. 

     

    This widget will allow me to calculate the price of the selected item in the drop down and the quantity of it. 

    To learn more about calculations, you can check the links below:

    https://www.jotform.com/help/259-How-to-Perform-Form-Calculation-Using-a-Widget 

    https://www.jotform.com/help/268-Conditional-Logic-Inserts-Text-Calculation-Into-A-Field 

     

     

     

    5. Now I will add a check box field that will give the option to the user if he/she wants to add a new product section. 

     

    6. Now repeat steps 1-5 to create another section of the product. In my case, I have 3 sections. You can follow this guide on how to copy multiple fields: https://www.jotform.com/help/242-How-to-Manage-Multiple-Fields 

    7. Now we will set conditional logic on our text boxes "Add another product" to show the next section collapse. Below is an example for product 1. 

    Below are the conditional logic for 3 product sections. 

     

    8. Now we want to clear the value of the section collapse if they are hidden again, this can be done by enabling the "Clear Hidden Field Values" and set it to "Clear On Being Hidden". 

     

    9. Now if you want to pass the total calculation to your payment field, that can be done by following this guide: https://www.jotform.com/help/275-How-to-Pass-a-Calculation-to-a-Payment-Field

     

    I hope that helps.