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 completely remove the spacing at the top of the form?

    Asked by PoughkeepsieFarmProject on March 26, 2015 at 04:51 PM

    Hi there,

    I am trying to completely remove the form background so that the embedded form moves closer to the top of the page (the background seems to act as padding)

    here's a screenshot of the page:

    I'd like the form to move to the top, just below the banner, with as little space as possible between them.

    I've tried this in the css injection:

    body, html {

    background: none !important;

    }

    And I have also tried to set the background color as transparent. Am I doing it wrong, or is there a different way to do this?

     

    Cheers,
    Jes

    form background remove space extra space top padding
  • Profile Image

    Answered by Ben on March 26, 2015 at 06:19 PM

    I tried to go to your page Jes poughkeepsie-farmproject.squarespace.com/csa-sign-up/ but it seems to be under a lock - not accessible to public.

    Being like that I can only presume what might help, but not actually check.

    As such I would like to give you following two codes to check if they work:

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

    or if that is too much then,

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

    You should inject the code to your jotform by following these steps: Inject Custom CSS Codes

    If you have the same space shown on your jotform when viewed directly, then please do give us the link to it so that we can see the right code that would work for you.

  • Profile Image

    Answered by PoughkeepsieFarmProject on March 26, 2015 at 08:08 PM

    Thanks for the help - I do have a follow-up though...

    I've removed the password lock to the page, so it should be viewable for now.

    I see that the top margin is removed, thanks, but is it possible to remove all the margins? I can see that the "shadow" behind the form is removed from the top, and it looks weird to have it on the sides and bottom.

    So what would be the code for removing all margins?

     

    Thank you!

    -Jes

  • Profile Image
    JotForm Support

    Answered by jonathan on March 26, 2015 at 09:56 PM

    I have fixed this on your jotform http://www.jotform.us/form/50711911365147 by adding this CSS codes to the existing ones

    .supernova .form-all, .form-all {

      box-shadow: none !important;

    }

    I see the form in your website now like this

     

    Please let us know if this is not the desired changes you need.

    Thanks.

     

     

     

  • Profile Image

    Answered by PoughkeepsieFarmProject on March 27, 2015 at 12:02 AM

    Looks good, thanks!

  • Profile Image
    JotForm Support

    Answered by ashwin_d on March 27, 2015 at 04:01 AM

    Hello Jes,

    On behalf of my colleagues, you are welcome.

    Do get back to us if you have any questions.

    Thank you!