What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.

  • Profile Image

    How to position the calculated total on top of the form?

    Asked by vpjokela on September 19, 2015 at 11:38 AM

    I see you can have the calculated total on top of the form (a text box calculation visible at all times regardless of form crop). How do you do this?

  • Profile Image

    Answered by victor on September 19, 2015 at 12:29 PM


    I am assuming that you are referring to the PROGRESS BAR widget.

    This widget will show the progress that the user has completed in the form. You may configure the widget to only calculate the require fields or all. You can place on top of the form or using CSS code place it in the middle or bottom of the page. And lastly you may change the theme of the progress bar as you like.

    Please let us now if this helps



  • Profile Image

    Answered by vpjokela on September 19, 2015 at 12:35 PM

    Thank you, that might also be useful. But what I need is to calculate the order total (i.e. the calculation values of form choices) on a field that would stick to the top/on top of the page...?

  • Profile Image
    JotForm Support

    Answered by Welvin on September 20, 2015 at 12:36 PM

    Just like this, http://www.jotformpro.com/form/52624689865977? If yes, you can simply inject the following custom CSS codes:

    li#id_65 {

        position: fixed;

        top: 0;

        z-index: 1;

        background-color: #3FB2BD;

        color: #FFF;

        width: 645px;


    You can remove the background color if you don't need it. I just put it there to highlight the calculation field.

    Here's how to inject the custom CSS codes: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Also, you need to move the calculation on top, first field:


  • Profile Image

    Answered by vpjokela on September 20, 2015 at 05:00 PM

    That's it - thank you. I will look into it, as I'm not sure I need it after all. But very good to have the knowledge here!



  • Profile Image
    JotForm Support

    Answered by EltonCris on September 21, 2015 at 04:13 AM

    You're welcome! :)

    Feel free to let us know should you have further questions about this. Cheers!