How can I widen the iFrame on my web page?

  • Profile Image
    mcdaniel97
    Asked on March 05, 2014 at 10:35 AM

    When I insert the iFrame code to my zenfolio-hosted web page, it appears very narrow and cuts off some portions of the text boxes as a result.

    Where in this code would I insert a line telling it to play nice with my website. It looks fine on JotForm's site, but again, extremely narrow when I paste the code into my webpage and view it.

     

    Here's a link to my web page to show you what I mean:

    http://www.mcdanielphotography.net/wedding-day-questionnaire

    Here's the link to my form on JotForm:

    http://www.jotform.com//?formID=40624501280140

    And here is the source code provided for the iFrame:

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

     

    I will add that I attempted to somply embed the source code of the whole form, but it would never save on my site. This may be because the size exceeds my host's 100KB limit.

     

    Thanks!

  • Profile Image
    Carina
    Answered on March 05, 2014 at 11:39 AM

    Please try to insert this code instead:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="http://form.jotform.us/form/40624501280140" frameborder="0" style="width:800px; height:6148px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    I changed the width value from 100% to 800px, and from my tests, it solved the issue.

    Let us know please if you need further  assistance.

  • Profile Image
    mcdaniel97
    Answered on March 05, 2014 at 11:44 AM

    Thanks Carina! That's perfect!

    I adjusted the height a little further and it appears beautifully. Thanks so much.

     

    -Tim

  • Profile Image
    Carina
    Answered on March 05, 2014 at 11:46 AM

    You are most welcome. Feel free to contact us whenever you need.

    Have a good day!