My form was cut halfway even though I have embedded it into the website

  • Profile Image
    sauhun
    Asked on November 26, 2015 at 08:29 PM

    My form was cut halfway even though I have embedded it into the website. Please have a look at the attachment to understand further.

  • Profile Image
    Kevin_G
    Answered on November 26, 2015 at 09:30 PM

    Hi,

    I would suggest you to use the IFrame Embedded method :

    http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Copy the code and paste it in some Text Editor, replace the Scrolling option from No to Yes : 

    Let us know if it works, if not , we will be glad to assist you.

    Regards.

  • Profile Image
    sauhun
    Answered on November 26, 2015 at 10:56 PM

    Hi! Yes, it works. However, is there any way to display the form in one page instead of having to scroll? If you check on http://www.psdc.org.my/programs/school-leavers/diploma-in-engineering/diploma-in-electronic-engineering-jptbpp-k-a6593/ we are able to display the form in one page previously. Thanks.

  • Profile Image
    EltonCris
    Answered on November 26, 2015 at 11:10 PM

    Your form does not have any conditions so it is safe to use the iframe embed code with a fix height excluding the script. Please re-embed your form using the following iframe code only, this should not have any cut off problem.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/53297319848470" frameborder="0" style="width: 100%; height: 2000px;min-height:2000px; border: none;" scrolling="no"></iframe>

  • Profile Image
    EltonCris
    Answered on November 26, 2015 at 11:18 PM

    Actually, the cut off issue can be resolved by re-embedding the form using the iframe embed code with the script. The script that is included on the iframe embed code contains a function that will automatically calculate the iframe content height so it is not necessary to set the scrolling to yes and create a fixed height. So I suggest to retake your iframe embed code in the form builder and embed it again on your page OR you can use the following.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.me/53297319848470" 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> 

    Cheers!