How to center align form and fields?

Who can help me?

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

Who can help me for valid css code?

Thank you

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!

Hey

Thanks here is a code that works!

thank you very much

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

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.

Hello

I had to make a mistake.

Code does not seem to work.

https://litizia.fr/travaux

Everything is distorted.

Help me please

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!

hI @ashwin_d -)

Thank you

Much cleaner.

It's functional.

I have to make the other 7 forms as well.

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

A solution please?

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

Thank you

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

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

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

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%;

}