How to add progress steps or progress bar into my form

  • Profile Image
    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

  • Profile Image
    Elton
    Answered 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>

    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.