Form embedded using iframe jumps back to the top of the page when the form collapse is clicked

  • pn2
    Asked on July 6, 2018 at 7:51 PM

    Hello,

    I have a few questions about small things we have noticed.

    1. For the Address field, there doesn't seem to be a limit on what a user can input into the zipcode field. Is this normal? Is there a way to set limits?

    2. We've noticed that, when the form is in an Iframe, when the hits the section collapse button, they are brought back to the beginning of the form. Is there a way to prevent this?

    Thank you.

  • Mike_G JotForm Support
    Replied on July 6, 2018 at 11:18 PM

    1. For the Address field, there doesn't seem to be a limit on what a user can input into the zipcode field. Is this normal? Is there a way to set limits?

    I'm afraid it is not possible to limit the number of entries in a zip code field of the address field. You may want to consider having the zip code field as a separate field to limit the number of entries.

    2. We've noticed that, when the form is in an Iframe, when the hits the section collapse button, they are brought back to the beginning of the form. Is there a way to prevent this?

    Apologies for any inconvenience, but can you provide the website where the form is embedded so we can check the issue, please?

    We will wait for your response.

  • pn2
    Replied on July 9, 2018 at 3:25 PM

    Hello,

    Sorry for the delayed response. You can find the form at the bottom of this page:

    https://changingthepresent.org/pages/nonprofit-registration

    Also, another question about the Iframe of this page, we've noticed that upon completion, when the form is meant to go to the thank you page, it actually goes to the top of the webpage first. Is there a way to prevent this and make it so that when the user completes a form, they can see the thank you page in the Iframe immediately?

    Thank you.

  • Victoria_K
    Replied on July 9, 2018 at 3:49 PM

    Hello,

    Can you please try to add ?nojump at the end of the form URL?

    Here is the code, which I suggest to use to embed your form:

        <iframe

          id="JotFormIFrame-81837268784170"

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

          allowtransparency="true"

          allowfullscreen="true"

          allow="geolocation; microphone; camera"

          src="https://form.jotform.com/81837268784170?nojump"

          frameborder="0"

          style="width: 1px;

          min-width: 100%;

          height:539px;

          border:none;"

          scrolling="no"

        >

        </iframe>

        <script type="text/javascript">

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

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

            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;

            }

          }

          window.handleIFrameMessage = function(e) {

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

            if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { 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;

              case "loadScript":

                var src = args[1];

                if (args.length > 3) {

                    src = args[1] + ':' + args[2];

                }

                var script = document.createElement('script');

                script.src = src;

                script.type = 'text/javascript';

                document.body.appendChild(script);

                break;

              case "exitFullscreen":

                if      (window.document.exitFullscreen)        window.document.exitFullscreen();

                else if (window.document.mozCancelFullScreen)   window.document.mozCancelFullScreen();

                else if (window.document.mozCancelFullscreen)   window.document.mozCancelFullScreen();

                else if (window.document.webkitExitFullscreen)  window.document.webkitExitFullscreen();

                else if (window.document.msExitFullscreen)      window.document.msExitFullscreen();

                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);

          }

          </script>

    Let us know if this will not be of help.

    Thank you.