Can you please make the total price sticky to page bottom?

  • Profile Image
    petrgoncharuk3
    Asked on March 04, 2021 at 07:47 AM

    Hi! Can you please make the total price sticky to page bottom? I want my clients to see the price the whole time when they are making order.

    Also I have some weird issue on Iphone. When I am choosing the product quantity, page is zooming. How to disable that effect? If you will need I can share link on video with example.
    Thank you very much for your help!

  • Profile Image
    Sigit_W
    Answered on March 04, 2021 at 09:21 AM

    Greetings,

    And option would be injecting a custom CSS code to a field.

    Related guides: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    i.e.

    #id_33 {

     position: fixed !important;

     z-index: 999;

    }

    Please note that this will make the field position fixed on Form Builder and Live Form.

    This is the cloned version of the form. I added a calculation field to capture the total and made the field position fixed.

    https://form.jotform.com/210623901789964

    Related guide: https://www.jotform.com/help/42-how-to-clone-an-existing-form-from-a-url

    I hope that helps. Let us know if you have further questions.

    Regards.

  • Profile Image
    petrgoncharuk3
    Answered on March 04, 2021 at 09:27 AM

    Thanks! Is it possible to fix it on the bottom?

    Also I have some weird issue on Iphone. When I am choosing the product quantity, page is zooming. How to disable that effect? If you will need I can share link on video with example.

  • Profile Image
    Jimmy_D
    Answered on March 04, 2021 at 02:43 PM

    Kindly inject the CSS code below to your form to prevent zooming on iOS device and push the Total field to the buttomof the form.

    .form-line[data-payment="true"] .payment_footer.new_ui {
        position : fixed;
        bottom : 0;
        left : 0;
        max-width : 768px;
        width : 100%;
        z-index: 999;
    }

    @media only screen and (max-width: 480px) {
    .form-matrix-table,.form-dropdown,.form-textbox,.form-all,.form-textarea,.form-radio,.form-checkbox{
    font-size: 16px !important

    }
    }

    Let us know should you need further assistance.

    Best regards,