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 the whitespace at the top of the form?

    Asked by scany on December 23, 2015 at 04:02 PM
    1. How do I eliminate the white background space in the form?  Either get rid of it or make it the same color as the form?
    whitespace top padding
  • Profile Image

    Answered by Ben on December 23, 2015 at 04:27 PM

    Next to the code that was given on the previous thread, you should also add this code to your form:

    @media screen and (max-width:601px) and (min-width:599px) {
    form.jotform-form {
        padding: 0;
    }
    div.form-all {
        border-radius: 0;
    }
    }

    This new code will make the white at the bottom and the top gone and the corners will not show white.

    Do let us know if there are any additional details that should be changed and we would be happy to assist with the same. :)

  • Profile Image

    Answered by scany on December 23, 2015 at 04:33 PM

    Hi Ben - this eliminated the white space on the desktop view, but the white background still appears slightly at the corners on the iPhone.  Is there a way to fix for both displays?

  • Profile Image

    Answered by Ben on December 23, 2015 at 04:40 PM

    Can you please tell us what iPhone do you have so that we can check the resolution on it and also to give us a screenshot, to be able to see if we can recreate the same.

    This would allow us to give you proper code to fix this.

  • Profile Image

    Answered by scany on December 23, 2015 at 04:54 PM

     

    iPhone 6S Plus with Safari browser.  See the top left/right corner of the form shows white.  Same for the bottom right and left corner of the form (though not in screenshot because it was below the fold).

  • Profile Image

    Answered by Ben on December 23, 2015 at 05:08 PM

    OK, I understand, you do not want to have those shown at all.

    I removed them on the desktop using this part of the code:

    div.form-all {
        border-radius: 0;
    }

    You can use it on your form outside of the media query (the previous CSS) and it should remove it for all sizes.

    Do let us know of course how it goes. If there are still any issues, I would try my colleague from iPhone department to check this out as well.

  • Profile Image

    Answered by scanyevents on December 23, 2015 at 05:12 PM

    Do I enter that code in the CSS area just before the other code I inserted, which was:

     

    @media screen and (max-width:601px) and (min-width:599px) {
    form.jotform-form {
        padding: 0;
    }
    div.form-all {
        border-radius: 0;
    }
    }
    @media screen and (max-width:601px) and (min-width:599px) {
    .form-sub-label-container {
        max-width: 49.6%;
        box-sizing: border-box;
    }
    li.form-line {
        min-width: 100%;
    }
    }

  • Profile Image

    Answered by Ben on December 23, 2015 at 05:26 PM

    No, feel free to add it under that (previously added) code, so just like this:

    div.form-all {
        border-radius: 0;
    }

    That will cause it to work for all sizes.

  • Profile Image

    Answered by scany on December 23, 2015 at 05:33 PM

    With this code change, I lost the "rounded corners" on the form, which is fine.  That fixed the white space issue - so thanks again for your help!!

  • Profile Image
    JotForm Support

    Answered by Kevin_G on December 23, 2015 at 05:50 PM

    Hi,

    On behalf of our colleague Ben, you are welcome.

    Feel free to contact us anytime if you need more help or have more questions, we will be more than glad to assist you.

    Regards.

  • Profile Image

    Answered by scany on December 24, 2015 at 11:29 AM

    I did a little more testing and the fixes we implemented worked both on Chrome browser with Windows 10, iPhone iOS6 with Safari, but not on the desktop version of Internet Explorer Version 11 under Windows 10.  Please see below.  Is there a way to implement a fix that will also cover IE 11?

  • Profile Image
    JotForm Support

    Answered by BJoanna on December 24, 2015 at 01:19 PM

    Unfortunately I do not have Internet Explored 11 on my computer to test your embedded form, but from what I can see from a screenshot you provided and how your embedded form looks in Chrome, I think that width of the form is changed. Considering that width of your form is set to 100%, possible reason for this issue can be element in which your form is embedded. That element is iFrame of Wix website which is also set to 100%. You can try to set fixed value for width of that element e.g. 600px, to see if that will resolve your issue. 

    Hope this will help. Let us know if you need further assistance.