Embedded a jotform thrice in the page using iFrame causes height conflict on the other 2

  • Profile Image
    rpmirabueno
    Asked on August 01, 2017 at 11:34 PM

    So yeah, I've embedded a single jotform thrice in the page. My jotform has a second page which means that the iframe changes it's height when I click next. The problem is, the dynamic height is only applied in the first jotform and not on the next two. what must I do?

  • Profile Image
    seth
    Answered on August 02, 2017 at 03:27 AM

    Hello,

    Can you please share us the website that you embedded your JotForm? We would like to investigate the issue further.

    We are awaiting your response.

    Regards.

  • Profile Image
    rpmirabueno
    Answered on August 03, 2017 at 08:33 PM

    Sorry I can't share the page at the moment as it is confidential. But here are the steps to replicate the issue

    1. Create a jotform with a second page. Take note that the second page of the form must be longer that the first one

    2. Embed the form in a webpage thrice using iframe method. I pasted all the iframe codes given by jotform thrice in the page.

    3. Check the second page of each form and you'll notice that in the first form, the height of the iframe changes as you click next button to go to the second page. In the second and third, when you go to the next page of the form, the height won't change causing for the iframe to have scrollbar.

    Thank you.

     

  • Profile Image
    Kiran
    Answered on August 03, 2017 at 11:34 PM

    This must be due to the conflict of the Scripts used in the Form embed code. Since you are using the same form, the script looks for the first form and it works with it. You may consider removing the script section from the embed code and try increasing the height of the form manually in the embed code. 

    Please give it a try and let us know if you need any further assistance. We will be happy to help. 

  • Profile Image
    rpmirabueno
    Answered on August 04, 2017 at 12:41 AM

    Hi 

    Yes I have already tried that. I have set the height of the forms manually. Unfortunately, the height still won't change when I go to the second page of the form for the last 2 occurrences. This may be because jotform targets the ID of a form. And with javascript, when we are targeting IDs, only the first occurrence of the ID is being targeted. All three forms has the same ID and that is what I want to resolve if you could help me guys.

    Correct me if I'm wrong.

    Thanks.

  • Profile Image
    Kiran
    Answered on August 04, 2017 at 02:33 AM

    Could you try embedding the forms after replacing the text JotFormIFrame in the Iframe embed script to JotFormIFrame1, JotFormIFrame2 and JotFormIFrame3 for each form separately? Each embed script will be having 4 texts to be replaced.

    Please give it a try and let us know if you need any further assistance. We will be happy to help. 

  • Profile Image
    ashwin_d
    Answered on August 07, 2017 at 01:00 AM

    Hello rpmirabueno,

    I would suggest you to please share the webpage URL where you have embedded your form and we will take a look on what is causing this issue. Its very difficult to figure out the cause without looking at your webpage. 

    I have made this thread s private and is only accessible to you and JotForm staff.

    We will wait for your response.

    Thank you!

  • Profile Image
    Kiran
    Answered on August 07, 2017 at 10:42 PM

    Unfortunately, I am not able to find any JotForms embedded on the web page provided. Did you remove them from the web page? Please try using the following 3 embed codes to display the forms on your web page. Please note that the id of each embed is different using the same form ID.

    Form One

    <iframe id="JotFormIFrame1-72137688827470" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/72137688827470" frameborder="0" style="width:100%; height:978px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame1-72137688827470"); 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("JotFormIFrame1-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame1"); } 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); } </script>

    Form Two

    <iframe id="JotFormIFrame2-72137688827470" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/72137688827470" frameborder="0" style="width:100%; height:978px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame2-72137688827470"); 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("JotFormIFrame2-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame2"); } 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); } </script>

    Form Three

    <iframe id="JotFormIFrame3-72137688827470" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/72137688827470" frameborder="0" style="width:100%; height:978px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame3-72137688827470"); 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("JotFormIFrame3-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame3"); } 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); } </script>

    Please give it a try and get back to us with the direct link to the web page if the issue still persists. We will be happy to take a look again.