What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by mediengaarage on September 29, 2015 at 08: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

     

     

    form tab tab widget Via JotForm preview www then
  • Profile Image
    JotForm Support

    Answered by mert on September 29, 2015 at 09: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"

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

  • Profile Image

    Answered by mediengaarage 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>

     

  • Profile Image

    Answered by mediengaarage on September 30, 2015 at 03: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.

     

     

     

  • Profile Image

    Answered by mediengaarage on September 30, 2015 at 05:27 AM

    Hello Ashwin,

     

    i insert your code and it seems to work:

    <iframe id="JotFormIFrame" onload="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

  • Profile Image

    Answered by mediengaarage on October 02, 2015 at 07:23 AM

    Do you have any idea?

     

  • Profile Image
    JotForm Support

    Answered by Charlie on October 02, 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" onload="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" onload="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.

  • Profile Image

    Answered by mediengaarage on October 02, 2015 at 10:58 AM

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

    Thank you!

     

  • Profile Image
    JotForm Support

    Answered by Charlie on October 02, 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.

  • Profile Image

    Answered by mediengaarage on October 07, 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

  • Profile Image
    JotForm Support

    Answered by Charlie on October 07, 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" onload="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.

  • Profile Image
    JotForm Support

    Answered by Charlie on October 07, 2015 at 12:57 PM

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

  • Profile Image

    Answered by mediengaarage on October 08, 2015 at 03: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

  • Profile Image
    JotForm Support

    Answered by mert on October 08, 2015 at 05: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" onload="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.

  • Profile Image

    Answered by mediengaarage on October 08, 2015 at 05: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?