Adjust Spacing at the Top of the Form

  • DivineSwine
    Asked on February 6, 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?

    http://form.jotform.us/form/50357329713153

     

     

  • Charlie
    Replied on February 6, 2015 at 12:41 PM

    Hi,

    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: http://form.jotformpro.com/form/50365275876970?

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

    Adjust Spacing at the Top of the Form Image 1 Screenshot 20

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

    Thank you.

  • DivineSwine
    Replied on February 6, 2015 at 2: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,

    Donna

  • Ben
    Replied on February 6, 2015 at 4: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.

  • DivineSwine
    Replied on February 6, 2015 at 5:50 PM

    http://www.dseys.com/Pages/Quote.aspx

     

    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.

    Donna

  • raul
    Replied on February 6, 2015 at 6:23 PM

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

    Adjust Spacing at the Top of the Form Image 1 Screenshot 20

    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.

  • DivineSwine
    Replied on February 6, 2015 at 6: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.

    http://form.jotform.us/form/50357329713153

     

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

    http://www.dseys.com/Pages/Quote.aspx

    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.

    Adjust Spacing at the Top of the Form Image 1 Screenshot 20

  • DivineSwine
    Replied on February 6, 2015 at 6: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.

  • DivineSwine
    Replied on February 6, 2015 at 7: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.

    Donna

  • Charlie
    Replied on February 7, 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.