Is it possible to create an order form with multiple rows

  • yogishchandra
    Asked on July 25, 2017 at 1: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

  • Charlie
    Replied on July 25, 2017 at 5: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. 

    Is it possible to create an order form with multiple rows Image 1 Screenshot 100

     

    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. 

    Is it possible to create an order form with multiple rows Image 2 Screenshot 111

     

     

    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 

    Is it possible to create an order form with multiple rows Image 3 Screenshot 122

     

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

    Is it possible to create an order form with multiple rows Image 4 Screenshot 133

     

    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 

    Is it possible to create an order form with multiple rows Image 5 Screenshot 144

     

     

     

    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. 

    Is it possible to create an order form with multiple rows Image 6 Screenshot 155

     

    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. 

    Is it possible to create an order form with multiple rows Image 7 Screenshot 166

    Below are the conditional logic for 3 product sections. 

    Is it possible to create an order form with multiple rows Image 8 Screenshot 177

     

    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". 

    Is it possible to create an order form with multiple rows Image 9 Screenshot 188

     

    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.