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 change the position of progress bar to display next to page break?

    Asked by mbas123 on May 07, 2015 at 09:08 PM

    Hi,

    I want to know how to get the position value in css of the page break in my form. My form have 12 pages and the height vary from the number of questions that my page have. I am working or finding a way to have the progress bar that would be beside the next button. Just thinking of hard coding the position of the progress bar in css if possible and I will use the page break in every page position as my point of reference

    Thanks,

    Rey Galvez

     

     

    height next progress bar thanks
  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 08, 2015 at 01:52 AM

    Hello Rey,

    I am not sure if I have understood your requirement correctly. Can you please explain your requirement a bit more in detail and we will try to help you.

    In general terms yes you can inject custom css code in your form to change the placement of progress bar. A sample set of custom css code :

    .progressBarContainer {

      position: absolute;

      margin-top: 227px;

      width: 150px !important;

      margin-left: 389px;

    }

    It needs to be customized based on your form. I did check few of your last edited forms but could not find the progress bar added. I am not sure how you can dynamically change the position of progress bar in every page but you can try out the above custom css code for a static position of progress bar.

    Screenshot of my demo form where I have injected the above custom css code:

     

    Thank you!