How do I shrink the height of my form?

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

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

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! 

Here is the page it is embedded in.

http://www.tomdayproperties.com/blog/what-does-it-cost-sell-home-florida/

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

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. http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

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

Example:

 <iframe id="JotFormIFrame-72671832283965" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/72671832283965" 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 = e.data.split(":"); 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": 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; } 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!