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 increase left margin of form?

    Asked by daveprenter on April 17, 2014 at 05:49 AM

    Hi there,

     

    Am trying to increase left margin.  Have put the following in injected CSS code:

     

    /* Injected CSS Code */  .form-all {  border: 10px solid #64a7dc;margin-left:50px;}

    but it doesn't seem to override the default css as follows,

    .form-all{ margin:0px auto; padding-top:20px; width:530px; background:#393935; color:#FFFFFF !important; font-family:'Helvetica'; font-size:12px; } .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{ color:#FFFFFF; }

    Margin isn't changing at all.

    Cheers,
    Page URL:
    "http://form.jotform.co/jsform/40992660099869"

    all checkbox size label font
  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 17, 2014 at 10:29 AM

    Hello daveprenter,

    Have you tried adding !important in your css code?

    Please inject the following custom css code and see if that helps you:

    .form-all {  border: 10px solid #64a7dc !important; margin-left:50px !important;}

    The above css code should add the margin to form contents. If you want to add margin between the border and the form fields, you should inject the following custom css code:

    .form-section{margin-left:50px !important;}

    The following guide should help you:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Do get back to us if the issue persists.

    Thank you!

  • Profile Image

    Answered by daveprenter on April 17, 2014 at 07:10 PM
    Hi Ashwin,
    Thank you very much for that.
    Yes , I needed as I needed to adjust the margin between the contents and border. So inserted this one .form-section{margin-left:50px !important;} as instructed.
    However the first 2 fields did not respond, all the other fields moved accordingly? I can't see anything that would cause this.
    Kind Regards,
    Dave
    --------------------------------------------
    ...
  • Profile Image
    JotForm Support

    Answered by BDAVID on April 17, 2014 at 08:20 PM

    Hi, please try injecting the following CSS code in your form: 

    #text_215,#id_58,#id_6.form-line{

    margin-left:20px !important;

    }

    I cloned your form in my account, by injecting the code it solves the issue:

    Hope this helps you, let us know if you have more questions, we will be glad to assist you.

  • Profile Image

    Answered by daveprenter on April 18, 2014 at 12:30 AM
    Thank you BDAVID,
    That has done the trick.
    have a nice Easter,
    Dave
    --------------------------------------------
    ...