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

    Add progress steps on multiple page

    Asked by realestatecoach on October 19, 2015 at 02:47 PM
    Also, is there a way in the tools to add what step the person is on with the multi-step or page brake form (See image for example)  1 - 2 - 3 - 4
    steps progress bar
  • Profile Image
    JotForm Support

    Answered by BJoanna on October 19, 2015 at 04:25 PM

    You can add Text fields to your form to display the page numbers on your JotForm.

    Here is my demo form: https://form.jotform.com/52916277997980? 

    You can also add the Form Tabs widget to your form so that you may display the page numbers along with the tabs on your JotForm.

    http://widgets.jotform.com/widget/form_tabs 

    You can also add Progress Bar widget to your form. 

    Here is my demo form: https://form.jotform.com/52915960092964? 

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

  • Profile Image

    Answered by realestatecoach on October 19, 2015 at 06:11 PM

    The tabs could work.  I found a CSS and HTML code for the one I was trying to build.  I tried to add them to my form, but they don't seem to respond.  I'm not a expert CSS user by any means.  Here is the code that I found. Can this be used?

    /*progressbar*/

     

    #progressbar {

      margin-bottom: 30px;

      overflow: hidden;

      /*CSS counters to number the steps*/

      

      counter-reset: step;

    }

     

    #progressbar li {

      list-style-type: none;

      color: white;

      text-transform: uppercase;

      font-size: 9px;

      width: 25%;

      float: left;

      position: relative;

    }

     

    #progressbar li:before {

      content: counter(step);

      counter-increment: step;

      width: 20px;

      line-height: 20px;

      display: block;

      font-size: 10px;

      color: #333;

      background: white;

      border-radius: 3px;

      margin: 0 auto 5px auto;

    }

    /*progressbar connectors*/

     

    #progressbar li:after {

      content: '';

      width: 100%;

      height: 2px;

      background: white;

      position: absolute;

      left: -50%;

      top: 9px;

      z-index: -1;

      /*put it behind the numbers*/

    }

     

    #progressbar li:first-child:after {

      /*connector not needed before the first step*/

      

      content: none;

    }

    /*marking active/completed steps green*/

    /*The number of the step and the connector before it = green*/

     

    #progressbar li.active:before,

    #progressbar li.active:after {

      background: #27AE60;

      color: white;

    }

    /*RESUMO*/

     

    #resumo {

      padding: 15px;

      border: 1px solid #ccc;

      border-radius: 3px;

      margin-bottom: 10px;

      width: 100%;

      box-sizing: border-box;

      font-family: montserrat;

      color: #2C3E50;

      font-size: 13px;

    }

     

     

    OR for html this was the other option for the same progress bar

     

    <!-- multistep form -->

    <form id="msform">

      <!-- progressbar -->

      <ul id="progressbar">

        <li class="active">ENTER ADDRESS</li>

        <li>CONFIRM HOME INFORMATION</li>

        <li>CONTACT INFORMATION</li>

        <li>GET FREE VALUE</li>

      </ul>

      <!-- fieldsets -->

     

    I found both of these in google here

    http://codepen.io/pedroG/pen/hKarC

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 20, 2015 at 02:55 AM

    That's only possible when you use your form source code but that would require Javascript knowledge since that CSS code won't work alone without it's JS script as seen on the codepen example.

    While we do not have direct solution for that, I believe there many possible workarounds.

    1. You can use images as progress bars and place it on top of every page breaks.

    Example:

    2. Use Text tool as suggested by my colleague, place it on top of every page breaks and design it with CSS so they'll look exactly like on your example.

    Use this HTML code and paste it on Text HTML field, duplicate this field and move them on top of each page breaks in the form builder. You can change the progress text (mark in bold) to your preference.

    <ul id="progressbar">

    <li class="active">Conta</li>

    <li>Escola</li>

    <li>Pessoal</li>

    <li>Finalização</li>

    </ul>

    Then inject this CSS codes to your form to style them. Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form (Paste the CSS codes at the bottom part).

    You can take the CSS codes here http://pastebin.com/raw.php?i=EjReumA0

    After that, add active class class="active" on each li tag depending on the page number. Example in the following screenshot, I added active class on the two li tag for the 2nd page break which equivalent to PAGE 2 on the live form. This is so the progress bar changes to green (active style) as soon as you move to the next page.

     

    Live demo:

    https://form.jotform.com/52912320040944?

    ---

    Another alternative solution is to use progress bar widget. This might also be of help http://widgets.jotform.com/widget/progress_bar.

    If you are having difficulties understanding the steps above, let us know so we can further assist you.

    Thanks!

  • Profile Image

    Answered by Alexander  on October 20, 2015 at 03:43 AM
    Cool breadcrumbs work-around, EltonCris !
  • Profile Image

    Answered by realestatecoach on October 20, 2015 at 11:04 AM

    BOOM!  EltonCris that was Epic!  You guys are simply amazing and GENIUS!

     

    yes, the widget was an option, but the way it looked at the top just left something to be desired.  Didn't quite look like the finished polished product.   This one works brilliantly!!!

     

    THANK YOU!!!!! :-)

  • Profile Image
    JotForm Support

    Answered by BJoanna on October 20, 2015 at 12:26 PM

    On behalf of my colleague EltonCris, you are welcome.

    Feel free to contact us if you have any other questions. 

  • Profile Image

    Answered by paul_x on October 21, 2015 at 11:46 AM

    Feature Request to make EltonCris' breadcrumbs solution be made into a widget. 

    On top of the form tabs widget, the future-breadcrumbs-widget will be a great addition. It takes less space than the form tabs, it's current and pleasing to the eyes. 

    - Paul

  • Profile Image
    JotForm Support

    Answered by BJoanna on October 21, 2015 at 01:00 PM

    @paul_x

    I have moved your question to separate thread and we will provide you an answer there shortly. 

    http://www.jotform.com/answers/686619