How to center align all elements of the form in the Form Designer?

  • Profile Image
    jacobgraf
    Asked on March 18, 2015 at 02:01 PM

    I am thinking about switching to JotForm from Wufoo. I am just playing right now to see if it will work out for my needs and I am having a very frustrating issue.

    I am building a custom theme under my account called "Graf Technology : Contact". Since I want everything to be center-aligned, I used this CSS selector under the CSS tab...

    * {
      text-align: center;
    }

    The problem is that this must affect all of the styles for the Theme Designer too because if I go out of the Theme Designer and come back in, all of the Theme Designer text, controls, etc are center-aligned. Also, my custom CSS no longer appears.

    It's very frustrating. Can you help me out?

    Thanks!

    +Jacob

  • Profile Image
    Ben
    Answered on March 18, 2015 at 05:22 PM

    I would always recommend to add CSS code through the Preferences window, since then, you can add them at the bottom of all other CSS giving it bigger importance.

    Having that said, the * (all) rule specifier is global and any style that is more specific will be taken by all browsers as the one to use. They would only use * in case no other style specified in the global rule is being applied to the same element.

    I would instead suggest using a CSS rule such as this one:

    .form-line label, .form-line div {
        margin: auto;
        text-align: center;
    }

    This should align the elements within the form to the center.

    You can see here how to inject the CSS code to your jotform.

    Since you say that you are from Wufoo, I would also suggest to check this out: Migrate from Wufoo

    Also, this is a great place to take a look at for better way around the Form Designer: Video Course: Form Designer Basics

    Do let us know if you have any further questions and we would be happy to assist.

  • Profile Image
    jacobgraf
    Answered on March 18, 2015 at 09:22 PM

    Thanks.

    Another question is related to "Themes" and the "Inject Custom CSS"? I would like to be able to create re-usable "themes" for my forms but it appears that I can only do so if it's tied to a specific form? I am also unsure about how a custom "theme" and the injected CSS are tied together? It appears the injected CSS changes and I can't figure out how/when.
  • Profile Image
    ashwin_d
    Answered on March 19, 2015 at 02:50 AM

    Hello jacobgraf,

    We cannot answer multiple questions in one thread. I have moved your theme related question to a new thread and you will be answered here:  http://www.jotform.com/answers/536272 

    Thank you!