How to display the list of selected products being ordered?

  • milladesignmaccom
    Asked on May 1, 2016 at 1:19 PM

    Hi, is it possible to get a list over the products that you have ordered down in the total payment field? So that the customer can control at the end of the form which products that they have ordered, not just the total amount?

  • Kiran Support Team Lead
    Replied on May 1, 2016 at 3:05 PM

    I understand that you want to show the list of products being ordered along with the total before clicking on Submit button. I think you are looking for the widget "Preview before submit". This widget displays the values entered on the form along with the products selected on a separate page that helps the user to review the selections and go back to make changes if necessary.

    Following is the screenshot of "Preview before submit" widget used in a demo form with payment field consisting 6 products.

    How to display the list of selected products being ordered? Image 1 Screenshot 20

    Please give it a try and let us know if you need any further assistance. We will be happy to assist. 

     

  • milladesignmaccom
    Replied on May 1, 2016 at 3:52 PM

    this is great, but how can I get the same css style for this button as the rest? Or just get it in a bright color so it can bee seen? and under the total amount, I thought I placed it there but when I preview the button named: Forhåndsvis din bestilling is put down...

    How to display the list of selected products being ordered? Image 1 Screenshot 30How to display the list of selected products being ordered? Image 2 Screenshot 41

     

  • Welvin Support Team Lead
    Replied on May 1, 2016 at 5:52 PM

    I've fixed the button style by adding the following custom CSS codes to your form:

    button#checkButton {

        border: 1px solid #4e4949 !important;

        color: #5e2d2d !important;

        background: #f8f8f8;

        box-shadow: none;

        text-shadow: none;

        line-height: 28px;

        width: 299px;

        margin-left: -110px;

    }

    button#backToForm {

        border: 1px solid #4e4949 !important;

        color: #5e2d2d !important;

        background: #f8f8f8;

        box-shadow: none;

        text-shadow: none;

        line-height: 50px;

        width: 299px;

    }

    You can check the codes in the form designer (https://www.jotform.com/form-designer/).