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

    Progress bar feature request

    Asked by cheekyface on September 06, 2013 at 12:12 AM

    Can we have a progress bar for forms that span more than 1 page please?

    There is already what seems to be a request for this here:
    http://www.jotform.com/answers/160223-Feature-Progress-Bar-image

    ...but it looks to have been left without further action.

     

    Feature Request progress bar JotForm www
  • Profile Image
    JotForm Support

    Answered by EltonCris on September 06, 2013 at 12:47 AM

    Hi,

    We do not have built in progress bar as of the moment but that can be achieved when you use ready-made images in your form as explained by my colleague on that thread. Just insert the appropriate images every after page break element.

    Here's a example form: http://form.jotform.co/form/22613906105850

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 06, 2013 at 12:51 AM

    This one is a good progress bar generator: http://whereamiat.com/

  • Profile Image

    Answered by cheekyface on September 06, 2013 at 01:05 AM

    http://whereamiat.com/

    How do you use that one in a form if it's not embedded?  Do I just enter the css code into the form?

  • Profile Image

    Answered by jedcadorna on September 06, 2013 at 02:29 AM

    Hi,

    You can try to get the source code and download it and try to modify the css. It should like something like this sample.  

     

    Let us know if this works.

    Thanks,

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on September 06, 2013 at 04:32 AM

    @cheekyface

    In addition to my colleague, this is pretty doable in the form builder.

    I have created a sample form for you: http://form.jotform.co/form/32481456402854?

    You can clone this if you want. How to Clone a Form from a Web Page

    Here's a short example on how active (pink) and past (blue) color works on the bars.

    <ul id='progress_bar' class='step_one'>

      <li class="past">Step 1</li>

      <li class="active">Step 2</li>

      <li>Step 3</li>

      <li>Final Step</li>

    </ul>

    If you'd like to make the each bar active, just add a class "active" in it, the same with the past class.

    Let us know should you need further assistance. Regards!

  • Profile Image

    Answered by markashton on December 10, 2013 at 06:14 AM

    @EltonCris

    This is exactly what I want: http://form.jotform.co/form/32481456402854

    But with following .....  

    Step 1  >> Step 2 >> Final Step

    The only colour change would be past blue: #2D0039

    The Form Width is 320px ... as it is for a mobile form

    It has got me stumped ... anyone who knows a tweak or two to get that going.

    i'd be really grateful.

    Any form I can clone would be ideal.

    Thanks In Anticipation

    Regards Mark

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on December 10, 2013 at 08:15 AM

    Hello Mark,

    I have cloned this form and implemented few changes. Please take a look at the following form and see if that suits your requirement: http://form.jotformpro.com/form/33433352515953?

    If it looks okay, feel free to clone this form. This guide should help you in form cloning: http://www.jotform.com/help/28-Cloning-a-Form-from-a-Web-Page

    Do get back to us if you need few more changes to be implemented.

    Thank you!

  • Profile Image

    Answered by markashton on December 10, 2013 at 10:10 AM

    Hi,

    I cloned the form and changed the form width to 320px ... this is for use on smartphones not desktops.

    http://form.jotformpro.com/form/33433731702952

    The "Final step" wraps to the next line and the progress indicator does not fit to the 320px width. Needs to be about 300px in total to have a margin either side.

    I still can't get thgis thing sorted.

    Appreciate the help. Thanks Mark

  • Profile Image

    Answered by jedcadorna on December 10, 2013 at 12:05 PM

    Hi Mark,

    Can you try this form and check if this does not goes to the next line? So far I have tested it through 320 width Iphone http://form.jotformpro.com/form/33434658624964. I can't really tell as this is not an actual phone. 

     

    We'll wait for your reply.

    Thanks,

  • Profile Image

    Answered by markashton on December 10, 2013 at 01:39 PM

    Hi,

    Your form works: http://form.jotformpro.com/form/33434658624964

    The final step I mentioned was wrapping in a nornal browser ... I haven't checked how it looks on a smartphone browser.

    The important thing is that forms have to be 320px width ...

    All your examples are with a 690px width ... this is no good ... has to be for a 320px width ~ more like 300px to allow for white space.

    My cloned form with a 320px width is: http://form.jotformpro.com/form/33435707166961

    Is it too difficult to get this CSS to fit these dimensions.

    Many thanks for your kind help

    Regards Mark

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 10, 2013 at 04:04 PM

    Hi Mark,

    Try it with this one: http://form.jotformpro.com/form/33436024861956?

    I've adjusted the progress bar to 300px width so it fits on 320px width form.

    I hope this helps. Let us know if you want further adjustments. :)

    Regards!

  • Profile Image

    Answered by jms6 on July 26, 2014 at 02:10 AM

    anyone can tell me how to clone "demo progress bar"

    It seems not working, It's says:

    "No form found on the page. Please check the source code you provided"

    http://www.jotform.com/answers/408489-No-form-found-on-the-page-#0

     

    i'll wait for your reply.

    Thanks,

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on July 26, 2014 at 03:40 AM

    Hello jms6,

    It seems you have created another thread for your same question and you will be answered here:  http://www.jotform.com/answers/408489 

    You get this error only when the form owner have "Privacy" setting to not allow form cloning.

    Thank you!