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 can I widen the iFrame on my web page?

    Asked by mcdaniel97 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!

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

    JotForm iframe code style size source
  • Profile Image

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

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

    Answered by Carina on March 05, 2014 at 11:46 AM

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

    Have a good day!