Center wpform on webpage

Are you wanting to center the white area and make it narrow inside that gray background OR are you wanting to center the fields _inside_ the white area?

Hi Jared,

I’m trying to center the fields inside the white area, so they are in the middle of the page. How should I go about that?

Check out the CSS below (https://cl.ly/3o390q3l3Z0B)

.wpforms-field-container {
max-width: 200px !important;
margin: 0 auto !important;
}

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

This will center the form fields and the submit button. You can adjust the 200px to however wide you want the fields to be. For this code to work, you will need to adjust the field sizes (under Advanced settings for each field) and set to Large, which makes the fields go 100% of the parent container.

Thank you, Jared! This has helped more than any other code we have tried. We may be considering a different plugin for contact forms over the next few days. Do you have any recommendations for a free plugin that works well creating contact forms? WPForms has been somewhat limiting, while prompting us to upgrade for more customization options.

One more question! When including this css code in my theme, what is the correct way to address one specific form? For example, the form ID for the link I’ve provided is [wpforms id=”15289″]. I see the code you provided applies to all forms created with the wpform plugin.

Sure, to target a specific contact form, just add the unique ID in front of those CSS rules. Example:

#wpforms-15468 .wpforms-field-container {
max-width: 200px !important;
margin: 0 auto !important;
}

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

Thanks so much Jared!