• Resolved rtimarketing

    (@rtimarketing)


    Hi there,

    I can’t seem to find the CSS to edit the form. I’d like to center the form and also center the button to the form.

    Additional question, how could I change the button color?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Jess Quig

    (@jquigam)

    Hi rtimarketing,

    Sure, so in order to center the form you can use the following CSS:

    #wpforms-559 {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    

    This will set the maximum width of the form to 600 pixels, but you can change this to any value you’d like. By setting only an upper limit on width, your form will still be able to go full-width on mobile devices.

    I’d also recommend setting your Name and Email fields to full width (in the form builder, just click the field, open Advanced Options, and set Field Size to Large).

    Then to center the submit button you can use this CSS:

    #wpforms-559 .wpforms-submit-container {
        text-align: center;
    }
    

    For details on how to customize the color or other styles for the submit button, you can check out our tutorial with all the details.

    And in case it helps, WPBeginner has a great tutorial on how to add custom CSS like this to your site.

    If you’d like to do any additional style edits to your forms, you could take a look at our Beginner’s Guide to CSS or if you’d like to avoid touching code altogether you could consider CSS Hero (of course, CSS Hero can be used site wide, not just for your forms).

    I hope this helps! 🙂

    Thread Starter rtimarketing

    (@rtimarketing)

    That works splendidly! Thank you. I’ll look into the links you provided to change the button color.

    Also, I was wondering if I can widen the button? Possibly equal to the width of the text fields.

    Plugin Support Jess Quig

    (@jquigam)

    Hi rtimarketing,

    I’m glad that helped! As a courtesy, we provide limited support for our free version. For any other style changes, please see the guide links I shared above or consider using CSS Hero.

    We include CSS for full width submit buttons, as well as a bunch of other style changes, in the submit button styling tutorial I shared above.

    I hope our guides help you to achieve what you’re looking for!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘center form’ is closed to new replies.