What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to embed the iFrame code and set its height?

    Asked by Dylan 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
    embed iFrame height width iFrame Custom CSS
  • Profile Image
    JotForm Support

    Answered by Mike_G 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

    Answered by Dylan  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

    Answered by Dylan  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
    JotForm Support

    Answered by Charlie 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

    Answered by Dylan  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

    Answered by raul 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.