Why form is not showing properly when embedded?

  • Profile Image
    TarrantSBDC
    Asked on February 13, 2018 at 12:36 PM

    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"

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

  • Profile Image
    Nik_C
    Answered on February 13, 2018 at 01:05 PM

    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!

  • Profile Image
    TarrantSBDC
    Answered on February 13, 2018 at 01:36 PM
    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
    15185470122018_02_13_12_23_21_.jpg
     
    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
     
  • Profile Image
    TarrantSBDC
    Answered on February 13, 2018 at 01:43 PM
    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



    ...
  • Profile Image
    Nik_C
    Answered on February 13, 2018 at 01:58 PM

    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.

  • Profile Image
    TarrantSBDC
    Answered on February 13, 2018 at 02:09 PM

    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!

  • Profile Image
    Jed_C
    Answered on February 13, 2018 at 02:30 PM

    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.