The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering Gravity Form on a WordPress Page!

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #187053

    Hello all, first post. Amazing site! I have a (probably incredibly simple) CSS issue that’s been bugging me for days. I’m a CSS newbie, but I’m trying to learn as fast as I can as I’m putting up my wife’s Wellness based website using WordPress and she “needs it now” ;).

    The issue is the newsletter signup form on the main page at For the life of me, I can’t get this form to auto-center. Right now I’m using a margin-left to get it where I need it, but obviously if you scale the browser, it messes put he form!

    Here’s what I’m using for this newsletter signup form block. Questions is, how can I auto center the form fields?

    <div style="position: relative; text-align: center; margin-top: 10px; margin-bottom: 20px;
    <h3 style="padding-top: 20px; margin-bottom: -24px;">WANT TO KNOW 5 SECRETS TO</h3>
    <h1 style="margin-bottom: -18px; font-family: 'Petit Formal Script', cursive;">Free Yourself from Chronic Illness?</h1>
    <h3 style="margin-bottom: -18px;">JOIN MY LIVEWELL COMMUNITY AND GET THE eGUIDE FOR FREE!</h3>
    <div style="margin-left: 205px;">[gravityform id="2" name="Newsletter" title="false" ajax="false"]</div>

    Thank you in advance!


    Wait, is your question about centering the form or centering the elements inside the form.

    Either way. we really need to see it in action. Could you make a demo?

    I dislike seeing inline CSS such as you have in your code block…it makes me think that you’re tweaking things too much.


    Thanks for the reply! The question is about automatically centering the gravity form on the page. It’s online right now at I’ll look over that guide too :)


    Hey there, I had a look at your site and did some fiddling with the Chrome developer tools and had some success.

    Try wrapping the code inside the form in a div, set a class on it and add margin: 0 auto and text-align:center to that class and see how that goes.

    You may wish to look into using media queries if you’re looking for further control over what happens at smaller screen-widths. There’s an article on them here

    Hope that helps.

    EDIT: In hindsight, you could probably get away with just setting “text-align:center” on your form tag for the functionality you’re looking for.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.