Embedded Form: Form pop up for a few moment then disappear

  • Profile Image
    Steve B 
    Asked on December 10, 2020 at 02:13 PM

    Hello, My form pops up for a few moments and then disappears. Not sure what the issue is.

    1607627572_5fd27334cc8b8_Screen Shot 202


  • Profile Image
    Ariel_P
    Answered on December 10, 2020 at 06:35 PM

    Hello there,

    Thank you for reaching out to us.

    Looks like you've embedded the form twice on that page. You can simply remove the second embed to fix this.

    If you need to have two instances of the form on the page, make sure to change the ID of the second iframe, and update its JavaScript to match the ID change.

         <iframe
            id="JotFormIFrame-92246566515967"
            title="Cabinet Direct: New Lead (Start Here) NEW"
            onload="window.parent.scrollTo(0,0)"
            allowtransparency="true"
            allowfullscreen="true"
            allow="geolocation; microphone; camera"
            src="https://form.jotform.com/92246566515967"
            frameborder="0"
            style="
            min-width: 100%;
            height:2500px;
            border:none;"
            scrolling="no"
        >
        </iframe>
        <script type="text/javascript">
            var ifr = document.getElementById("JotFormIFrame-92246566515967");
            if(window.location.href && window.location.href.indexOf("?") > -1) {
            var get = window.location.href.substr(window.location.href.indexOf("?") + 1);
            if(ifr && get.length > 0) {

    Give it a try and let us know how it goes.

  • Profile Image
    Steve B 
    Answered on December 11, 2020 at 08:34 AM

    I did not mean to have two instances, I just copied the code directly from jotform. How do I remove the second instance?


  • Profile Image
    Sonnyfer
    Answered on December 11, 2020 at 08:48 AM

    Hello Steve - To be safe, please remove them both and re-embed your form again.

    Related Guide: Embedding-a-form-to-a-web-page | Getting-the-form-iframe-code

    Let us know how it goes.

  • Profile Image
    consumers
    Answered on December 11, 2020 at 08:53 AM

    This is what I see, is this correct?


    <iframe

    id="JotFormIFrame-92246566515967"

    title="Cabinet Direct: New Lead (Start Here) NEW"

    onload="window.parent.scrollTo(0,0)"

    allowtransparency="true"

    allowfullscreen="true"

    allow="geolocation; microphone; camera"

    src="https://form.jotform.com/92246566515967"

    frameborder="0"

    style="

    min-width: 100%;

    height:539px;

    border:none;"

    scrolling="no"

    >

    </iframe>

    <script type="text/javascript">

    var ifr = document.getElementById("JotFormIFrame-92246566515967");

    if (ifr) {

    var src = ifr.src;

    var iframeParams = [];

    if (window.location.href && window.location.href.indexOf("?") > -1) {

    iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));

    }

    if (src && src.indexOf("?") > -1) {

    iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&"));

    src = src.substr(0, src.indexOf("?"))

    }

    iframeParams.push("isIframeEmbed=1");

    ifr.src = src + "?" + iframeParams.join('&');

    }

    window.handleIFrameMessage = function(e) {

    if (typeof e.data === 'object') { return; }

    var args = e.data.split(":");

    if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { 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;

    case "loadScript":

    var src = args[1];

    if (args.length > 3) {

    src = args[1] + ':' + args[2];

    }

    var script = document.createElement('script');

    script.src = src;

    script.type = 'text/javascript';

    document.body.appendChild(script);

    break;

    case "exitFullscreen":

    if (window.document.exitFullscreen) window.document.exitFullscreen();

    else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen();

    else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen();

    else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen();

    else if (window.document.msExitFullscreen) window.document.msExitFullscreen();

    break;

    }

    var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

    if(isJotForm && "contentWindow" in iframe && "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);

    }

    </script>

  • Profile Image
    Jessica_H
    Answered on December 11, 2020 at 09:05 AM

    Hi consumers, thank you for reaching us.

    It looks correct. If you are unsure, you may click on </> Copy Code.

    1607695420_5fd37c3c620ef_

    Please give the suggestion (re-embedding) my colleague has suggested a try, and let us know if it doesn't work for you.


  • Profile Image
    consumers
    Answered on December 11, 2020 at 09:06 AM

    It doesn't work. This is Steve B. and Consumers. For some reason, I was locked out of my account yesterday.

  • Profile Image
    Jessica_H
    Answered on December 11, 2020 at 09:53 AM

    Hi consumers, thank you for reaching back to us.

    I have checked your website and it was embedded properly. However, the form will only be displayed on a smaller screen size and disappear at full screen.

    1607698052_5fd386849ab16_

    It starts to disappear from 670px width. Instead, it looks like there are other elements on your page that overlay the forms. We suggested to paste the iFrame on top of the element in your page to prevent it from being overlay.

  • Profile Image
    consumers
    Answered on December 11, 2020 at 09:59 AM

    How do I fix this? I copied the code from the publish page with the iframe code, but it doesn't work.

    What do you mean, "paste the IFrame on the top of the element in your page to prevent it from being overlay?"

    The mobile and desktop views are separate entities. We built this out using xara.

  • Profile Image
    ashwin_d
    Answered on December 11, 2020 at 11:10 AM

    I did test your embedded form, and I am able to replicate the issue you are having. It appears that for some reason, the height of the iframe is getting reset to 0 and that is why the form is not being displayed.

    I would suggest you to please remove the complete iframe embed code that you have added in webpage and use the following iframe embed code:

    <iframe id="JotFormIFra-92246566515967" title="Cabinet Direct: New Lead (Start Here) NEW" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/92246566515967" frameborder="0" style=" min-width: 100%; height:1250px; border:none;" scrolling="no" > </iframe>

    Hope this helps.

    Do try it out and get back to us if you have any questions.

  • Profile Image
    consumers
    Answered on December 11, 2020 at 01:00 PM

    That works, thank you. Is it possible for you to show me how to get the Last and First name on one line?

  • Profile Image
    Jessica_H
    Answered on December 11, 2020 at 02:11 PM

    Hi consumers,

    Please kindly add the following code into your Custom CSS:

    [data-type="control_fullname"] .form-sub-label-container {
      width: 47%;
    }

    Let us know if it doesn't work for you.