Form disappears on a Xara 7 website

  • shuish
    Asked 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

  • Boris
    Replied 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:

    Form disappears on a Xara 7 website Image 1 Screenshot 20

    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.

  • shuish
    Replied 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?

  • shuish
    Replied on June 11, 2015 at 12:54 PM

    Encase need to know - i am using Xara 10

  • jonathan
    Replied 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

    Form disappears on a Xara 7 website Image 1 Screenshot 40

     

    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

    Form disappears on a Xara 7 website Image 2 Screenshot 51

    Form disappears on a Xara 7 website Image 3 Screenshot 62

     

     

    Please let us know if this makes any difference.

    Thanks.

     

     

     

  • shuish
    Replied 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?

  • Boris
    Replied 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.

    Form disappears on a Xara 7 website Image 1 Screenshot 20

    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.

  • Boris
    Replied 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:

    Form disappears on a Xara 7 website Image 1 Screenshot 20

    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.