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 Can the Space at the Top and Bottom of the Form Be Decreased?

    Asked by davidbfg on July 18, 2015 at 12:50 PM

    There is currently excessive space at the top of the form and we have been unable to find a setting to decrease it.

    Is there one?

    Thank you,

    David

    Page URL:
    http://www.valueprintservice.co.uk/your-free-quote/

    Screenshot
    top decrease space css code supernova
  • Profile Image
    JotForm Support

    Answered by jonathan on July 18, 2015 at 05:16 PM

    I have added this CSS code 

    .supernova {

      margin-top: -75px;

    }

     

    on your jotform  http://www.jotformeu.com/form/51912451493354

    and moves the form upward to reduced the space on top

     

    user guide: -How-to-Inject-Custom-CSS-Codes

    Hope this help. Let us know if issue remains.

    Thanks.

     

     

  • Profile Image

    Answered by davidbfg on July 18, 2015 at 05:45 PM

    Hi Jonathan,

     

    That looks much better.

    Will a similar code close the gap at the bottom?

     

    Thanks for your help, David

  • Profile Image

    Answered by Shadae on July 18, 2015 at 06:28 PM

    Hi davidbfg,

    On behalf of my colleague, you are most welcome. We are happy to hear that you have gotten your desired result.

    Yes a similar code would give you the same result on the bottom of your form. Please inject the code below:

    .supernova {

      margin-top: -50px;

    }

    Please inform us if you need further assistance.

  • Profile Image

    Answered by Shadae on July 18, 2015 at 07:18 PM

    I do apologize, I provided you with the wrong code, the code should be:

    .supernova {

    margin-bottom : -50px;

    }

  • Profile Image

    Answered by davidbfg on July 20, 2015 at 05:54 AM

    Hello Shadae,

    Thanks for the margin code for the bottom of my form - I input the CSS but it doesn't seem to be changing anything.

    It worked perfectly on the top, so it's probably something I'm doing wrong but I would appreciate a little more help (website url at the top of this thread).

    Thanks, David

  • Profile Image
    JotForm Support

    Answered by abajan on July 20, 2015 at 08:59 AM

    Hi David,

    If you look at Shadae's code carefully, you'll notice that it starts with a dot:

    .supernova {
    margin-bottom : -50px;
    }

    The code in your form is missing that dot:

    supernova {
    margin-bottom : -50px;
    }

    Once the dot is added, the desired change should take effect.

    Please inform us if it does.

    Cheers

  • Profile Image

    Answered by davidbfg on July 21, 2015 at 06:54 AM
    New response receivedHello,
    The addition of the dot doesn't seem to have changed it in Chrome.
    I tried a couple of other negative values and nothing changed. It looks right in the preview but not in my browser.
    Strange that the top code works and the bottom one doesn't - unless I've done something wrong again??
    Further advice would be much appreciated.
    Thank you,
    David
    ...
  • Profile Image
    JotForm Support

    Answered by abajan on July 21, 2015 at 10:16 AM

    My apologies, David. Please go into the form's Injected CSS and replace both of the previously added rules with the following:

    .supernova {
      margin-top: -30px;
    }

    .jotform-form {
      padding-top: 0;
      padding-bottom: 0;
    }

    When done, the margins should be like those in this clone.

    I suggested going the injected CSS route instead of changing it in the Form Designer because in Chrome I noticed that when I cloned the form and tried to access the CSS tab in there (pictured below)

    I wasn't able to see it because it was beyond the top of the Designer window. Perhaps there's something in the CSS which is causing this.

    If you need further help with this, please inform us.

    Thanks