CSS code to inject in order to float entire form in the center of the browser window?

  • upscalemktg
    Asked on February 22, 2019 at 5:05 PM

    Some of my forms appear left justified, and some center justified. I know there is any easy fix to this, and not sure how it keeps getting changed on my forms. I am not using any pre-defined templates, just blank generic super-nova. Thanks.

  • upscalemktg
    Replied on February 22, 2019 at 5:16 PM

    So this would be for a stand-alone html page. See screen captures below.

    1550873768screen capture 1 Screenshot 10

     

    and this is how it appears in a browser window --

    1550873905screen capture 2 Screenshot 21

  • Jed_C
    Replied on February 22, 2019 at 9:27 PM

    The form itself is centered aligned https://www.jotform.us/form/90496395394169. You'll just have to enclose form's source code in "center" tag. For reference you can check this guide https://www.w3schools.com/tags/tag_center.asp on how to add center tags to your html code.

    ex.

    1550888719center form Screenshot 10

    Let us know if you have any questions or if you need further assistance. 

  • upscalemktg
    Replied on February 23, 2019 at 2:01 PM

    Thanks Jed. So when I downgraded form HTML5 to an earlier format and added the center tags like you suggest, it changes the appearance of the elements inside the form as well. The left aligned text and images inside of the form were fine, I just wanted the form as a whole to be center aligned.


  • Jed_C
    Replied on February 23, 2019 at 6:04 PM

    Thanks for the response. It seems that your site is no longer viewable. I noticed that you are using the form's source code, is this correct? Your site doesn't include much code so I would assume that embedded the form's script code will be just fine, try replacing the source code with the regular script tag and see how it looks.

    Guide: https://www.jotform.com/help/34-Adding-a-Form-to-a-Web-Page 

    Looking forward for your response. 

  • Jed_C
    Replied on February 23, 2019 at 7:32 PM

    I checked and this link http://dlpmarketing.com/Issue-1-Bio-EDDM-Source.html is no longer accessible. Can you please re-embed the source code so I inspect the page again. 

  • upscalemktg
    Replied on February 25, 2019 at 10:57 AM

    Hi Jed:

    I have uploaded the page so you can inspect it.

    http://dlpmarketing.com/Issue-1-Bio-EDDM-Source.html

    Thanks.

    -- Randy

  • Kevin Support Team Lead
    Replied on February 25, 2019 at 12:51 PM

    Try doing the following: 

    1. Remove this code from the injected section of your form: 

    .jotform-form {

        float : center!important;

        margin-left: 33.33%;

        margin-right: -33.33%;

    }

    2. Add the following: 

    .jotform-form .form-all {

        margin-left: auto !important;

        margin-right: auto !important;

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps. 

  • upscalemktg
    Replied on February 25, 2019 at 1:08 PM

    Awesome, thanks Kevin. That fixed it on all platforms and browsers. Much appreciated.