Our form is not shown on the website, while we are under limits

  • Profile Image
    tannorellamortgages
    Asked on May 31, 2016 at 03:15 PM

    Hello, none of my forms are displaying but they have previously worked and no changes made.

    I've checked quotas and all look fine and have ticked for jotform logo to display also.

     

    Here is an example page, but all forms aren't showing.

    http://tannorellamortgages.co.uk/survey/

     

     

  • Profile Image
    Ben
    Answered on May 31, 2016 at 04:24 PM

    I took a look at your account - you are not over limit. I checked the website and I can see that your website actually holds the code that hides the iframe of your form.

    This is the code:

    iframe {
        opacity: 0;
        visibility: hidden;
    }

    To go around it, you should add the following CSS right after the iframe embedding:

    #JotFormIFrame {
        opacity: 1;
        visibility: visible;
    }

    Do let us know how it goes.

  • Profile Image
    tannorellamortgages
    Answered on May 31, 2016 at 04:26 PM

    Hi, there is an embed on the homepage and other pages. I've tried the iframe as an alternative to get it working. Can you take a look at the one on the homepage .

     

    Thanks,

  • Profile Image
    Ben
    Answered on May 31, 2016 at 05:51 PM

    I took a look at the same page and I see that the issue is still present.

    What I meant by the code above is that there is CSS on your website that is intentionally hidding iframes. JS embed and iframe embed both use iframes to show the form, so the aforementioned code would hide form in both cases.

    To resolve this, just add the following behind this code:

    <iframe frameborder="0" scrolling="no" style="width: 100%; height: 1215px; border: medium none;" src="https://form.jotformeu.com/53225133954352" allowtransparency="true" onload="window.parent.scrollTo(0,0)" id="JotFormIFrame"> </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 &gt; window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") &gt; -1) ? true : false; if(isJotForm &amp;&amp; "contentWindow" in iframe &amp;&amp; "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 &amp;&amp; window.location.href.indexOf("?") &gt; -1) { var ifr = document.getElementById("JotFormIFrame"); var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr &amp;&amp; get.length &gt; 0) { var src = ifr.src; src = src.indexOf("?") &gt; -1 ? src + "&amp;" + get : src + "?" + get; ifr.src = src; } } </script>

    <style type="text/css">
    #JotFormIFrame {
        opacity: 1;
        visibility: visible;
    }
    </style>

    * Light blue is what you already have, no need to copy that. Dark blue is what will fix this issue for you, that is what you should copy and add to your website as you did the iframe code before.

    It can be placed before and after the iframe code just not within the same.

    The same code will help you on any other pages and it should be added in the same manner.

  • Profile Image
    tannorellamortgages
    Answered on May 31, 2016 at 05:54 PM

    Ok. I'll take a look, but these forms have previously worked fine and no changes have been made to the theme or CSS.