How to embed the iFrame code and set its height?

  • Profile Image
    Dylan
    Asked on May 28, 2015 at 09:06 AM
    Good morning,I'm trying this form on a page of my site Weebly,but not working . I need 100% width and height 98 %

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/51472774123353" frameborder="0" style="width:100%; height:98%; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Thank you so much
  • Profile Image
    Mike_G
    Answered on May 28, 2015 at 09:15 AM

    Could you try to re-embed the <iframe> code only and leave the <script> code on your website as it may create a conflict with the custom width and height that you prefer to have on your form.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/51472774123353" frameborder="0" style="width:100%; height:98%; border:none;" scrolling="no"></iframe>

     

    Then, try to add "!important" to the values you set for the "width" and "height" of the "style" attribute of the "iframe".

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/51472774123353" frameborder="0" style="width:100% !important; height:98% !important; border:none;" scrolling="no"></iframe>

    I hope this helps. Let us know how this works for you. We will wait for your response on this thread. Thank you.

     

  • Profile Image
    Dylan 
    Answered on May 28, 2015 at 11:08 AM
    tried , but it does not work , the iframe and the external page is cut and you see only the top
  • Profile Image
    Dylan 
    Answered on May 28, 2015 at 11:10 AM

    I need an iframe: height = "98%" width = "100%   but perhaps in Weebly it is not possible

    Thank you very much

  • Profile Image
    Charlie
    Answered on May 28, 2015 at 12:36 PM

    Have you tried setting the height value in "px". I believe the "%" won't work there. The width accepts the "%" but not the height I believe. You can check this guide to learn more about our iFrame embed code: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Try setting the height value in "px" and let us know if that works.

    Thank you.

  • Profile Image
    Dylan 
    Answered on May 28, 2015 at 06:32 PM

    I need an iframe: height = "98%" width = "100%  Not height value in "px"

    This is an example that I want to do

    http://mibbit.simosnap.com/IlSole

  • Profile Image
    raul
    Answered on May 28, 2015 at 06:55 PM

    I'm not quite sure if that would be possible to accomplish with a form since the form's height is not proportional. It's fixed as mentioned by Charlie and can be dynamically increased/decreased using the script portion you see in the provided code.

    You can try using the lightbox embed method that would provide a similar appearance to your form as the page you provided.

    Let us know if this could work for you.