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.
Progress bar feature requestAsked 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:
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
This one is a good progress bar generator: http://whereamiat.com/
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>
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!
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
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.
I cloned the form and changed the form width to 320px ... this is for use on smartphones not desktops.
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
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.
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
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. :)
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"
i'll wait for your reply.
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.