Form disappearing after 1 sec in chrome

Hi JF Team!

I have a form that has worked for a couple of years without issue however suddenly it has stopped working in the Chrome application.

Please see this link: http://www.orthoticsforyou.com.au/contact-us/

The blue envelope graphic show for a split second and then disappears whilst the same page in IE displays fine.

Any ideas?

Best regards,

Edward

FYI, the code I am using for the form is:

<iframe id="JotFormIFrame" style="width: 100%; height: 0px; border: none;" src="//form.jotform.co/form/32338228947866" width="300" height="150" frameborder="0" scrolling="no"></iframe>

<script type="text/javascript">// <![CDATA[

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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}

// ]]></script>

Would it have become corrupt some how do you think?

Hi,

Checked your website but I wasn't able to replicate the issue. Your form looks fine and it didn't disappeared.

It may be a temporary issue. Can you try it again on your end please?

Regards.

Hi Chriistian,

Thanks very much for your reply. 

It’s the oddest thing. It is not displaying on my Chrome in my office (Version 43.0.2357.132) but does display in my Chrome at home. I would put it down to something ‘wrong’ with my office Chrome however if I browse to the page in Safari on my iPhone 6+ the form doesn’t appear either? It’s very odd.

Hi,

I checked your site on an iPhone emulator and I was able to replicate the issue. The form was not displayed when I accessed your site.

I also tried to access the site on a Safari browser in my computer and the form was also not displayed on the page.

Can you try to re-embed your form using this iFrame code and see if it will fix the issue? 

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

Do let us know if the issue still persists.
Regards.

Hi Chriistian,

I have just changed the code but it doesn't work and now it seems to hand in IE too. Should I change it back?

Thanks,
Dave

Hello Dave,

I was also able to replicate the issue on safari browser, the reason the form is  not showing is because of the protocol mismatch.

Safari enforces a match stricter ruler and requires all urls to be in HTTPS if a site is calling a HTTPS URL.

In your case you website is in HTTP and its calling the iframe whose URL is referring to jotfom's HTTPS protocol.

The form is showing okay-on all other browser including internet explorer (v11)

Kindly try changing the iframe URL to HTTP then test to see if the form will load correctly

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

Thanks a lot Sammy!

I'll try this today and let you know.

Please let us know if issue persist.

Thanks.

Hi there,

I'm just getting a chance to try this. It is not working. Here is the code I am using:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.co/32338228947866" 

frameborder="0" style="width:100%; height:539px; 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>

Thank you for contacting us. I've check your website. I am able to reproduced same issue that you are having.

I've also tested your source code I realized that, the height of your IFame code seems ''0'. 

Here is what I see on your code.

You can see what happens when I change the height:

I will find a solution and get back to you soon.

To solve this, please delete the Iframe code and add the code as you see below:

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

In addition to that, change the code below on your CSS.

I hope it works.

If it doesn't resolve your issue, please let us know we will be happy to assist you.

Hi There,

Thanks very much for looking into this. I notice that you have the link as https. The previous messages said to remove that. Could you please tell me the exact URL link syntax to put inside the code please?

Also, would you know where to look in wordpress for the CSS code to change by any chance?

Thanks,

Dave

Hi Dave,

Since your website was not using HTTPS at this time, then, its better to use the non secure URL as well.

So try the code below instead

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.com/60133926119957" frameborder="0" style="width:100%; height:539px; 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 code below was to be adjusted on your form's CSS code

In addition to that, change the code below on your CSS.

I hope it works.

Let us know how it goes.

Thanks.

Hi Jonathan,

Thanks a lot for that. It appears to be working in Chrome now although the main text box seems misaligned as it's going into the blue envelope graphic: http://screencast.com/t/QR8MwennNa

It still isn't working in safari.

Best regards,

Dave

Hi,

To fix the issue with the fields, replace in the Designer  the width and max-width with : 340px.

Now, in regards to your form not being displayed in Safari, I was able to replicate your issue.

I checked the form and I can see that it has the height with a 60px value, seems like the Javascript code to calculate the height is not calculating the height properly.

You can set the height manually, and just embed the IFrame code:

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

Hope this will help you.

Regards.