The bottom part of the embedded form is not showing

kaptainsa

Asked on November 21, 2017 at 1:37 PM

Thank you for your response, unfortunately the bottom of the form is not showing.

There are fields that are not seen on a computer or mobile device. The parents email and submit button are cut off on the computer and even more is cut off on the mobile version.

Page URL: http://www.santamonicawaterpolo.com/splashball-water-polo-gear/

Jan

Replied on November 21, 2017 at 2:42 PM

I was able to replicate the issue on both desktop and mobile devices.

Please try to re-embed the form using the whole iFrame code. The purpose of the script tag below the iFrame code is to automatically resize the height of the form.

151129285311 22 64vcp Screenshot 10

You may also try using the normal embed script code.

151129316211 22 8at0r Screenshot 21

Hope that helps. Let us know if the issue persists. Thank you.

kaptainsa

Replied on November 21, 2017 at 10:12 PM

Thank you, here is the code I entered, but unfortunately it is still not scrolling to the bottom to let people enter their credit card info or email address.

<iframe

id="JotFormIFrame-32578690630864"

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

allowtransparency="true"

src="https://form.jotform.co/32578690630864"

frameborder="0"

style="width: 1px;

min-width: 100%;

height:6751px;

border:none;"

scrolling="yes">

</iframe>

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

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) {

var src = ifr.src;

src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get;

ifr.src = src;

}

window.handleIFrameMessage = function(e) {

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

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);

}

</script>

amy

Replied on November 22, 2017 at 2:07 AM

I am able to see the whole form. I tried it on more than one devices and I am unable to replicate the issue. Please check my result:

1511334329form cut off Screenshot 10

I would like to recommend you to refresh your browser's cache and try it again: How to refresh your browser's cache

If your problem persists, please let us know.

kaptainsa

Replied on November 22, 2017 at 11:35 AM

There is an important difference, on Jotform's website, it works properly and scrolls down all the way to the bottom:

https://www.jotform.com/build/32578690630864

but when you embed the jotform code into my website, then it wont scroll all the way to the bottom:

http://www.santamonicawaterpolo.com/splashball-water-polo-gear/

Jan

Replied on November 22, 2017 at 11:57 AM

I checked your webpage again and I can see that the script element is not present at the bottom of the iFrame code. Here's a screenshot:

151136977311 23 5b0cd Screenshot 10

Please try to re-embed the code using the code below:

Hope that helps. Thank you.