Why form is not showing properly when embedded?

I developed a new form and used the iFrame code to input the form on our webpage. It frequently loses connection.

Here is a copy of the code used:

    <iframe

      id="JotFormIFrame-80373471090958"

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

      allowtransparency="true"

      allowfullscreen="true"

      src="https://form.jotform.com/80373471090958"

      frameborder="0"

      style="width: 1px;

      min-width: 100%;

      height:539px;

      border:none;"

      scrolling="no"

    >

    </iframe>

    <script type="text/javascript">

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

      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>

I tested your website but I wasn't able to replicate an issue.

Could you please tell us on which Browser(s) did this issue occur?

Also, did you test from multiple networks?

We'll wait for your response.

Thank you!

I was using the latest version of Chrome on our secured network. I also attempted to access the form on Internet Explorer. It looks like we are getting a

SyntaxError: Unexpected token <

I'm unable to find the typo in the code. When I plug the regular URL into a hyperlink on a previous webpage, my Jotform loads just fine. Only when I use the iFrame code do I receive the error.

I also received this error message on the Console of my Chrome browser


GET stats.g.doubleclick.net/r/collect?v=1&aip=1&t=dc&_r=3&tid=UA-32252311-1&cid=1902293737.1516296796&jid=99791766&_gid=2099028508.1518452396&gjid=255281166&_v=j66&z=714069453:1 GET https://stats.g.doubleclick.net/r/collect?v=1&aip=1&t=dc&_r=3&tid=UA-32252311-1&cid=1902293737.1516296796&jid=99791766&_gid=2099028508.1518452396&gjid=255281166&_v=j66&z=714069453 net::ERR_SSL_PROTOCOL_ERROR
Image (async)
ta @ analytics.js:2
wc @ analytics.js:9
ba @ analytics.js:9
Sa @ analytics.js:14
Ha.D @ analytics.js:12
pc.send @ analytics.js:48
X.b.(anonymous function) @ analytics.js:25
Z.v @ analytics.js:55
Z.D @ analytics.js:54
N @ analytics.js:55
d @ gtm.js?id=GTM-NMSFBN:127
_ua @ gtm.js?id=GTM-NMSFBN:132
Tf @ gtm.js?id=GTM-NMSFBN:39
(anonymous) @ gtm.js?id=GTM-NMSFBN:124
zl @ gtm.js?id=GTM-NMSFBN:120
Ng @ gtm.js?id=GTM-NMSFBN:135
$g @ gtm.js?id=GTM-NMSFBN:55
a.push @ gtm.js?id=GTM-NMSFBN:56
Qg @ gtm.js?id=GTM-NMSFBN:53
(anonymous) @ gtm.js?id=GTM-NMSFBN:125



...

And could you please let us know what happens if you try accessing your web page from another network?

Since it looks like that it is network related because I'm still not able to replicate this issue in any Browser.

We'll wait for your response.

I'm able to load the form from the Chrome browser on my mobile device on my network. Once I turn on my wifi, it stops loading. I will check with my network administrator to see what the next steps are in solving this issue.

Thanks!

Your form loads fine from my end as well. I would suggest that you check with your network admin first to diagnose the problem.

Let us know if you have any questions or if you need further assistance.