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

    Include Progress bar in my form

    Asked by gianpi701 on November 20, 2015 at 03:34 AM

    Hello some one can help me pls

    I do have a form loading into a website but it take few secons, that could get customer go awaybefore form is completely loaded.

    I saw prevoius topics but I do not know how to include progrss bar html into the form html to be just one thing and once the form is loaded the progrees bar disappers

    The web page where the form loads is the following

    http://www.certificazione-ape.com/#!costo-ape/c1kjt

    and the html form code i that one (where the progress bar html code should be included)

     

     

        <iframe

          id="JotFormIFrame"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/53005659523959"

          frameborder="0"

          style="width:100%;

          height:514px;

          border:none;"

          scrolling="no">

        </iframe>

        <script type="text/javascript">

          window.handleIFrameMessage = function(e) {

            var args = e.data.split(":");

            var iframe = document.getElementById("JotFormIFrame");

            if (!iframe)

              return;

            switch (args[0]) {

              case "scrollIntoView":

                iframe.scrollIntoView();

                break;

              case "setHeight":

                iframe.style.height = args[1] + "px";

                break;

              case "collapseErrorPage":

                if (iframe.clientHeight > window.innerHeight) {

                  iframe.style.height = window.innerHeight + "px";

                }

                break;

              case "reloadPage":

                window.location.reload();

                break;

            }

            var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

            if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

              var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};

              iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");

            }

          };

          if (window.addEventListener) {

            window.addEventListener("message", handleIFrameMessage, false);

          } else if (window.attachEvent) {

            window.attachEvent("onmessage", handleIFrameMessage);

          }

          if(window.location.href && window.location.href.indexOf("?") > -1) {

            var ifr = document.getElementById("JotFormIFrame");

            var get = window.location.href.substr(window.location.href.indexOf("?") + 1);

            if(ifr && get.length > 0) {

              var src = ifr.src;

              src = src.indexOf("?") > -1 ? src + "&" + get : src  + "?" + get;

              ifr.src = src;

            }

          }

          </script>

     

    THANKS TO HELP ME 

    progress bar form fields iframe
  • Profile Image

    Answered by Sammy on November 20, 2015 at 03:37 AM

    It appears the requests from your domain are taking a bit long hence it appears as if the form loading is taking time.

    Regarding the progress bar you can use the progress widget provided in the form builder

  • Profile Image

    Answered by gianpi701 on November 20, 2015 at 03:52 AM

    hello sammy

    thanks but i do not need progress bar to let customer check id the form is fully or partially filled in, no...

    I need a bar to let customer understand that the form is loading, becasue when the webpage apperas, the form takes time to load, and while teh customer is waiting for, I need to show something to him otherwise he will go away

    I hope now is clear

    thanks a lot for your support 

  • Profile Image

    Answered by Sammy on November 20, 2015 at 04:31 AM

    Thank you for the clarification, your requirement is no clear.

    I have made a code snippet that shows the loading message until the form is full loaded, I believe it will address your issue.

    Kindly check it out on this pastiebin link http://pastiebin.com/564ee7812809b

    Please let me know if you require any assistance.

    I have also noticed that your form has some conditions whose fields have been deleted, I would also advise removing these conditions t speed up the loading of the form.