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

    How to remove top margin/padding on form?

    Asked by Dannilee on June 20, 2015 at 11:05 PM

    I still have a problem with blank space at the top of my form, I have added the css to remove it, as you can see from my form but it is still there.

    Thanks

    D

    top margin top padding custom css remove padding
  • Profile Image

    Answered by Syed on June 20, 2015 at 11:09 PM

    Hi there;

             To remove Top Margin of your form, please inject the following CSS Code Block. Read this guide on How you can Inject Custom CSS Codes. Review the following screenshot for confirmation.

    @media screen and (min-width: 1024px){.jotform-form {padding: 0px !important;}}

    Hope this helps. Please let us know, if you have further queries, we would be happy to help you.

     

    Thankyou,

  • Profile Image

    Answered by Dannilee on June 20, 2015 at 11:26 PM

    Hi

    I added the css but the form still has the blank space at the top, I have attached a screenshot

  • Profile Image

    Answered by Dannilee on June 21, 2015 at 10:32 AM

    Any ideas?

    Thanks

    D

  • Profile Image

    Answered by Syed on June 21, 2015 at 11:03 AM

    Hi there;

            I am not sure, where you're trying to insert this code. Can you share your form link, which is live on JotForm? Please let us know, so that we can continue to assist you.

     

    Thankyou,

  • Profile Image

    Answered by Dannilee on June 26, 2015 at 03:18 PM

    Hi

    I had to upload the page as the website is still in development and is therefore not online.

    The form can be seen at www.lm-lakeland-design.co.uk/JotForm/index.html

    And on jotform

    http://form.jotformeu.com/form/51707972830359

    Thanks

    Danni

  • Profile Image
    JotForm Support

    Answered by Mike on June 26, 2015 at 04:32 PM

    The following CSS has been injected to your form to remove the top padding on different devices.

    @media screen and (min-width: 1024px) {

    .jotform-form {

    padding-top: 0;

    }

    }

    @media screen and (max-width: 1024px) and (min-width: 768px) {

    .jotform-form {

    padding-top: 0;

    }

    }

    @media screen and (max-width: 768px) and (min-width: 480px) {

    .jotform-form {

    padding-top: 0;

    }

    }

    Please re-check the form now. Thank you.

  • Profile Image

    Answered by Dannilee on June 26, 2015 at 05:32 PM

    Hi

    It still has a lot of empty space at the top for me, see attached screen capture. I have used the Firebug developers tool to indicate the empty space I am seeing.

  • Profile Image
    JotForm Support

    Answered by Mike on June 26, 2015 at 06:41 PM

    The form seems to be fine on my side.

    http://form.jotformeu.com/form/51707972830359

    Here is a screenshot from Firefox.

    Please try to clear your browser cache and/or re-embed the form code on your web page.

  • Profile Image

    Answered by Dannilee on June 26, 2015 at 08:06 PM

    Hi

     

    It looks fine in jotform for me too, but my latest (above) screenshot is the form on my actual page and as you can see there is still a lot of empty space at the top.

    Embedding as iframe works but I need to use the source method because I want to remove the blank field in the drop down option and know you can only do so by editing it out of the source.

     

  • Profile Image
    JotForm Support

    Answered by Welvin on June 26, 2015 at 10:28 PM

    After adding the custom CSS codes and after editing the form, you need to re-embed the form using the source codes because the changes aren't automatically added to the old one in your website. I

    It is recommended doing the changes in the form builder instead of directly doing it in the form source codes. Source Codes method is more on advanced custom function addition and customization - those aren't available in the form builder. If the customization is possible in the form builder/designer, we suggest doing it there then just re-embed the form later.

    Lastly, I've checked your website and the spacing is not there anymore:

    Please do not hesitate to get back to us if you need further assistance.

    Thanks

  • Profile Image

    Answered by Dannilee on June 27, 2015 at 03:41 PM

    Thank you, all working now.

    I am having another spacing issue with the form below. Again the sites not live so I just did a uick upload.

    http://www.lm-lakeland-design.co.uk/JotForm/index.html

    http://form.jotformeu.com/form/50904497247361

    The issue is the submit buttton is overhanging the border, is it possible to set a height?

     

     

  • Profile Image
    JotForm Support

    Answered by Welvin on June 27, 2015 at 10:13 PM

    Although the last issue is the same, I've moved it to another thread so we can assist you there for this specific form. Here's the link: http://www.jotform.com/answers/598336.

    Thanks