Form Tab Widget is not Working When I Insert the Form via Iframe

  • mediengaarage
    Asked on September 29, 2015 at 8:59 AM

    When i preview the form it works, but when i insert the form into the website via iframe, then the Form Tab Widget works not correctly.

    It does not highlight the current tab correctly.

    Here is the form:

    http://www.jotform.com//?formID=52082313686354

     

     

  • mert JotForm UI Developer
    Replied on September 29, 2015 at 9:29 AM

    Hi there,

    I've cloned your form and embedded it with iframe. I cross checked the embedded form with the original one page by page and the widget highlight the current tab correctly.

    In this case, if you provide your web page URL, we can understand the problem better.

    Also, you can copy and paste the my version of your form in a HTML file to test it by yourself. Here is the codes:

        <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

          src="https://secure.jotformpro.com/form/52713809053959"

          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;

            }

          };

          if (window.addEventListener) {

            window.addEventListener("message", handleIFrameMessage, false);

          } else if (window.attachEvent) {

            window.attachEvent("onmessage", handleIFrameMessage);

          }

          </script>

     

    <body>

    </body>

     

    Please, cross check with your embedded one and let us know. I'm waiting for your answer.

    Thanks.

  • mediengaarage
    Replied on September 29, 2015 at 12:39 PM

    I'm sorry I did not integrated via iframe, but via the embedded code.
    With iframe the problem is that you make non visible fields visible, then the buttons on bottom disappears because of the height of the iframe does not change.

    But when i use the embedded code, the tab widget not work correctly.

    <script type="text/javascript" src="//form.jotformeu.com/jsform/52082313686354"></script>

     

  • mediengaarage
    Replied on September 30, 2015 at 3:16 AM

    Here is the form with embedded code:

    http://kunden.mediengaarage.de/bps/form.html

    The tabs don't work well.

     

    Here the form with iframe:

    http://kunden.mediengaarage.de/bps/form-frame.html

     

    But when i activate on "Schritt 3" the Radiobutton "Ausgeschiedener" then the textfield "Dienstaustritt" is visible. But the form is getting longer and you can't read the buttons "zurück" "weiter" in the bottom.

    Form Tab Widget is not Working When I Insert the Form via Iframe Image 1 Screenshot 20

     

     

     

  • mediengaarage
    Replied on September 30, 2015 at 5:27 AM

    Hello Ashwin,

     

    i insert your code and it seems to work:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/52082313686354" frameborder="0" style="width:100%; height:1700px; border:none;" scrolling="no"></iframe>


    But when i have a long site and klick to "weiter" (forward) then it jups to the end of the site seem to be empty. Test it from first step to second. We need an issue with variable height of iframe, or embedded code.

     

    http://kunden.mediengaarage.de/bps/form-frame.html

  • mediengaarage
    Replied on October 2, 2015 at 7:23 AM

    Do you have any idea?

     

  • Charlie
    Replied on October 2, 2015 at 10:31 AM

    Hi,

    Could you try inserting this iFrame code to your website, make sure to set the correct height of the iframe :

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/52082313686354" frameborder="0" style="width:100%; height:1932px; 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;}if("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>

     

    If that doesn't work, try removing or deleting the one highlighted bold above. In this case, this would be the 

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/52082313686354" frameborder="0" style="width:100%; height:12932px; 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 "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;}if("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>

     

    Let us know if that works.

  • mediengaarage
    Replied on October 2, 2015 at 10:58 AM

    The first code works !!!!!!!!!!

    Thank you!

     

  • Charlie
    Replied on October 2, 2015 at 12:04 PM

    Glad to hear that it worked. Should you need any assistance again, please do not hesitate to open a new thread here in the forum.

    Thank you.

  • mediengaarage
    Replied on October 7, 2015 at 11:29 AM

    oh i was happy to early.

    it wont work. When i go back from step 2 to step 1 by tabs, then there is only the length of the second page and the rest is cut off.

    This is at both versions of code.

    Test it here:

    http://kunden.mediengaarage.de/bps/form-frame.html

  • Charlie
    Replied on October 7, 2015 at 12:56 PM

    Hi,

    It seems like our developers just made another change on the embed code. Could you try this one:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformeu.com/form/52082313686354" frameborder="0" style="width:100%; height:12782px; 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>

    The one missing in your iFrame code is the protocol https://secure in the src link, apologies if the first one didn't have it. Or you can simply add https://secure in your existing iFrame embed code, see if that works.

    Could you try it again? Thank you for understanding.

  • Charlie
    Replied on October 7, 2015 at 12:57 PM

    I forgot to mention, please also adjust the height attribute to a lower value if it's too long.

  • mediengaarage
    Replied on October 8, 2015 at 3:24 AM

    Hi,

    it dont work. Also not with lower height. When i go back with the "zurück" Button it works well, but not when i go back with tab. Then the bottom is cutt off.

    http://kunden.mediengaarage.de/bps/form-frame.html

  • mert JotForm UI Developer
    Replied on October 8, 2015 at 5:05 AM

    Hi,

    From the code which Charlie provided, changing "scrolling" value with "yes" solves the problem on my tests. Scrolling value needs to be "yes" (scrolling="no"). Also, it is marked red from the code below. In addition, please lower the height value. 

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformeu.com/form/52082313686354" frameborder="0" style="width:100%; height:800px; border:none;" scrolling="yes"></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>

     

    I suggest you to try this one and let us know about the final state.

    Thanks.

  • mediengaarage
    Replied on October 8, 2015 at 5:34 AM

    Hi Mert,

    it is not the best solution. When i open the collapsed fields in step 3 i have 2 Scrollbars at the right side. And they dont work smooth together.

    Why does the tabs not work well when i embed the form via javascript code?