Center WPForms Lite on page.

Hi Jane,

Sure, I can help you with this. Styles for centering can be a bit finicky, and with a lot of different factors involved in some cases, so it’s generally best to work on a site-by-site basis.

Here’s the CSS you’ll need to center your contact form:

form#wpforms-form-1647 {
    text-align: center;
}

div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=date], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=datetime], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=datetime-local], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=email], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=month], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=number], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=password], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=range], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=search], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=tel], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=text], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=time], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=url], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 input[type=week], 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 select, 
div.wpforms-container-full .wpforms-form#wpforms-form-1647 textarea {
    margin-left: auto;
    margin-right: auto;
}

In case it helps, here’s a tutorial from WPBeginner on how to add custom CSS like this to your site.

Last, I noticed that you have two CSS classes on the Message field of this form (wpforms-one-half and wpforms-first). So be sure to delete these classes to allow this field to be centered also (here’s a screenshot of where you can find these classes to delete them: https://cloud.supportally.com/1G1x2X3W0n0l).

I hope this helps! When you have a chance to give this a try, could you let me know how it goes?

Thanks! ??

Hi Jess, many thanks for your reply. It works! I was wondering though, as I only have 3 fields, Name, Email and Message and the submit button, if the code could be shorter?

Also after sending a message, the confirmation message appears in a green box. Can this be changed to no colour or white?

Hi Jane,

Great, I’m glad that works for you!

If you wanted a shorter version of that code, you could certainly delete out the lines for other fields — however, these extra lines won’t alter your site speed in any way and provide the greatest flexibility if you change your form down the road. So totally up to you ??

For the confirmation message background color, this is another quick CSS adjustment. Here’s our tutorial where we share all of the default form styles so that you can copy and adjust it as needed.

And here’s the specific CSS you’ll need:

.wpforms-confirmation-container-full {
    background: #fff;
    border: none;
}

This will set the background color to white (#fff) and remove the border (which is also green). You can add this snippet in the same way mentioned above.

I hope that helps! ??

Hi Jess, many thanks again for the information which all works.You have been very helpful.:)

You’re welcome, Jane! ??

Hi again, I have now made my site full width and thethe fields on my contact form and now spread out making the form look odd. Is there a way to reduce the size of the fields width?

Also, is there a way to move the whole form over to the right just a bit?

Hi Jane,

Sure! The easiest way to adjust the width of form fields is to open the form builder and click a field within the preview area. This will open the Field Options panel, and from here you can open Advanced Options. In this section, you should see a dropdown named Field Size (this will let you choose Small, Medium, or Large).

If we’re still discussing the contact form that you shared in your initial post here, though, you’ll need a slightly different approach. The field size options for Paragraph Text fields (such as your form’s Message field) will change the vertical height, not the horizontal width. So to change the width of the overall form, you can use the following CSS:

#wpforms-1647 {
    max-width: 500px;
}

To push the form around, you can then just add margins to this snippet. For example, to center the form you could modify the snippet to:

#wpforms-1647 {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

If you’d like to experiment beyond that option, you can find more details on CSS margins in this article from W3Schools.

And I shared this in an earlier post, but in case it helps here’s WPBeginner’s tutorial on adding custom CSS to your site.

I hope this helps! ?? If you’d like to do any additional styling changes, you might consider checking out our Beginner’s Guide to CSS or looking into CSS Hero, which allows you to apply styles without touching any code.

Thank you so much, the CSS works perfectly and now I can also change the height with your instructions. Brilliant.
Many thanks ??

You’re welcome, Jane. Happy to help! ??