How to display the list of selected products being ordered?

  • Profile Image
    milladesignmaccom
    Asked on May 01, 2016 at 01: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?

  • Profile Image
    Kiran
    Answered on May 01, 2016 at 03: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.

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

     

  • Profile Image
    milladesignmaccom
    Answered on May 01, 2016 at 03: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...

     

  • Profile Image
    Welvin
    Answered on May 01, 2016 at 05: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/).