-
phonefixersAsked on February 27, 2017 at 4:35 AM
My form looks perfect when its on the mobile using the form link but when embedding the form into my website using iFrame it resizes the heights of all the fields.
-
Mike_G JotForm SupportReplied on February 27, 2017 at 7:16 AM
After checking your form (direct link) on a mobile phone (Android), I see that the issue in your screenshot is also present (not just when your form is embedded).
To fix the issue, please remove the following CSS codes below in the CSS tab of the first Image Picker widget in your form.
@media only screen and (max-width: 480px) {
.divimg img{
height: 65% !important;
}
}
I hope this helps. Please feel free to contact us again anytime if you have other questions or concerns.
Thank you.
-
phonefixersReplied on March 2, 2017 at 3:12 PM
this did not help.
-
David JotForm SupportReplied on March 2, 2017 at 5:56 PM
Instead of using the oEmbed plugin to embed the form, use the actual iFrame code:
https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code
If that does not allow images to be sized properly on mobile when the form is embedded, we will be happy to have another look to see what is causing the height to be incorrect on mobile.
-
phonefixersReplied on March 9, 2017 at 3:11 PM
i am using the iframe.
-
David JotForm SupportReplied on March 9, 2017 at 4:17 PM
I checked your page and it looks like the plugin is still being used to embed the form:
Remove the form and add in your iFrame code in with your pages code:
https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code
-
phonefixersReplied on March 9, 2017 at 4:52 PM
<iframe id="JotFormIFrame-70675637757471" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/70675637757471?nojump" frameborder="0" style="width:100%; height:7482px; border:none;" scrolling="no"> </iframe> <script type="text/javascript"> window.handleIFrameMessage = function(e) { var args = e.data.split(":"); var iframe = false; if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } 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; } 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 = false; if (args.length > 2) { ifr = document.getElementById("JotFormIFrame-" + args[2]); } else { 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>
-
David JotForm SupportReplied on March 9, 2017 at 6:06 PM
That is your forms iFrame code, however, that does not appear to be what is added to the site. If the website builder you are using does not accept scripts, try embedding the form without the script portion:
<iframe id="JotFormIFrame-70675637757471" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/70675637757471?nojump" frameborder="0" style="width:100%; height:7482px; border:none;" scrolling="no"> </iframe>