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

    Extra spacing on bottom of forms

    Asked by optizign13 on January 28, 2014 at 06:39 PM

    Hello. Whenever I create forms, I notice there's always extra spacing on the bottom. How do I get rid of it? Or is there an option where i can define the form's height? 

    Page URL:
    http://optimized360.net/roshedental.com/promotions/

    create forms height create hello
  • Profile Image
    JotForm Support

    Answered by ashwin_d on January 28, 2014 at 09:46 PM

    Hello optizign13,

    Actually this is because of the height property defined in your form's iFrame embed code. Reducing the iFrame height will remove the extra spacing from your form. Please check the screenshot below: 

    You can use the following iFrame code to embed your form in your web page:

    <iframe id="JotFormIFrame" style="width: 100%; border: none; height: 302px;" src="//form.jotformpro.com/form/40276339488970" height="200" width="320" frameborder="0" scrolling="no"></iframe>

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by optizign13 on January 29, 2014 at 12:25 PM

    Hello. I want my height to change, not width. In any case, I changed it to this and nothing was resized.

    <iframe id="JotFormIFrame" style="width: 100%; border: none; height: 202px;" src="//form.jotformpro.com/form/40276339488970" height="100" width="100" frameborder="0" scrolling="no"></iframe>

  • Profile Image

    Answered by optizign13 on January 29, 2014 at 12:27 PM

    On my website, I defined the height with the code shown above. However, when inspecting element, the height keeps on defining on its own. Not sure if this is a browser issue or not. 

  • Profile Image
    JotForm Support

    Answered by TitusN on January 29, 2014 at 01:58 PM

    Hello,

    Thank you for your response.

    I checked your site, and the Iframe style is broken because of invalid CSS syntax:

    Please make the changes exactly as shown below (click to enlarge image):

    Alternatively, just use the following highlighted text to re-embed your form:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/40276339488970" frameborder="0" style="width:100%; height:280px; 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>

    Hope this helps.

  • Profile Image

    Answered by optizign13 on January 29, 2014 at 04:09 PM

    Hi. Thank you. But no luck :( I think something is wrong with the compatibility of this website and the form that is conflicting. 

  • Profile Image
    JotForm Support

    Answered by TitusN on January 29, 2014 at 04:51 PM

     The Iframe spacing beneath seems to have reduced with the new Iframe code you embedded:

    What do you see from your end? Is it the same after you clear your browser cache?

    Please let us know.

  • Profile Image

    Answered by optizign13 on January 30, 2014 at 12:47 PM

    Hi there. It works now. Thanks! So what are the key codes/elements do I need to edit/add to my other forms?

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 30, 2014 at 01:28 PM

    @optizign13 

    You can actually embed the form without the supporting script that would auto-adjust iframe. The supporting script works best when you have page break element on your form. In this case, you can use just the iframe embed code.

    Example:

    <iframe id="JotFormIFrame" style="width: 100%; border: none; height: 280px;" src="//form.jotformpro.com/form/40276339488970" height="280" width="100" frameborder="0" scrolling="no"></iframe>

    You should change both height value. The first one has px since that's a CSS code while the height attribute (for html 4) does not need px, you can enter a number without it as seen on the example above.

    Let us know if I've missed something here.

    Regards!