Form is cut-off after being embedded as an iframe in a website

HI I HAVE TWO ISSUES.

The first: I have 12 unsolved css problems here but don't know what they are:

}.form-textbox {}.form-line.jf-required {}#first_3 {}.form-payment-divider {}.form-payment-subtotal form-payment-label span {}.form-input.jf-required {}#cid_1 {}.form-payment-price span {}.form-payment-price {}.form-html {}.form-label.form-label-left {}@media only screenand (min-device-width : 414px)and (max-device-width : 736px){

The second, the iFrame form does not work properly in all sizes (see 800 with at screenshot) it gets cut of. It seems to work fine in the mobile version.

My iFrame code that I implement in Adobe Muse is:

 <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60761421462349" frameborder="0" style="width:100%; height:539px; 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; } 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); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = document.getElementById("JotFormIFrame"); var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } </script>

Is there a nice way to get the iFrame to scroll?

As for your first question, kindly delete the exact codes you have shown above (that's from line 62 to 65).

Then, add the exact CSS codes below:

}.form-textbox {}.form-line.jf-required {}#first_3 {}.form-payment-divider {}.form-payment-subtotal form-payment-label span {}.form-input.jf-required {}#cid_1 {}.form-payment-price span {}.form-payment-price {}.form-html {}.form-label.form-label-left {}

@media only screen and (min-device-width : 414px)and (max-device-width : 736px){

.form-all {

width : 320px !important;

}}

Once  you've done that, all the 12 erros should be removed then please save your form.

As for your second question, I would suggest you embed the iframe code to the website you're working on without its script part.

 <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60761421462349" frameborder="0" style="width:100%; height:539px; 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; } 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); } if(window.location.href && window.location.href.indexOf("?") > -1) { var ifr = document.getElementById("JotFormIFrame"); var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } </script>

Above, remove the part highlighted in blue and just embed the part highlighted in yellow.

Then, please let us know what happens after. There is a possibility that the scripts on your website and the scripts on your form are having conflicts.

We will wait for your response. Thank you.

hi, thanks, I've now changed but can't view it properly, is there any settings to make for the iFrame to automatically change for the height of the form, as this will be different at times, as my customer will place new products...

On the iframe code that you've embedded in your website, please change the height property of the style attribute of the iframe to 5553px.

 <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60761421462349" frameborder="0" style="width:100%; height:5553px !important; border:none;" scrolling="no"> </iframe>

Then, on any of the CSS file you used in your website, add the following CSS codes below.

@media only screen and (min-width : 270px) and (max-width : 667px) {

   #JotFormIFrame{

      min-height: 12426.90px !important;

   }

}

@media only screen and (min-width : 668px) and (max-width : 970px) {

   #JotFormIFrame{

      min-height: 7350px !important;

   }

}

Or you can, also, add it after the CSS codes above inside <style></style> after the <iframe> code of your form.

With regards to your other concern, I have moved it to a new thread which you can follow by clicking this link to avoid confusion with the answers being given.

Let us know if you have any questions with any of the instructions given above.

Thank you.

By the way, adding a border as such to the Total Payment text would require you to increase the "min-height" and the "height" that I have mentioned in the codes above. Please advise if you need further assistance. Thank you.

hmmm it does not seem to be right, but it's closer ... but what will happen when my customer adds ... say 10 more products to the form?

This is my iFrame-code:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60761421462349" frameborder="0" style="width:100%; height:5553px !important; border:none;" scrolling="no"> </iframe>

<style>@media only screen and (min-width : 270px) and (max-width : 667px) {

   #JotFormIFrame{

      min-height: 12626.90px !important;

   }

}

@media only screen and (min-width : 668px) and (max-width : 970px) {

   #JotFormIFrame{

      min-height: 7550px !important;

   }

}</style>

If you set a fixed height then the iframe height will not automatically adjust if you add more elements or products. You can actually enable the scrollbar function in the iframe. You just need to set the value of scrolling attribute to yes.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotformeu.com/60761421462349" frameborder="0" style="width:100%; height:5553px !important; border:none;" scrolling="yes"> </iframe>

Hope that works for you. If not, let us know. Thank you.

could I set the iFrame to just fit the ongoing hight, so that it adjust to the number of products at any time?

It is possible to adjust the height of the iframe embedded form to adjust automatically with the additional script (code within <script></script> which was removed from the embed code) attached to iframe embed code. It looks like this script is conflicting with other scripts on your web page and hence you were asked to remove it to see if works.

Hope this information helps! 

ok, that works fine now, thanks you, but

I've moved your other question to a separate thread and shall be addressed there shortly.

https://www.jotform.com/answers/830383

Thank you!