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

    Webpage not resizing to reflect form size

    Asked by medtechglobal on September 30, 2015 at 10:40 PM

    Hi,

    Not sure if this is a Jotform or a Wordpress issue, but when I embed the form into the webpage the page doesn't expand to reflect the size of the form?

     

    Does anyone else have this issue? Any thoughts?

     

    Thanks

    Page URL:
    http://www.medtechglobal.com/testing/

    Screenshot
    size resizing JotForm expand
  • Profile Image
    JotForm Support

    Answered by Boris on October 01, 2015 at 05:32 AM

    The problem is that the form's height is set to 514px in the embed code:

    <iframe id="JotFormIFrame" style="width: 100%; height: 514px; border: none;" src="https://secure.jotform.co/form/52728087119865?post=14941&amp;action=edit" height="240" width="320" frameborder="0" scrolling="no"></iframe>

    Please try changing the height to be 1870px, which is how tall the form really is at the moment:

    <iframe id="JotFormIFrame" style="width: 100%; height: 1870px; border: none;" src="https://secure.jotform.co/form/52728087119865?post=14941&amp;action=edit" height="240" width="320" frameborder="0" scrolling="no"></iframe>

    Additionally, I can see that the script that is added just under the iframe is also broken, most likely by some plugin in Wordpress that modified the text/code which you have pasted. The script under the form at the moment looks like this:

    <script type="text/javascript">// <![CDATA[
    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("contentWindow" in iframe &#038;&#038; "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 &#038;&#038; window.location.href.indexOf("?") > -1) { var ifr = document.getElementById("JotFormIFrame"); var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr &#038;&#038; get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&#038;" + get : src + "?" + get; ifr.src = src; } }
    // ]]&gt;</script>

    This shows that the Wordpress site has replaced & characters with their encoded counterpart - &#038; which is effectively breaking that part of the script. Your script under the form should instead look like this:

    <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("contentWindow" in iframe &#038;&#038; "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>

    I hope this helps. Please let us know if changing the height of the iFrame from 514 pixels to 1870 pixels resolved the issue of the form being cut off, or if the issue persists. Thank you.

  • Profile Image

    Answered by medtechglobal on October 11, 2015 at 04:54 PM

    Thanks for the followup, that solved all my issues. Website was striping my code and this is looking much better. Thanks again

  • Profile Image
    JotForm Support

    Answered by Chriistian on October 12, 2015 at 03:48 AM

    On behalf of my colleague, Boris, you are welcome. If you have any other question or concern, please feel free to contact us again and we will be happy to assist you.