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 can you move the form's text boxes down?

    Asked by guest_23406377955058 on December 07, 2012 at 02:51 PM

    I have designed a custom background where I have a logo and some other things in the top of the image. When I add the text boxes of the form, they align with the top of the form. Can can I move the text boxes down?

    Page URL:
    http://form.jotform.us/form/23406980916156

    Screenshot
  • Profile Image

    Answered by fxr on December 07, 2012 at 03:39 PM

    Hi, Can you try injecting this Custom CSS?

    .form-section {margin-top:260px !important; }

    These are the instrutions for where you need to put this rule:

    @ http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    --

    It may a little more tweaking but that should be a good starting point.

  • Profile Image

    Answered by eraflowitz on December 10, 2012 at 12:45 PM

    When I did that, it also moved my background image down as well. How do I have that top margin apply to the text boxes only, and not the background image.

     

    The current css I have is:

    .form-section {margin-top:260px !important; }

     .form-all {

    background: url(http://i1093.photobucket.com/albums/i428/regancomm/facebooktab_test-1.jpg) no-repeat top left;

    }.form-all {height: 1200px;}

  • Profile Image
    JotForm Support

    Answered by idarktech on December 10, 2012 at 02:09 PM

    Hi,

    Append this to your code:

    .form-line.form-line-column {

    line-height: 28px;

    }

    .form-all {

    padding-top: 260px !important;

    padding-left: 20px !important;

    }

    .form-line-active{

    background:none !important;

    }

    .form-label-left, .form-label-right{

    visibility: hidden !important;

    }

    Let us know how it goes so we can assist you further. Thanks!

  • Profile Image

    Answered by eraflowitz on December 12, 2012 at 02:06 PM

    Thanks so much! It worked!

  • Profile Image

    Answered by pinoytech on December 12, 2012 at 02:08 PM

    In behalf of my colleague, you are quite welcome! Feel free to contact us at anytime if you need assistance.

    Thank you!