Why does my form become taller than necessary when submitted?

  • Profile Image
    Asked on April 28, 2013 at 03:53 PM

    Hi - I have a form at SuperLoveTees which gets much taller than necessary when the form is submitted. Is there a way to fix that?

    The issue makes my post-submission page look really ugly. Although I could fix this by sending the submitter to a separate confirmation page, I would rather not if I don't need to.


  • Profile Image
    Answered on April 28, 2013 at 04:55 PM


    The Thank you page template have that default height set, and unfortunatelly that is causing your TY page to appear to have some additional white space due to the default height.

    Have you tried editing the TY page html source code, and add the "height" attribute? (see image below)


    Please try this. Inform us if this still did not make any difference.


  • Profile Image
    Answered on April 28, 2013 at 05:10 PM

    Hi (and thanks),

    Yes, I already tried editing the height of the thank you page (in the style of the text's containing div); however, that didn't help.

    After reading your response, I changed the "thank you" response to be a separate webpage in order to take it entirely out of the equation.

    Even with a separate thank you page, the form still doubles in height as the form is being submitted (and before taking the user to the thank you page.

    If you try the form again, you will see that it still expands in height (and takes you to a thank you page)

    Your help would be GREATLY appreciated.



  • Profile Image
    Answered on April 28, 2013 at 06:15 PM

    Hi Bradford,

    When I test submitted again your form, it redirects to this page


    But I think this is not what you meant of the height expanding... it is rather when you click the submit button, there is a brief instance the form move and expand in height.

    Can you try removing the added div style code...(see red underlined text)

    Think this code is making the form move and reposition prior to submission.

    If still does not work, please try re-embedding the form using this iframe code

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//www.jotform.us/form/31154055450141" frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no"></iframe>

    The iframe code should prevent any script conflict issue.

    Please try this, and inform us if still not resolved.


  • Profile Image
    Answered on April 28, 2013 at 06:58 PM

    Hi - removing the <div> code didn't fix the expanding height issue.

    The iframe didn't expand (because of the iframe's fixed height), but the submit button was pushed down and out of view if the form input fields had errors (like must enter name, not a properly formatted email address, etc.).

    I decided to add a height tag to the div that has the form in it.  It works similarly to the iframe, but the submit botton is still viewable with errors (although it lays over the top of the div below it if there are 2 form input erros).

    I'm okay with my kludge fix for now, but would really appreciate a better solution.

    Thanks again,


  • Profile Image
    Answered on April 28, 2013 at 07:25 PM

    Hi Bradford,

    I think the previous iframe code I gave is lacking a bit. So, I used the defautl iframe code provided by JotForm this time... this one.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//www.jotform.us/form/31154055450141" frameborder="0" style="width:100%; height:181px; 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>

    Seems to work when I tested it on this test page.
    I also did not include anymore the div style. You can view the test page source code to see how I did it.
    You may want to try this solution also.
    Hope this help. Please inform us if you have further inquiry.
  • Profile Image
    Answered on April 28, 2013 at 08:36 PM

    Hi & Thanks again!  I really appreciate your dedication to helping me resolve this issue.

    Your fix works, as did your previous iframe fix becuase it defines the height of the form area.  The issue with your fixes is that when there are errors in the form input (see attached screen grab of your mock site), the form expands to display those errors, which then pushes the submit button out of the iframe (or div).

    My goal was to have an div that expanded as needed to accomodate the error messages (although alowing this expansion resulted in an aproximate 50% increase in height upon sumbit).  If you can give me a fix that doesn't define the height (and expands to accomodate the error message) that would be great.

    If not, I will just use the fixed height and adjust the position of the form to work good-enough.

    Once again, I really appreciate your help.




  • Profile Image
    Answered on April 28, 2013 at 11:50 PM


    Auto-adjust height isn't possible with iframe.

    How about making the error position absolute so it doesn't affect the fields position on error state? Or you can removed the error messages instead and leave the fields border color red which still indicates the fields are required.

    If you like you can use the following CSS codes.

    For absolute position so the fields wont move,


    .form-line-error .form-error-message{

    position: absolute;

    top: 35px;

    height: 15px;


    However, if you'd like to removed them, use the following code.

    .form-line-error .form-error-message {




    Guide: How to Inject Custom CSS Codes to your Form

    Thank you!