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

    Increase space above the form heading

    Asked by ReenaChohan on November 14, 2013 at 04:41 AM

    Hi there,

     

    I would like to increase the space above my form heading and also increase the line spacing between the heading.

    How can i do this?

     

    My form link is http://form.jotformpro.com/form/33164312123945

     

    Many thanks for your help.

     

    Page URL:
    http://form.jotformpro.com/form/33164312123945

    heading form heading form link line spacing
  • Profile Image
    JotForm Support

    Answered by jonathan on November 14, 2013 at 06:39 AM

    Hi,

    You can try injecting CSS code to your form like this

     

    .form-all {padding-top : 100px;}

     

    It should move down the whole form down. You can adjust the 100px to other figure you prefer.

    I tested it on your form and it looks like this

     

    Inform us if you need further assistance.

    Thanks.

  • Profile Image

    Answered by ReenaChohan on November 14, 2013 at 07:01 AM

    Hi Jonathan

    Thank you very much for your reply.

    I tried adding this to my css coding but it does not work. Can you please tell me what i've done wrong?

     

    This is my css coding

     

    .form-all input,select {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 4px;
    width: 145px;}
    .form-buttons-wrapper margin-top: -80px !important;
    }
    .form-all{width:198px !important;height:272px !important;
    }
    #id_2{
    margin-top:-80px !important;
    }150
    .form-all {padding-top : 100px;}

     

    Thank you

  • Profile Image
    JotForm Support

    Answered by jonathan on November 14, 2013 at 08:03 AM

    Hi,

    I think your injected CSS code is a bit mess up. I highlighted them below

     

    .form-all input,select {

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    width: 145px;}

     

    .form-buttons-wrapper {margin-top: -80px !important;

    }

    .form-all{width:198px !important;height:272px !important;

    }

    #id_2{

    margin-top:-80px !important;

    }150

    .form-all {padding-top : 100px;}

     

    Can you please try updating it to like this

     

     

    .form-all input,select {

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    width: 145px;}

     

    .form-buttons-wrapper {margin-top: -80px !important;

    }

    .form-all{width:198px !important;height:272px !important;

    margin-top:100px !important;

    }

    #id_2{

    margin-top:-80px !important;

    }

     

    Thanks.

     

  • Profile Image

    Answered by ReenaChohan on November 14, 2013 at 08:05 AM

    Hi Jonathan

     

    Shall I copy the code above and paste it in?

    Do I remove the characters highlighted in red?

     

    Thank you for your help

     

  • Profile Image
    JotForm Support

    Answered by jonathan on November 14, 2013 at 08:11 AM

    Please replace your CSS code with what I have

    .form-all input,select {

     

    border: 1px solid #b7bbbd;

     

    -webkit-border-radius: 5px;

     

    -moz-border-radius: 5px;

     

    border-radius: 5px;

     

    padding: 4px;

     

    width: 145px;}

     

     

     

    .form-buttons-wrapper {margin-top: -80px !important;

     

    }

     

    .form-all{width:198px !important;height:272px !important;

     

    margin-top:100px !important;

     

    }

     

    #id_2{

     

    margin-top:-80px !important;

     

    }

     

     

    I am not really sure yet what the other CSS codes you have for. but I think it is overriding the "margin-top" I added.

    But just in case try applying the code I have for now. See if it makes any difference.

    If still does not work, can you give me permission to personally update the CSS code for you in the form builder?

     

    Thanks.

     

     

  • Profile Image
    JotForm Support

    Answered by jonathan on November 14, 2013 at 08:15 AM

    Please copy here instead http://pastie.org/8479970

    There are a lots of spaces on the code I provided because of the way the message here is constructed.

     

    Thanks.

  • Profile Image

    Answered by ReenaChohan on November 14, 2013 at 08:38 AM

    Hi Jonathan

     

    Many thanks for this.

    I copied and pasted the code in replace of the old CSS code.

    The form looks fine in jotform, but when I iframed it in, the submit button seems to have moved to the right hand side of the email field.

     

    See print sceen

     

    Thanks

  • Profile Image

    Answered by khrisell on November 14, 2013 at 09:16 AM

    Hello, 

    We are unable to see the posted screenshot, can you resend the message with the screenshot so that we could check how we could provide the proper code for adjustment.

    Thank you and we will wait for your response to assist you further.

  • Profile Image

    Answered by ReenaChohan on November 14, 2013 at 09:29 AM

    Hi Khrisell

     

    How do I add a screenshot?

     

    Thanks

  • Profile Image

    Answered by ReenaChohan on November 14, 2013 at 09:31 AM

  • Profile Image

    Answered by khrisell on November 14, 2013 at 09:31 AM

    Hello,

    Please follow the steps here onn adding screenshots.

    https://www.jotform.com/answers/277033-How-to-upload-and-add-screenshots-to-support-forum

    Thank you and we'll wait for it.

  • Profile Image

    Answered by ReenaChohan on November 14, 2013 at 09:34 AM

    Hi Khrisell

     

     

    Here is the image

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by KadeJM on November 14, 2013 at 11:39 AM

    Okay, I see what you mean when you updated to the adjusted CSS then it turned your form into that. I was able to replicate the same problem. I think this was due to a flaw in the code and appears that it is then being misread across different browsers.

     

    I think I found the cause of your problem. The second part of your code involving the Submit button was unnecessary and only created the conflict that you saw. So if you remove it then the form will appear similar to what I think you are wanting.

     

    Current CSS:

    .form-all input,select {

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    width: 145px;}

    .form-buttons-wrapper {margin-top: -80px !important;

    }

    .form-all{width:198px !important;height:272px !important;

    margin-top:100px !important;

    }

    #id_2{

    margin-top:-80px !important;

     

    }

     

    Remove:

    .form-buttons-wrapper {margin-top: -80px !important;

    }

    .form-all{width:198px !important;height:272px !important;

    margin-top:100px !important;

    }

    #id_2{

    margin-top:-80px !important;

     

    }

     

    Use Only this CSS:

    .form-all input,select {

    border: 1px solid #b7bbbd;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    padding: 4px;

    width: 145px;}

     

    Result: 

    http://form.jotform.us/form/33174080592150

  • Profile Image

    Answered by ReenaChohan on November 14, 2013 at 11:46 AM

    Hi Kade

    Many thanks for your response.

    With this code, will I also be able to increase the space between the top of the form and the heading of the form?

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by KadeJM on November 14, 2013 at 12:38 PM

    No problem and you are very welcome. You can use that code in conjuction with other code to do that, yes. I've made an adjustment to my Test Version of your Form (http://form.jotform.us/form/33174080592150) and added some spacing into it. The text shifted slightly but that is due to the padding used to create some spacing above it at the top.

     

    Added CSS:

    .form-header-group {

    padding: 30px;

    }