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

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

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"
        onDISABLEDload="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.

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

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.

This is what I see, is this correct?

<iframe

id="JotFormIFrame-92246566515967"

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

onDISABLEDload="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>

Hi consumers, thank you for reaching us.

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

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

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

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.

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.

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.

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" onDISABLEDload="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.

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

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.