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

    Can a loading bar be displayed while the form loads?

    Asked by OLNCMYWeb on October 04, 2014 at 07:30 PM

    I have a very long, muti-page form that tends to be a little slow at loading.

    When testing this form either by preview or by link, if I click on a form tab (or the next button when not conditional) too fast, before the form has completely loaded, it redirects me to paypal. -- Prior to adding paypal integration, it would redirect to the home page of my website. --  I've now included recaptcha in my form and it's redirecting to captcha.

    In another thread dated earlier this year (http://www.jotform.com/answers/348201-How-can-I-show-progress-while-the-form-is-loading) there was an advanced option to "Show Progress Bar". That option doesn't appear to be available anymore, so my question is, how can I show a progress bar while my form is loading?

    Thanks,
    Becky

    Page URL:
    http://www.jotformpro.com/OLNCMYWeb/registration

    JotForm preview next progress widget loading page loading bar
  • Profile Image
    JotForm Support

    Answered by jonathan on October 05, 2014 at 12:27 AM

    Hi Becky,

    The Show Progress Bar feature is now incorporated into a widget instead.

    You can check it here http://widgets.jotform.com/widget/progress_bar

     

    You can add the Progress Bar widget from the Widgets group of tools

     

    Hope this help. Please inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by OLNCMYWeb on October 05, 2014 at 12:57 AM

    Hi Jonathan,

    That's not exactly what I'm looking for. I am aware of this widget, however, it is not the progress the person make through the form that I need.

    I need a way to tell my users "Please wait, the form is loading" type of progress bar, because the pages tend to load slowly causing issues if items are clicked to quickly -- see original message in this thread.

    I will be using iframes to put my form in my wordpress site. Do you have any suggestion/recommendations?

  • Profile Image

    Answered by Shadae on October 05, 2014 at 01:51 AM

    Hi OLNCMYWeb,

    I do apologize for any misunderstand. To confirm, you would like to know if there is a way to show a loading screen before your form fully loads.

    If that is the case, currently JotForm does not have this feature in place.

    This however may be achieved on the webpage that the form is embedded on using flash.

    Please see this link for more information

    I hope this helps. Please inform us if we can assist you further.

  • Profile Image

    Answered by OLNCMYWeb on October 05, 2014 at 05:27 AM

    Thanks for trying to help, although you should be aware, the link you provided does not cover this issue.

    If you read each link you will find:

    1. The flash link is how to embed a form in a flash website -- Wordpress is not flash.
    2. The dreamweaver link is how to embed into dreamweaver -- again, not Wordpress
    3. Time delay of redirecting/loading -- that covers the time delay of a pop-up containing a form -- Not even close to what I need.

    I'm actually quite surprised that Jotform doesn't support this feature as there are many request for information within your support forum.

  • Profile Image

    Answered by OLNCMYWeb on October 05, 2014 at 06:17 AM

    I found a script that will do what I need for an iframe, however, it uses jquery and I don't know how to incorporate it.  The only thing I know is the "$" doesn't play nicely with wordpress. They recommend using "jquery" in place of it.

    I've played with this script for a while. The graphic loads but doesn't go away. Can you help me make this work? The original source is located at http://www.itgeared.com/articles/1508-display-gif-loading-iframe-jquery/

    Below is the full code for my form in an iframe. Beneath it is the script I'd like to run.

    <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="iframe1" style="width: 100%; height: 38782px; border: none;" src="//form.jotformpro.com/form/42715293175962" width="300" height="150" frameborder="0" 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>
    $(document).ready(function () {
            $('#iframe1').on('load', function () {
                $('#loader1').hide();
            });
        });
    </script>

    </code>

     

  • Profile Image

    Answered by Ben on October 05, 2014 at 07:46 AM

    Hi Becky.

    What my colleague suggested on the page linked to would achieve similar with the lightbox autopopup feature that is found after all the embedding options, which is why she suggested it, but the script you are using seems to be built for just that, so I will try to recreate it so that it works. We will however need to see your website if it will not work for some reason to see the reasons why.

    <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="iframe1" style="width: 100%; height: 38782px; border: none;" src="//form.jotformpro.com/form/42715293175962" width="300" height="150" frameborder="0" scrolling="no">
    </iframe>
    </div>
    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("iframe1");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('#iframe1').on('load', function () {
                jQuery('#loader1').hide();
            });
        });
    </script>

    </code>

    That should be it. I have marked the changed parts in bold. I would only suggest downloading the loader to your PC then uploading it to your WordPress site and change the link above to it so that it does not depend on some other website.

    Do let us know if that works for you.

    Best Regards,
    Ben

  • Profile Image

    Answered by OLNCMYWeb on October 05, 2014 at 12:29 PM

    That was it! Thank you, thank you, thank you! I am now happier than a clam :D

    I was so close. The only thing I was missing was changing the document.getElementById function JotFormIFrame to iframe1.

  • Profile Image

    Answered by Shadae on October 05, 2014 at 12:46 PM

    Hi OLNCMYWeb,

    On behalf of my colleague, you are most welcome. We are happy that you could achieve your desired result.

    Please contact us if you need further assistance.

    Thank you for using JotForm

  • Profile Image

    Answered by OLNCMYWeb on October 05, 2014 at 01:13 PM

    For anyone wanting to implement this into their iframe form, put the css in your theme's css file and tweak it.

    Style to your preferences but remove the highlight blue at a minimum to avoid conflict between your jotform code and the script css. Blue=Remove, Green=Required, Yellow=Play with all you want

    #frameWrap {
        position:relative;
        height: 360px;
        width: 640px;
        border: 1px solid #777777;
        background:#f0f0f0;
        box-shadow:0px 0px 10px #777777;
    }

    #iframe1 {
        height: 360px;
        width: 640px;
        margin:0;
        padding:0;
        border:0;
    }

    #loader1 {
        position:absolute;
        left:40%;
        top:35%;
        border-radius:20px;
        padding:25px;
        border:1px solid #777777;
        background:#ffffff;
        box-shadow:0px 0px 10px #777777;
    }

    To center the graphic over your form use:

    #loader1 {
        position:absolute;
        left:0;
        right:0;
        margin:auto;
        top:15%;
        border-radius:20px;
        padding:25px;
        border:1px solid #777777;
        background:#ffffff;
        box-shadow:0px 0px 10px #777777;
    }

  • Profile Image

    Answered by Shadae on October 05, 2014 at 02:34 PM

    Hi OLNCMYWeb,

    Thank you for sharing the code with us. This will be very useful to others.

    Please contact us if you need further assistance.

  • Profile Image

    Answered by OLNCMYWeb on October 05, 2014 at 06:20 PM

    Message deleted

  • Profile Image

    Answered by memaxt on November 05, 2014 at 08:35 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

    Answered by Ben on November 05, 2014 at 08:50 AM

    Hi @memaxt

    I have transferred this to a new thread here: http://www.jotform.com/answers/454551 so that we can properly help you out with this.

    We will be responding to it shortly.

    Best Regards,
    Ben

  • Profile Image

    Answered by gianpi701 on November 20, 2015 at 02:57 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
    JotForm Support

    Answered by mert on November 20, 2015 at 03:45 AM

    Hi there,

    I moved your question into another thread. You can easily access it by using the following link:

    http://support.jotform.com/answers/708565