-
paarAsked on May 30, 2016 at 6:25 PM
Regardless of my resizing it down to 350px wide now, the form still has the huge background, even though I did it too. HELP
Page URL: http://www.paar.org/contact-us/ -
Kevin Support Team LeadReplied on May 30, 2016 at 7:37 PM
This is because the iFrame code is set by default to have 100% as width, it means that it will use the space where it is embedded on, it is taking currently all the width of the HTML element where it is embedded:
I would suggest you to set the width of the iFrame to 350px as well, so you should embed your form using this iFrame code:
<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/53247428526156" frameborder="0" style="width: 350px;height: 719px;border: none;" scrolling="no"><br />
</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>
This should be the result:
Hope this helps.