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

  • Profile Image
    pn2
    Asked on July 06, 2018 at 07: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.

  • Profile Image
    Mike_G
    Answered on July 06, 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.

  • Profile Image
    pn2
    Answered on July 09, 2018 at 03: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.

  • Profile Image
    Victoria_K
    Answered on July 09, 2018 at 03: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"

          onload="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.