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 disappearing after 1 sec in chrome

    Asked by edwardbutterworth37 on November 23, 2015 at 11:11 PM

    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

    Page URL:
    http://www.orthoticsforyou.com.au/contact-us/

    disappearing after in www stopped working same page same
  • Profile Image

    Answered by edwardbutterworth37 on November 23, 2015 at 11:27 PM

    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?

  • Profile Image
    JotForm Support

    Answered by Chriistian on November 24, 2015 at 03:12 AM

    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.

  • Profile Image

    Answered by edwardbutterworth37 on November 25, 2015 at 07:37 PM

    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.

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on November 25, 2015 at 09:33 PM

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

  • Profile Image

    Answered by edwardbutterworth37 on November 26, 2015 at 01:53 AM

    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

  • Profile Image

    Answered by Sammy on November 26, 2015 at 05:11 AM

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

  • Profile Image

    Answered by edwardbutterworth37 on December 02, 2015 at 07:11 PM

    Thanks a lot Sammy!

    I'll try this today and let you know.

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on December 02, 2015 at 10:30 PM

    Please let us know if issue persist.

    Thanks.

  • Profile Image

    Answered by edwardbutterworth37 on January 14, 2016 at 12:43 AM

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

     

     

     

  • Profile Image
    JotForm Support

    Answered by beril on January 14, 2016 at 08:13 AM

    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.

     

  • Profile Image
    JotForm Support

    Answered by beril on January 14, 2016 at 08:39 AM

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

     

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

     

  • Profile Image

    Answered by edwardbutterworth37 on January 14, 2016 at 06:39 PM

    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

  • Profile Image
    JotForm Support

    Answered by jonathan on January 14, 2016 at 11:12 PM

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

  • Profile Image

    Answered by edwardbutterworth37 on January 15, 2016 at 11:46 PM

    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

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 16, 2016 at 07:17 PM

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