-
shuishAsked on June 11, 2015 at 5:33 AM
My form displays correctly on Chrome but when on IE it shows for a split second and then disappears.
I have tried it as a iframe, embed code and Source and still no joy.
Can anyone please help
-
BorisReplied on June 11, 2015 at 9:31 AM
Hello.
I have taken a look at your website, and I can see that a script is setting the form's iFrame to have a height of 0px (zero). This causes the form to disappear as soon as that script runs:
If you have the ability to add custom CSS to your Xara 7 website, then please try inserting the following CSS to your website, and not into the form:
iframe[id="2900350078"] { height: 614px !important; }
This CSS, if placed on the website, should override the script that is setting form's height to 0px, and set it to 614px instead.
Alternatively, if this solution above doesn't work in your case, please try re-embedding your form by following this guide and video: http://www.jotform.com/help/175-Changing-Height-in-Xara-7
Please let us know how it goes.
-
shuishReplied on June 11, 2015 at 11:50 AM
I have inserted the code you sent, however it still isnt appearing on IE
Any other thoughts?
-
shuishReplied on June 11, 2015 at 12:54 PM
Encase need to know - i am using Xara 10
-
jonathanReplied on June 11, 2015 at 2:57 PM
I was also able to reproduced the issue on IE11 browser.
The website will initially load the form, and then disappear
I think it could be due to script conflict because the script embed code was being used.
I suggest you try also re-embedding the form to your Xara website using instead its iframe code
user guide: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code
Please let us know if this makes any difference.
Thanks.
-
shuishReplied on June 12, 2015 at 2:16 AM
Hello, i have inserted the form again as an iframe but still no joy - the form still disappears on IE.
The section of code you sent me also appears at the bottom of the site (iframe[id="2900350078"] { height: 614px !important; })
There is another form that opens on a new layer when you click on the "Save Time filling in this form" button on the top right - not sure if this effects it at all?
Any other suggestions?
-
BorisReplied on June 12, 2015 at 5:11 AM
I see that you are now using the iFrame embed method for two of your forms, but the problem remains the same. I also see that there are 3 JotForm forms embedded - two with iFrame method and 1 with regular script embed method.
The form disappears because one of the scripts is setting its height to 0px.
To try and fix this, please edit your website, and remove both instances of the following script:
<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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>
So, your first embed code would be changed from:
<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.com/form/2900350078" frameborder="0" style="width:100%; height:794px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>to only this:
<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.com/form/2900350078" frameborder="0" style="width:100%; height:794px; border:none;" scrolling="no"></iframe>
And your second iframe embed code should be changed from this:
<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/42431700458954" frameborder="0" style="width:100%; height:851px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>to only this:
<iframe id="JotFormIFrame2" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/42431700458954" frameborder="0" style="width:100%; height:851px; border:none;" scrolling="no"></iframe>
Notice that I have also changed the ID of your last iframe, because IDs should be unique for every element in HTML. I have made the second one unique by adding number 2 to it.
When it comes to the suggested piece of CSS code, iframe[id="2900350078"] { height: 614px !important; }, it should not have been added to your HTML code directly - it is CSS. Please remove it from the HTML of your page, as it is also no longer relevant since you have switched to iFrame embed methods. The CSS codes should be added to CSS files of your website - the files ending with .css file extension.
When you remove these two scripts, as recommended, please let us know how it goes.
-
BorisReplied on June 12, 2015 at 8:42 AM
It seems that your message did not come through successfully to the forum, but I have received your email. You can reply directly to our forum from here: http://www.jotform.com/answers/586449. I'll quote your email:
I am abit confused as the two sets of code above display the same form.
When click on the "Save time button" it display a different form on a pop layer---
You may have inadvertently embedded multiple forms to your website, because I still see 3 forms on your site. I'll add a screenshot of the source code of your site here, for clarification:
Now, the three different forms that are embedded are these:
http://form.jotform.com/form/2900350078
http://form.jotformpro.com/form/50695754248971
http://form.jotformpro.com/form/42431700458954
Under the first two, you have removed the problematic script that was most likely reducing their height. However, the script is still present under the third form, and I have marked the script with red overlay on the image above. Please try removing that script as well, so we can see if the forms start behaving a little better.
We will await your response, thank you.