How to add progress steps or progress bar into my form

  • litizia
    Asked on May 18, 2017 at 10:02 PM

    Hello

    It still does not work.

     

    In addition: it appears in editor of the form, but not live live.

     

    thank you very much

  • Elton Support Team Lead
    Replied on May 18, 2017 at 10:21 PM

    Hi,

    Have you tried our progress bar widget already? This is super easy to use. Just add this to your form, configure its settings and you're good to go.

    You can get the widget here: https://widgets.jotform.com/widget/progress_bar

    Demo: https://form.jotform.com/61764205570959

    However, if you want to stick with the workaround provided in the other thread, here's an updated version.

    This time, we'll have to use class attribute since ID attribute will be stripped off for security reasons. Use the following:

    <ul class="progressbar">

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

    <li>Second</li>

    <li>Third</li>

    <li>Fourth</li>

    </ul>

    How to add progress steps or progress bar into my form Image 1 Screenshot 20

    Please get the updated CSS code here: https://pastebin.com/raw/mY893vP2

    Inject this CSS codes to your form. Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Demo: https://form.jotformpro.com/71376103694963

    If you need further assistance, please let us know.