-
cetotAnswered on April 08, 2016 08:46 AM
I use iframe and paste to my website, but when i view the form using my hp, (mobile), it did not display full form, no SUBMIT BUTTON . half form only. How?
-
CharlieAnswered on April 08, 2016 09:47 AM
Could you please share us the website page where the form is embedded? You might need to adjust the height value of your iFrame embed code. Please also make sure that the form is mobile responsive. Here's a guide that you can refer to: https://www.jotform.com/help/322-How-To-Make-Mobile-Friendly-Forms-on-JotForm.
We'll wait for your response.
-
cetotAnswered on April 08, 2016 12:00 PM
i have done follow the guide given but still not full form display in mobile.
my website to the registration form : http://nourulle.com/register-as-dropship-agent.html
Thank you
-
CharlieAnswered on April 08, 2016 01:25 PM
The problem seems to be related to a script conflict that is responsible for making your form mobile responsive. I see your form is loading a jQuery, if you have other JS libraries then those things has a high probability that would conflict with the script code that we have.
Example:
Here's your iFrame embed code:
<iframe
id="JotFormIFrame"
onDISABLEDload="window.parent.scrollTo(0,0)"
allowtransparency="true"
src="https://form.jotform.co/60931795558873"
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>
It has two parts, one is wrapped in <iframe> (green highlight) and the other is a <script> code (yellow highlight). The script code is involved in making your <iframe> mobile responsive. However, the problem is that your website seems to also have its own scripts to make the whole website responsive. The conflict happens here. Which is why your form is not fully showing in mobile device, because it doesn't adjust correctly.
Could you try the following:
Solution 1:
In your iFrame code, find the height value and adjust it to 3000px. See if that works:
<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.co/60931795558873" frameborder="0" style="width: 100%; height: 3000px; border: none;" scrolling="no">
</iframe>
Solution 2:
Paste only the code wrapped in <iframe> tags AND removed the <script> code that was included in it. Why? We'll see if the jQuery and other scripts tries to make your iFrame mobile responsive. Make sure to also set the height value that will cover the whole form. What might happen is that your jQuery or other JS library will not make it mobile responsive, if that is the case, you'll need to set a fixed height.
Let us know if that works.