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 form and fields?

    Asked by aeclis on May 19, 2017 at 01:15 PM

    Who can help me?

    The CSS code, to center does not seem to work.

    Who can help me for valid css code?

     

    Thank you

    Page URL:
    https://form.jotformeu.com/71384024287356

  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 19, 2017 at 02:39 PM

    Hello aeclis,

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

    li#id_3, li#id_11 {

        margin-left: 0px;

        width: 100%;

    }

    .form-line {

        margin-left: 30%;

        width: 70%;

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    The output of the above custom css code will be as displayed in screenshot below:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image

    Answered by aeclis on May 19, 2017 at 03:37 PM

    Hey

    Thanks here is a code that works!

     

    thank you very much

  • Profile Image

    Answered by aeclis on May 21, 2017 at 08:38 PM

    Hi

    I have a worry in code css "aligning center"

    Step 1 & 2 the frieze is centered.

    Step 3 & 4 the frieze leaves on the right.

    On all my forms, I have the same error.

    Ex form : https://eu.jotform.com/build/71407630787360#preview

    Can you help me ?

    thank you

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 21, 2017 at 10:28 PM

    Hi, 

    Please try adding this custom CSS on your form to align the fields and the form header.

    .form-header-group {

        position: relative;

        right: 100px;

    }

    .form-pagebreak {

        position: relative;

        right: 100px;

    }

    button#input_67 {

        position: relative;

        right: 100px;

    }

    Regards.

  • Profile Image

    Answered by aeclis on May 22, 2017 at 01:07 PM

    Hello

    I had to make a mistake.

    Code does not seem to work.

    https://litizia.fr/travaux

     

    Everything is distorted.

     

    Help me please

  • Profile Image
    JotForm Support

    Answered by ashwin_d on May 22, 2017 at 02:31 PM

    Hello,

    I have fixed the issue of your form by injecting following custom css code in form:

    li#id_3, li#id_11, li#id_27, li#id_105, li#id_61 {

        margin-left: 0px;

        width: 100%;

    }

    .form-line {

        margin-left: 24%;

        width: 70%;

    }

    .form-header-group {

        position: relative;

    }

    .form-pagebreak {

        position: relative;

        right: 0%;

    }

    button#input_67 {

        position: relative;

        right: 16%;

    }

    Please test your form again and get back to us if you need any other changes.

    Thank you!

  • Profile Image

    Answered by aeclis on May 22, 2017 at 03:01 PM

    hI @ashwin_d -)

    Thank you

     

    Much cleaner.

    It's functional.

    I have to make the other 7 forms as well.

  • Profile Image

    Answered by aeclis on May 22, 2017 at 03:50 PM

    Button widget preview: no center and hidden, by press button.

    A solution please?

     

    Ex form : https://litizia.fr/administratif

    Thank you

  • Profile Image
    JotForm Support

    Answered by Mike on May 22, 2017 at 05:59 PM

    You can add the next CSS to move the 'back to form' button:

    #backToForm {
    position: relative;
    left: 10%;
    }

  • Profile Image

    Answered by aeclis on May 22, 2017 at 06:15 PM

    IT

    WORKS

    Thank you

     

    I injected CSS code to be same colors, than the other buttons.

     

    It lacks the font "Muli"

    And button "rounded as on the other button of the form.

     

    Help me.

    Thank you

  • Profile Image
    JotForm Support

    Answered by Mike on May 22, 2017 at 08:33 PM

    You may try the following styles:

    .preview-submission-button {

        font-family: Muli, sans-serif;

        font-weight: bold;

        background: #2B6A93 !important;

        color: #FFFFFF !important;

        text-shadow: none !important;

        border: 2px solid #134A6E !important;

        box-shadow: none !important;

        padding: 18px !important;

        border-radius: 16px !important;

    }

    #backToForm {

        font-family: Muli, sans-serif;

        font-weight: bold;

        background: #2B6A93 !important;

        color: #FFFFFF !important;

        text-shadow: none !important;

        border: 2px solid #134A6E !important;

        box-shadow: none !important;

        padding: 18px !important;

        border-radius: 16px !important;

    }

    #backToForm {

      position: relative;

      left: 10%;

    }