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 disappears on a Xara 7 website

    Asked by shuish on June 11, 2015 at 05: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

    Page URL:
    http://www.williams-selfdrive.co.uk/contact.htm

    disappears displayed source xara xara 7
  • Profile Image
    JotForm Support

    Answered by Boris on June 11, 2015 at 09: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.

  • Profile Image

    Answered by shuish 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?

  • Profile Image

    Answered by shuish on June 11, 2015 at 12:54 PM

    Encase need to know - i am using Xara 10

  • Profile Image
    JotForm Support

    Answered by jonathan on June 11, 2015 at 02: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.

     

     

     

  • Profile Image

    Answered by shuish on June 12, 2015 at 02: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?

  • Profile Image
    JotForm Support

    Answered by Boris on June 12, 2015 at 05: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" onload="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" onload="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" onload="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" onload="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.

  • Profile Image
    JotForm Support

    Answered by Boris on June 12, 2015 at 08: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.