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

    CSS issue: Padding is being added to the top and bottom of my jotform

    Asked by stringtheorist on October 17, 2014 at 11:29 AM
    I am still curious as to where all the white space is coming from above and below the form as it appears on my webpage. Could you take a look please?
    http://www.huntingdonguitarteacher.co.uk/contact.html
  • Profile Image

    Answered by Shadae on October 17, 2014 at 01:04 PM

    Dear stringtheorist,

    To confirm you would like to remove the padding form the top and bottom of your form.

    If that is the case, please inject the code below into your form:

    .form-all {

    padding-top: 0px;

    padding-bottom: 0px;

    }

    How to Inject CSS Code

    I hope this helps. Please inform us if you need additional assistance.

  • Profile Image

    Answered by stringtheorist on October 17, 2014 at 02:42 PM

    Thanks, although the white space is still in the document.

  • Profile Image

    Answered by Shadae on October 17, 2014 at 03:55 PM

    Hi stringtheorist,

    Thank you for providing us with an update. Please add the following CSS code to your form to remove the white space from the top of your form.

    .jotform-form {

    padding-top: 0px;

    }

    I hope this helps! Please inform us if you need further assistance.

  • Profile Image

    Answered by stringtheorist on October 17, 2014 at 03:59 PM

    Yep, that's solved it. Thanks! :)

  • Profile Image

    Answered by raul on October 17, 2014 at 06:22 PM

    We're glad to see that the suggested code worked for you.

    Please let us know if we can be of further assistance.

    Thanks.

  • Profile Image

    Answered by lra7 on May 06, 2015 at 12:54 PM

    Neither of these suggestions worked for me - is something else in my code putting the large chunk of padding at the bottom?

     

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 06, 2015 at 01:42 PM

    @ira7, 

    I have edited your post and removed the CSS codes you posted since we would be able to see that on your form when we check it, so it is not necessary for you to post your form CSS codes here.

    However, I have inspected the CSS codes you provided and I cannot really tell where those large paddings coming from. It is possible that we need to add something to your code in order for us to accomplish your desired outcome. 

    If you could help us by giving us the link to your web page where you used your form or if you could give us the URL of your form so we would be able to check it further. You may have many forms on your account and I will not be able to know the form you are talking about in particular. Thank you. 

  • Profile Image

    Answered by lra7 on May 06, 2015 at 01:47 PM

    Hi There,

    You can see it on http://www.jotform.com//?formID=51245383918157- it is entitled LA Design Request Form.

     

    Thanks!

    Lauren

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 06, 2015 at 02:13 PM

    After checking your form, I have found out that you already placed these codes in it. (Please see image below)

    This would actually solve the issue, however, there are some codes that conflict the padding-top: 0px and the padding-bottom: 0px. (Please see image below)

    There is no need to delete the codes above to accomplish your goal, you could just add the "!important" syntax to padding-top and padding-bottom of the .jotform{} so that it will ignore the other values you set for padding.  (Please see image below)

    By the way, the instruction above pertains to the large space at the top and bottom of the forms, not the spaces between fields on the form. 

  • Profile Image

    Answered by lra7 on May 06, 2015 at 02:33 PM

    Thank you! Your response makes perfect sense. Unfortunately, this did not seem to fix that problem at the bottom. See my form in action at: http://laurenacamporadesign.com/design-request-form (password = laurenfromduke)

  • Profile Image
    JotForm Support

    Answered by Mike_G on May 06, 2015 at 03:05 PM

    I have checked your web page and found this. 

    However, I have tried embedding it to one of my sample web pages and it worked perfectly fine. When I used the typical Embed option from the Embed Form Wizard. The extra space at the bottom was removed.

    I understand that you were using iFrame and what you can do is re-embed your form using iFrame but, this time, remove the script part of the iFrame code as that might conflict with the height you set on your form. (Please see image below)

    The iFrame code allows you to edit the height of the form. 

    You can, of course, set it to your own preference. You can also add the "!important", just to ignore any other conflict. Like, height: 1700px !important;

  • Profile Image

    Answered by lra7 on May 06, 2015 at 03:10 PM

    Thank you so much!! I set the height to 100% in my iframe html and that did the trick.