How to show order summary at the end of the form?

  • dima888
    Asked on July 21, 2017 at 4:23 AM
    also can you please tell me how to show order summary at the end of the form (based on product total)?
  • Charlie
    Replied on July 21, 2017 at 6:05 AM

    Could you please elaborate on this? Do you want to show the order summary AFTER the form is submitted? Or do you want it to show in the PDF submission?

    If you want to display a custom summary of the submission details of the user after clicking the submit button, you can navigate to your Settings->Thank You page. 

    How to show order summary at the end of the form? Image 1 Screenshot 20

     

    To add the fields from your forms, simply select them under the "Form Fields" drop down. To understand more about this feature, you can check this guide: https://www.jotform.com/help/211-Setting-up-the-Thank-You-Page

    I hope that helps. 

  • dima888
    Replied on July 21, 2017 at 6:31 AM

    Thank you

    I wish to see the order summary (total sum) at the end of the form itself...my total is a result of the calculation done in the products menu.

  • liyam
    Replied on July 21, 2017 at 11:15 AM

    Just would like to make sure that I'm am understanding properly the form you are referring to as well as what you would like to achieve:

    If I'm not mistaken this is the form that you are working on: https://www.jotform.com/72002318460343

    And what you would like to do is just copy the total amount (sum) of the order, is that it?

    If yes, I would suggest adding a regular input field (Short text entry) on your form:

    How to show order summary at the end of the form? Image 1 Screenshot 40

     

    Rename the Short text entry field you have just added to have a proper label such as "Total";

    Next, add two conditions:

    1st: disable the textbox field that you have added if a Subscription Plan is selected in your form (this will set the field as readonly)

    How to show order summary at the end of the form? Image 2 Screenshot 51

    2nd: Add a calculation condition which will copy the amount from your Subscription Plan to your added text box field

    How to show order summary at the end of the form? Image 3 Screenshot 62

     

    Once you have all set, it should show the amount in the textbox when filling up the form. 

    We can also hide the borders of the textbox to make it look like it is not a textbox. But the ID of the field may vary to when you have added the field. 

    Here is an example of the CSS code:

    #input_39 {
      box-shadow: inset 0px 0px 0px 0px #000;
      border: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
       user-select: none;          
    } 

    Then you can add the CSS code following the steps from this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If I may have mistaken on comprehending what you are trying to achieve, please let us know.

    Thanks.

  • dima888
    Replied on July 22, 2017 at 8:56 AM

    thank you - I added the conditions and it works great - the only problem is the number doe not have a currency symbol - EUR as my prices are in euro - can this be corrected?

  • liyam
    Replied on July 22, 2017 at 10:44 AM

    Hello,

    I have a better solution, now that since you wanted to have the Euro symbol as well.

    Just add the Form Calculation Widget in your form

    How to show order summary at the end of the form? Image 1 Screenshot 50

     

    Then open the widget settings, type in the Euro symbol, and add the Subscription field

    How to show order summary at the end of the form? Image 2 Screenshot 61

     

    Next, click the ... button key. A new window panel should appear

    How to show order summary at the end of the form? Image 3 Screenshot 72

     

    Next, on the Options tab, click on the Result field is read only checkbox, and go back and click the Save button

    How to show order summary at the end of the form? Image 4 Screenshot 83

    It should then do the same as the textbox previously but this time with the Euro symbol.

    If you have questions, please let us know.