Form not showing up correctly in the web page

So we are not getting any people using the form the last few days which isnt normal. We had someone just call us and say it worked the other day and today it says she is not in the service area and it erroring out.

I just tested it and the form was blank with a unhappy face meaning it could not load. I hit refresh and it loads but then loads ALL of the hidden fields.  I hit refresh and it looks good.

I load it again after clearing my browser and it shows what I captured below. I could not get it to error out again in the first two examples so I have no images.

1) What is going on here? I am pretty sure I have this in an iframe "to avoid" conflicts. Can this be fixed or will there always be the risk of the form not loading properly?

2) This is important to my busienss so I need to know what i can do to ensure reliabilityl

Well I cant get the file to load. But the 3rd error was part of the form not loading and getting cut off.

https://secure.jotform.us/kauseway/book_now

Hi there,

I tried checking your stand alone form and your webpage using 3 different browsers, Chrome, Firefox and Internet explorer. The form are showing up properly. You are right, the form is using iFrame embed method.

May I ask you, this issue is intermittent right? Also, it only happens when you or your client view the web page where the form is embedded right? And are you using a desktop/laptop computer or a phone/mobile device to check the web page?

I would advised you to recommend the user to use latest browsers and update them. Also advised them to clear their browser cache. I will now clear your form cache.

Thank you.

Thanks for the reply. My faith in using this is really starting to get shaky.

Ok I started to fix all the empty fields. But now I am stopping. All the condition have been deleted.  I need this escalated to top support and an answer as to why all the conditions are now missing.  I cant use the forms in our business if randomly breaks for no reason.

I need to moved your inquiry on another thread so that we can assist you properly.

The URL of the new thread is: http://www.jotform.com/answers/510769

We will reply to you on that thread shortly.

Thank you for understanding.

Ok so lets keep working on this issue. Here is what I am seeing. Why??

https://www.dropbox.com/s/ac6k1spm7tnkqas/book%20error%202.PNG?dl=0

https://www.dropbox.com/s/wyn24gkiv6bnthe/book%20now%20not%20loading%201.PNG?dl=0

 So it doesnt show up.  Or its cut off or it was showing all the fields. I dont have a pic of it showing all the fields and right now I unhide them to work on this.  But why does it load this way? What do I need to do to ensure 100% reliable loading of this form?

I presume that it might be caused by the script under the iframe code, but removing it would stop it from resizing when needed.

What I would however suggest is to change the current code:

<iframe frameborder="0" scrolling="no" style="width: 100%; height: 1916px; border: medium none;" src="https://secure.jotform.us/form/43299184525160" allowtransparency="true" onDISABLEDload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe><br>
<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 &gt; 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>

into this:

<iframe frameborder="0" scrolling="no" style="width: 100%; height: 1916px; min-height: 1916px; border: medium none;" src="https://secure.jotform.us/form/43299184525160" allowtransparency="true" onDISABLEDload="window.parent.scrollTo(0,0)" id="JotFormIFrame"></iframe><br>
<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 &gt; 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>

As you can see I have simply added the min-height CSS property. What it will do is force the iframe to be shown in at least that amount of space so if you see it cut off at some point, it is not caused by the iframe code.

This change will help with the issue on this image: https://www.dropbox.com/s/wyn24gkiv6bnthe/book%20now%20not%20loading%201.PNG?dl=0

Now the other image: https://www.dropbox.com/s/ac6k1spm7tnkqas/book%20error%202.PNG?dl=0 shows a different type of error which can be caused if you refresh the browser window 2-3 times, or just quickly, stopping its loading, but do let us know if you are being shown this icon even when you are visiting your website for the first time (not a refresh).

@ronprosky I'm sorry to hear that, but to address your problem properly, I've created a new thread for you. Please check it here: https://www.jotform.com/answers/818634.