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 center align fields in a form?

    Asked by markashton on September 27, 2011 at 05:32 AM

    Hi,

    I would like to be able to bring a field into the middle of a form. 

    I know I can move the field by editing the padding-left or margin-left setting with pixs but would be grateful to know how to center it properly so that on a mobile phone the field displays properly on a portrait and landscape viewport. Of course the pix approach fails in this requirement.

    By default the fields of a form are left aligned - I know you can change the label alignment - but it is the individual field positioning in context to the rest of the form that I want to control.

    A little bit of Inject CSS would be great.

     

    Thanks Regards Mark

     

    align fields inject CSS alignment label Mobile
  • Profile Image
    JotForm Support

    Answered by fxr on September 27, 2011 at 05:40 PM

    Hey Mark, 

    In css there is various way of acheiving platform independent centering. I most commonly use margin:0px auto; for that class or element id.

    There is other workarounds, but its hard to be too specific without working out exactly what your trying to achieve.

    If you wanted to post the URL of the form you are working on. I dont mind having a quick look at it.

     regards.

  • Profile Image

    Answered by ddrust on October 02, 2011 at 12:08 PM

    Actually, I'm having the same problem and  margin:0px auto   isn't working. I have a couple forms on my site and in neither of them does the image in the header of the form appear centered. They "look" centered in design mode in Dreamweaver (CS5), but on the site they're left-justified. Really frustrated. Any suggestions?

  • Profile Image
    JotForm Support

    Answered by abajan on October 02, 2011 at 01:01 PM

    @ddrust

    Could you please provide the URL(s) of the page(s) within which the forms in question are embedded? We'd like to examine the source of the page. It's possible that some of the styles in the page may be cascading down into the form and overriding its CSS.

  • Profile Image

    Answered by ddrust on October 02, 2011 at 01:08 PM

    Thanks @abajan! Here you go!

    http://walkingoliver.com/testify.html

  • Profile Image
    JotForm Support

    Answered by abajan on October 02, 2011 at 02:58 PM

    Okay, thanks. Here's one solution:

    1. Inject the following CSS into the form in question:

    #id_9 {
    position:absolute;
    top:-275px;
    right:0;
    left:0;
    }

    #cid_7 .form-header-group {
    margin-top:275px;
    }

    2. Save the form and copy the Source code provided by the Embed Form Wizard to your clipboard

    3. Replace all of the old form code on your web page with the new one and save the change

    That ought to do it. Please let us know if you're happy with the result and if there's anything else related to your forms with which you need assistance.

    EDIT: I forgot to mention that this bit of weirdness will happen in the form builder as a result of injecting the CSS above:

    LOL Looks more like "Jumping Oliver"! Not to worry because half of the JotForm header links are also available at the bottom of the page. If the one you want to get to isn't there (My Forms, Blog and Pricing) click one of the others and then link to it from there:

  • Profile Image

    Answered by ddrust on October 02, 2011 at 10:15 PM

    Thanks, @abajan! That did the trick. I have another form throughout with the same issue. Can I inject the same CSS in that one, and reupload it?

    Cheers.

    P.S. Actually, now that I think about it, it is a bit different from the first one. Maybe take a look at it here?

    http://walkingoliver.com/about.html

  • Profile Image
    JotForm Support

    Answered by abajan on October 02, 2011 at 11:24 PM

    In that second form, inject the following rules and follow the same procedure outlined above:

    #id_7 {
    position:absolute;
    top:-122px;
    right:0;
    left:0;
    }

    #cid_6 .form-header-group {
    margin-top:122px;
    }

    To discover the correct ID to use in each selector, first right-click the image ("Oliver", in this instance) and when the menu pops up, click Inspect Element. (This method works in Firefox and Chrome.) Repeat the process to discover the ID for the heading under Oliver ("Get the Walking Oliver Newsletter!")

    To get a better feel of how CSS works, have a look at the tutorials and presentations on this page.

    Cheers


    ~ Wayne

  • Profile Image

    Answered by ddrust on October 03, 2011 at 02:32 AM

    Hi Wayne - Thanks so much, this has been hugely helpful! And thanks for the helpful links to the tutorials.

    Dot

  • Profile Image
    JotForm Support

    Answered by abajan on October 03, 2011 at 10:23 AM

    You're welcome, Dot.

    Incidentally, for those wondering how to determine what figure should be used in the value for the top and margin-top properties in the first and second rule respectively (highlighted below)

    #id_9 {
    position:absolute;
    top:-275px;
    right:0;
    left:0;
    }

    #cid_7 .form-header-group {
    margin-top:275px;
    }

    commit this to memory: Add 2% then 20

    Now do the following:

    1. Load the form in question into the form builder and before injecting the CSS above, click the image, then the Height button and note the figure displayed in the box

    2. Inject the CSS, substituting the result of the Add 2% then 20 rule for your specific image


    It's possible (even likely) that the "2% then 20" rule will not work in all circumstances. The image is supposed to shift only horizontally and the header immediately below it should not move at all. To confirm that this is what happened when the CSS was injected, do the following:

    1. With the form still loaded in the builder, click the Preview button and then the Open in new tab button

    2. Return to the form builder tab ("JotForm . Easiest Form Builder") and disable the injected the CSS by wrapping it in comments (highlighted below) :

    /*
    #id_7 {

    position:absolute;
    top:-122px;
    right:0;
    left:0;
    }#cid_6 .form-header-group {
    margin-top:122px;
    }
    */

    3. Save the form and just like before, preview it and click the "Open in new tab" button. (The two tabs should now be adjacent to each other)

    4. Alternately click the tabs. You should just see the image shifting horizontally with nothing else moving. If there is vertical movement, the number in both declaration blocks will need to be adjusted accordingly. You will have to keep adjusting the number (saving the form each time) until no vertical shifting is noticed.

    5. Once there is no vertical shifting, return to the form builder tab and remove the comments from the injected CSS

    6. As an added measure, it would be not be a bad idea to test the difference between the injected CSS and non-injected CSS versions of the form in the major browsers, including mobile ones.


    ~ Wayne

  • Profile Image

    Answered by striker862 on September 17, 2013 at 04:57 PM

    I'm having the same issue. No matter what I try, I haven't been able to figure out why I can't get the form to center align. I tried <center> , width:100%;margin: 0 auto - but nothing.

  • Profile Image

    Answered by Cesar on September 17, 2013 at 05:07 PM

    Hello striker862,

    Kindly create a new thread so that we can provide you support more efficiently and to avoid any confusions with the steps already dicussed here. Thank you.

  • Profile Image

    Answered by striker862 on September 17, 2013 at 05:20 PM

    will do. thanks.