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

    ccs for centred layout

    Asked by bcpchouse1 on February 24, 2014 at 05:51 AM

    I an trying to acheive a Centered layout down a page and althiugh I have injected some ccs ~ (gleaned from various Forum answers) ~ I cannot work out how to adjust individual Feild Titles etc

     

    Could someone give me the basic structure in ccs for such layouts ~

    my page is

    http://www.jotform.com/?formID=40534804655354

    and you will see that I have some feilsd centred but cannot get the individual Fields   ie  form-label-top  for say  #input_16  to move in to maybe 275px

    If someone could give codes for a few of the elements ~ I could then learn the structure of the code snippets

    Cheers ~ John

    layout JotForm style size label
  • Profile Image
    JotForm Support

    Answered by TitusN on February 24, 2014 at 08:30 AM

    Hello John,

    Thank you for contacting us.

    I certainly hope this helps.

    Replace your current Ijected CSS with the following:

    ul {
    text-align:center
    }
    ul li {
    display:inline;
    }
    #input_9, #input_12 {
    width: 100%;
    }

    .form-textbox {

    border: 1px solid #B7BBBD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 10px;
    padding: 5px;
    height: 20px;
    !important; font-family: Comic Sans MS; color:#000099;
    !important;font-size: 16px !important;
    }
    .form-dropdown {
    border: 1px solid #B7BBBD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 10px;
    padding: 5px;
    height:30px;
    font-size:16px;
    font-family: Comic Sans MS; color:#000099;
    }
    .form-textarea {
    border: 1px solid #B7BBBD;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 10px;
    padding: 5px;
    !important;font-family: Comic Sans MS;color:#000099;
    !important;font-size: 16px; !important;
    }
    .form-captcha {
    margin-left: auto;
    margin-right: auto;
    }

    I took a copy of your form and tested it, you can preview it here: http://www.jotformpro.com/form/40543361381954

    Let us know if this helps.

  • Profile Image

    Answered by bcpchouse1 on February 24, 2014 at 09:00 AM

    Thank You so much ~ I will try and get my head around the code so, that I can use the techniques on other forms in the future

     

    again a Big Thank You

     

    John

  • Profile Image
    JotForm Support

    Answered by TitusN on February 24, 2014 at 09:06 AM

    Much Obliged John :-)

    Let us know if we can assist further.