How can I remove the default space above a form?

  • Profile Image
    brianhousman
    Asked on October 04, 2010 at 03:34 PM

    When embedding a form with the simple embed code, is there a way to delete the default space above the form elements? I'm embedding a form on my WordPress site and don't want to have to use the full HTML/CSS if I don't have to...

  • Profile Image
    aytekin
    Answered on October 05, 2010 at 03:43 AM

    Can you try the iframe code instead?

    Here is how you can get it. Open your form on the Form Builder:
    1. Open "Setup & Share" tab on toolbar,
    2. Click on "Share Form"
    3. Click on "Advanced Options"
    4. Click on "iFrame Code".

  • Profile Image
    brianhousman
    Answered on October 05, 2010 at 08:21 AM

    So I tried the iFrame Code and I see I can alter the "height". However, altering the height paramter seems to chop off the bottom of the form, rather than the top.

    Here is a screenshot of my form depicting the area I would like to decrease in red: http://imgur.com/0Nqp1.png

  • Profile Image
    aytekin
    Answered on October 05, 2010 at 08:54 AM

    You can decrease the question spacing to solve that spacing problem. Click on "Preferences" button on the top toolbar and you will see a screen like below. Make the "Question Spacing" smaller.

  • Profile Image
    brianhousman
    Answered on October 05, 2010 at 09:08 AM

    This doesn't seem to solve the spacing issue above the first form element, it only effects the spacing between the other elements...

  • Profile Image
    aytekin
    Answered on October 05, 2010 at 10:04 AM

    I think the only solution is to get complete form source code, open it on the html editor you are using and remove the spacing.

    1. Open "Setup & Share" tab on toolbar,
    2. Click on "Share Form",
    3. Click on "Advanced Options",
    4. Click on "Download Zip". Download and unzip the file and use that in your site.

  • Profile Image
    brianhousman
    Answered on October 06, 2010 at 01:37 PM

    Is it possible for you to implement a feature to remove the default header spacing?

     

  • Profile Image
    aytekin
    Answered on October 06, 2010 at 03:32 PM

    We have just added a new feature to JotForm to edit CSS right on the form builder. It is called "Inject Custom CSS". You can basically add CSS code from Preferences button on the form builder. You can probably use that change the height of that space. Here is an example screenshot for the Inject Custom CSS feature:

  • Profile Image
    brianhousman
    Answered on October 07, 2010 at 09:31 AM

    I injected the following CSS which seemed to eliminate the default space above the first form element:

     

     

    .form-all {

    padding-top: 0px;

    }

    .form-html {

    padding-top: 0px;

    }

    .form-line {

    padding-top: 0px;

    }

     

     

    Thanks!

     

  • Profile Image
    aytekin
    Answered on October 07, 2010 at 11:49 AM

    That's great. Thanks for the update!

  • Profile Image
    chrisjaeger
    Answered on November 25, 2015 at 06:23 PM

    This top margin/padding thing worked great. Thanks for posting.

     

    .form-all {

    padding-top: 0px;

    }

    .form-html {

    padding-top: 0px;

    }

    .form-line {

    padding-top: 0px;

    }

     

     

  • Profile Image
    EltonCris
    Answered on November 25, 2015 at 11:28 PM

    @chrisjaeger

    It's good to know that you found this thread useful. Cheers! :)

    I just want to update everyone that you can now easily change the field spacing in the form designer as well as inject custom CSS codes with ease.