Center aligning the form body

  • Christy_Romano
    Asked on May 5, 2025 at 4:49 PM

    PODO did not help me; need help center aligning my form, using CSS

  • Podo: Support AI Agent
    Replied on May 5, 2025 at 4:49 PM

    Hi Christy_Romano,

    Thanks for reaching out to Jotform Support. I'm an AI assistant. I'll support you as best I can until one of our support agents steps in.

    You want help with center aligning your form using CSS.

    Let me walk you through it:

    1. Open your form in the Form Builder.
    2. Click on the paint roller icon in the upper-right corner to open the Form Designer panel.
    3. Go to the Styles tab at the top of the panel.
    4. Scroll down to the Inject Custom CSS section and enter the following CSS code to center align your form:
    .form-all {
    margin: 0 auto;
    float: none;
    }
    1. Save your changes (they save automatically) and preview your form to see the centered alignment.

    This CSS sets the form container to have automatic left and right margins, which centers it horizontally on the page.

    If your form is using the Card layout, please note that custom CSS is not supported there. You would need to switch your form to the Classic layout to inject CSS code. You can find a guide on how to change your form layout here.

    For more detailed customization options and examples, you can check our guides on Customizing Your Form Using CSS Codes and How to Inject Custom CSS Codes.

    Give it a try and let us know how it goes.

    Best regards,
    Jotform Support

  • Afzal JotForm Support
    Replied on May 5, 2025 at 11:20 PM

    Hi Christy,

    You can easily center align the form body by Injecting CSS Codes into your form. Let me walk you through it:

    1. First, copy this code:

    .hasFormUserAvatar .form-cover-wrapper+.form-all {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

    3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

    Center aligning the form body Image 1 Screenshot 30

    Here's the result:

    Center aligning the form body Image 2 Screenshot 41

    Give it a try and let us know how it goes.