How to set fixed position for Total fields inside of the form?

  • Profile Image
    melodicsounds
    Asked on January 16, 2017 at 04:35 PM

    Hi guys, 

     

    So I am working on this form: https://www.jotform.co/form/70125778033858?preview=true and as you can see it is divided in 3 sections. I want to achieve that all my totals "Costo por lectura", "Costo por Urgencia", "Subtotal" and "Total" appear fixed somewhere (top or left or right somewhere that looks nice and clean) in the second section. So when you enter "Detalles de tu Tarea" this fields appear fixed somewhere so you can see how they change depending on the options you select and that you always look at those fields.

  • Profile Image
    Chriistian
    Answered on January 16, 2017 at 08:48 PM

    You can inject the custom CSS code below to make the total fields appear fixed on the top left.

    #id_52,#id_53,#id_55,#id_56 {

        position: fixed;

        display: block;

        left: 0;

    }

    #id_52{

       top: 0px;

    }

    #id_53{

        top: 90px;

    }

    #id_55{

        top: 180px;

    }

    #id_56{

        top: 270px;

    }

    Please note that your total fields are currently on the third section so they will only appear there. If you want them to appear in the second section instead, you can use the jotform field manager to move them to the second section, or drag them to the second section before applying the CSS.

    If you need further assistance, please let us know.
    Regards.

  • Profile Image
    melodicsounds
    Answered on January 18, 2017 at 12:26 PM

    So thank you very much for the help this helped a lot. But I got 1 consern, how can I achieve that the total also appears on third section "pago". Is there any way we can achieve this? Because when you go to payment options there is no total shown.

  • Profile Image
    BJoanna
    Answered on January 18, 2017 at 01:35 PM

    If I understood you correctly you want to have "Total" both on second and third page of your form.

    To achieve this you will need to add one additional field to third page of your form and pass value from "Total" field on second page to "Total" field on third page. 

    I have cloned your form added one additional Total field to the form and I added this CSS code:

    #id_68{

        position: fixed;

        display: block;

        left: 0;  

        top: 270px;

    }

    I have also set this condition.

    here is my demo form: https://www.jotformpro.com/form/70174984408968 

    Feel free to test it an clone it

    Also please note that Total fields are overlapping inside of the Form Builder, because they both have same position.  

    Hope this will help. Let us know if you need further assistance.