Setting the "Form is Loading" on my jotform

  • Profile Image
    memaxt
    Asked on November 05, 2014 at 08:48 AM
    Hi there,

    I get the loader to appear prior to the form loading, but once the form has fully loaded, the loading.gif still remains.

    My code:
     <div id="frameWrap">
    <img id="loader1" src="//dev.operationlookout.org/wp-content/uploads/circle-loading-animation.gif" alt="loading gif" width="100" height="100" />

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/43003452721947" frameborder="0" style="width:100%; height:9462px; border:none;" scrolling="no"></iframe>
    </div>

    <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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    <script>
    jQuery(document).ready(function () {
            jQuery('#JotFormIFrame').on('load', function () {
                jQuery('#loader1').hide();
            });
        });
    </script>
  • Profile Image
    Jan
    Answered on November 05, 2014 at 09:50 AM

    Hi,

    Please share the the url of your website where the form is embedded, so that we can take a look at it. I understand that this is the url of the form. (https://secure.jotformpro.com/form/43003452721947) The form has a progress bar feature, but I assumed you are talking about "loading bar/ icon" wherein the image will spin until the form is loaded completely. 

    I can see that you already changed the $ to jQuery. Let us know the URL of the website and we'll take a look at it.

    Thank you for your cooperation.

     

  • Profile Image
    memaxt
    Answered on November 05, 2014 at 09:53 AM

    Hi there,

    I ended up using a difference code: I followed: http://www.itgeared.com/articles/1508-display-gif-loading-iframe-jquery/

    which is very similar

  • Profile Image
    Jan
    Answered on November 05, 2014 at 10:35 AM

    Hi, 

    Thank you for sharing that link. We're glad that you're issue is fixed now.

    Thank you for choosing JotForm.

  • Profile Image
    gianpi701
    Answered on November 20, 2015 at 02:56 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 

     

     

  • Profile Image
    Sammy
    Answered on November 20, 2015 at 03:35 AM

    I have moved your question to a separate thread http://www.jotform.com/answers/708561