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

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?

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.

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.

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. 

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.

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. 

Hi here is the js code below the iframe on the embed, as you can see, JotFormIFrame-72137688827470 ID is only called once unlike the one in your screenshot. I have also tried replacing the ID of the three, still won't work :(

<iframe id="JotFormIFrame-72137688827470" onDISABLEDload="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("JotFormIFrame-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("JotFormIFrame-" + args[2]); } 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; } 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>

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!

Hi here is the link:

https://www.lesmills.com/instructors/join-the-tribe/?mmcore.enc.pr=ebQ6mhHUlduF2o2UCNAAGKiICAW36Wif3rTiXVCbxhhq7DmmtYTgBvoVkrTdm9EvwwEyaI3ws%2b9LhAMjgCb9fi4axI1hxM8n2%2fxhiYAGLrlAOFx30ppCtjoV0fYZexKrtIyhHfzQhFbMKbm156o3d53MhgwQ1H0yqDp30EvWMP5XNkYbKKHGMf9tDGLJdpxu%2b7ljtWWJtqx0Bkjd5lBmL4gVXfT33RcB9jZinbp5174%3d&mmcore.cfgid=1

You can see there are three forms, the second form is the same form as the first one while the third one is another form. The third one, I have cloned the first form in jotform so it's another form that's why it's working

Note: Please view the page in mobile view as the layout will only show in mobile. You might see a different one when you're in desktop

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