How do I shrink the height of my form?

  • Profile Image
    Asked on October 04, 2017 at 06:24 PM

    The height of my form take too much space. how do I reduce it? 

  • Profile Image
    Answered on October 04, 2017 at 06:28 PM

    I think the better way to put the question is how can I eliminate the gray background

  • Profile Image
    Answered on October 04, 2017 at 10:15 PM

    If you want to change the color of the background, you may change it from the Custom section of Form Designer. Please see the screenshot below:

    If the form is embedded on any of your web pages, the height should be automatically adjusted to the frame where the form is embedded. If you have already embedded the form on any web page, please share the web page URL so that we can take a look and assist you further.

    Thank you! 

  • Profile Image
    Answered on October 05, 2017 at 07:06 AM

    Here is the page it is embedded in.

    It is at least twice the desired height. I would like it to be as compact as possible

  • Profile Image
    Answered on October 05, 2017 at 09:06 AM

    The height of the new form layout depends on its container or the iframe height.

    My suggestion would be to embed the form using its iframe embed code.

    Then modify the height of the frame and add a maximum height to limit the height of the form.


     <iframe id="JotFormIFrame-72671832283965" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="" frameborder="0" style="width: 1px; min-width: 100%;height:240px; max-height:240px;border:none;" scrolling="no"> </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-72671832283965"); if(window.location.href && window.location.href.indexOf("?") > -1) { 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; } } window.handleIFrameMessage = function(e) { var args =":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[2]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) return; switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "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); } </script>

    First, you change the height value and then add the max-height just like the above code.

    Hope this helps!