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

    Setting the "Form is Loading" on my jotform

    Asked by memaxt 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>
    loading bar progress bar jquery
  • Profile Image
    JotForm Support

    Answered by Jan 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

    Answered by memaxt 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
    JotForm Support

    Answered by Jan 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

    Answered by gianpi701 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

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

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