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

    Removing the space at the top of the form

    Asked by shardwick on September 15, 2015 at 05:37 PM
    I love the spacing of the questions toward the bottom of the form. Can we do that to the top? There is so much room up there.
    space top of the form CSS layout
  • Profile Image

    Answered by Ben on September 15, 2015 at 06:41 PM

    As mentioned on the previous thread: https://www.jotform.com/answers/662817 I think that the space you were referring to is removed using the same code, but if you want to adjust the spacing there are only few things to change in the CSS code:

    #id_1 {
        margin-top: -100px !important;
    }
    ...
    #id_83 .form-image {
        display: block;
        height: 150px;
        margin: 0 auto;
        position: relative;
        top: 80px;
        width: auto;
        z-index: 9;
    }
    @media screen and (max-width:768px) {
    ...
        #id_83 .form-image {
            height: 160px;
            top: 110px;
        }
    }
    @media screen and (max-width:360px) {
    ...
        #id_83 .form-image {
            top: 80px;
        }
    }
    @media screen and (max-width:320px) {
    ...
        #id_83 .form-image {
            height: 100px;
            top: 20px;
        }
    ...
    }

    I have cut out the parts of the code that did not need to be changed to make it easier to follow and marked the parts that can be changed.

    The yellow marker is the part that is a reference for all others. If you change this to 110, then you will need to take away 10 from each value in bold. In the same way, if you set it to 90 (to have more space at the top), you will need to change all other bold values to +10 so it is 30 instead of 20.

    Hope that this helps, but if you have any further questions or wanted to remove some other space, do let us know and we would be happy to assist :)

  • Profile Image

    Answered by shardwick on September 15, 2015 at 08:00 PM

    Yes, I do have further questions...nothing works,  can't even view what you did! Please reply.

  • Profile Image
    JotForm Support

    Answered by Kiran on September 16, 2015 at 12:51 AM

    It seems that the changes provided here is already included in the cloned version of your JotForm  provided by our colleague on the other thread. If you want to make any changes to the code, please click on Preferences icon -> Form Styles -> Inject Custom CSS

    You can find the injected code at the bottom and you may make the changes as referred by our colleague in the last post.

    Let us know if you need any further assistance. We will be happy to help.

  • Profile Image

    Answered by shardwick on September 16, 2015 at 01:05 AM

    I just did exactly as you said and nothing happend. It may have moved up tiny bit, but hardly anything. Also, the codes the other guy listed don't match anymore. Can you PLEASE take a look and just do what I need done? I just need moved up, less wasted space. Does that make sense? PLEASE!!! I have messed with exactly what you told me to do ALL DAY LONG.

  • Profile Image

    Answered by shardwick on September 16, 2015 at 01:17 AM

    Are you still there?

  • Profile Image

    Answered by shardwick on September 16, 2015 at 01:31 AM

    I tried more numbers and it moves the form up!

  • Profile Image

    Answered by shardwick on September 16, 2015 at 01:37 AM

    I was able to move it up a bit, but now the log is off center of the plate. how do I get it back on there?

  • Profile Image

    Answered by shardwick on September 16, 2015 at 01:45 AM

    Anyone there?

  • Profile Image

    Answered by shardwick on September 16, 2015 at 02:02 AM

    Also, the lines are still there whe you go to get a PDF of the document.

    We are using hard copies first and then using them online later. Is there no way it can look nice on one piece of paper?

    Can you please fix the logo?

  • Profile Image
    JotForm Support

    Answered by Charlie on September 16, 2015 at 04:59 AM

    I edited the "top" value of the CSS in your form, here's your form: http://form.jotform.us/form/52578680494166?, titled "Clone of POPCS Cafeteria Committee Food Service Form (clone version)".

    If you want to add the image just above on another one, I would like to suggest editing the image using software like "Paint" or Adobe Photoshop. Positioning the image on another would work using CSS but I believe it won't be that responsive, which means when the form is viewed on a device with a different screen size, the images may moved on a different position. Here's what I meant:

     

    The simpler solution for it is to edit the image and copy and paste the "POPCS" logo to the "Prince of Peace Christian School". Save them as one image file, and use that instead.

     

    For the PDF version or hard copy of the form, please refer to this link instead: www.jotform.com/answers/663110. I have responded to your concern there.

    I hope that helps.

  • Profile Image

    Answered by shardwick on September 17, 2015 at 10:21 AM

    http://www.jotform.com//?formID=52593270943157#

     

    Can someone please help me remove the lines on this page when going to print? They don't show until you go to print. Please. please please.

    Why won't your tech support help anymore?????

  • Profile Image
    JotForm Support

    Answered by Charlie on September 17, 2015 at 11:42 AM

    @shardwick

    We'll be replying to the other thread here: http://www.jotform.com/answers/663110. Apologies for the delay, we provide support 24/7, please do allow us a couple of hours to response back.

    Thank you for understanding.