Adjust Spacing at the Top of the Form

  • Profile Image
    Asked on February 06, 2015 at 10:19 AM

    The form is finished to my liking. When I open it in another tab it does not display the form starting at the top of the form; rather it displays beginning a bit further down, at the "home phone field". Therefore, the user would need to scroll up to begin at the top. Is it doing this because of my design? If so, how would I fix?



  • Profile Image
    Answered on February 06, 2015 at 12:41 PM


    You can add this custom CSS code in your Form Designer under CSS tab:

    .jotform-form {

        padding-top: 30px !important;


    You can adjust the spacing at the top or the padding to move it up.

    Here's a sample form that I cloned for testing purposes:

    Here's where you need to add the code, open the "Designer" found in your toolbar.

    Do let us know if you need more assistance on this.

    Thank you.

  • Profile Image
    Answered on February 06, 2015 at 02:20 PM

    Thank you so much for the support. It didn't work though. <sad face> I tried the code on my form and it had zero effect. I didn't change anything else, just added this code...correct?

    Also, I followed your cloned form and it doesn't appear to be any different, it shows up at the phone number, not at the top of the screen.

    *Test Continues*

    This seems to be an Internet Exlporer problem. With or without the code, the form shows at the top of the screen in Firefox and in Chrome. Likewise the PRINT button works in both those browsers but not in Internet Explorer. I'm using IE 11.

    Perhaps there is no fix for the PRINT button and the form to show at the TOP of the page in IE?

    Thanks for any input,


  • Profile Image
    Answered on February 06, 2015 at 04:19 PM

    Looking at your responses Donna, I believe that the issue is actually shown only on your website page?

    If so, can you please give us the link to the page where the jotform is located for us to inspect?

    That would help us to see the issue and help you resolve this.

    I did try opening the jotform in the IE8 and at first it did not show the image, so I presume that this might be the issue, unfortunately I am not able to recreate it any more.

    Can you please click in the area where the photo should be with your right mouse button and see if there is an option "Show Picture" shown to you?

    If it is, please click on it and let us know if that resolves your issue.

  • Profile Image
    Answered on February 06, 2015 at 05:50 PM


    Ben, The image always shows for me. And no matter where I pull it up in IE the form presents itself at the "home phone" number field. The print button never works in IE.

    I now have the CSS code included and it's posted at the above link. The only thing it seems to do is add extra white space at the top, above the banner image.

    All seems fine when I'm in Firefox and Chrome with or without the CSS code.


  • Profile Image
    Answered on February 06, 2015 at 06:23 PM

    I've checked your website and this is how I see it using IE 11

    However, I noticed that you're using the full source code of your form, is there a particular reason for why are you using this method instead of the regular or iframe code?

    We recommend those methods because when you use the source code of your form you need to manually copy/paste the code every time a change is made in your form.

    Could you please try using any of the methods (I suggest using the iframe code since I see that you're using JQuery and sometimes it can cause conflicts with our scripts) and let us know if this makes any difference?

    We'll wait for your response.
    Thank you.

  • Profile Image
    Answered on February 06, 2015 at 06:55 PM

    Thanks. I do not really know the difference between the methods. Eventually Divine Swine will just use a link to the form which will send the user to the Jotform directly.


    I have updated the form using the iframe method. It can be seen here:

    The form still presents itself at the Home Number field, not at the top of the form as you show in your photo. I have to scroll up to get to the top and see the fields at the top, which I can do and can see, but I do need to scroll up. I keep thinking it's the Home Field that is the problem, or some other buffer at the top.

    *I've now done another experiment*

    No matter how I resize the window, the "Event Date" is at the bottom of the window. I used a widget for this field. Would this field be the problem??? If I Restore down the window, or resize it in any way other than full screen, the "event date" field remains at the bottom of the window on a refresh.

    Again, this happen just in IE.

  • Profile Image
    Answered on February 06, 2015 at 06:57 PM

    So I'm thinking it's NOT the Home Phone field, but the Event Date that is the issue. Perhaps?

    Print button still not working in IE.

  • Profile Image
    Answered on February 06, 2015 at 07:05 PM

    OKAY, here is what I did to make it work.

    I took out the field Event Date, I removed the CSS coding as it was adding white space at the top. I republished using the iframe method and now it works. The form is presented at the top of the form, no need to scroll up, AND the print button is working in IE.

    That Date Widget must be incompatible with IE.

    It was just by luck that I looked down and noticed it was always at the bottom on the window no matter the size of the window. I guess I'll go back to the more traditional date picker.

    Thanks for helping troubleshoot.


  • Profile Image
    Answered on February 07, 2015 at 12:20 AM

    Hi Donna,

    I'm glad that you've managed to solve the problem in your end. Although, I'm not sure why the widget is causing a problem in your end, you might need to re-add the widget perhaps? Just to see if that fixes the problem.

    Anyway, if it's already working I guess everything is good. 

    Thank you.