Home Admin

Embed Snippet on Your Site

<script src="https://library.wpcode.com/embedjs/g5geg02m.js/"></script>

Centering a form

This snippet will allow you to add a CSS class to your form which will enable your form to appear center in your container.

Please remember that you can change the max-width from 500px to whatever you wish.

After adding this snippet, simply add the CSS class of wpf-center to any form. You can see where to add this CSS class on this screenshot: https://a.supportally.com/i/8SFdf3

To view the full tutorial, visit https://wpforms.com/developers/how-to-center-a-form/

WPForms Team PRO

<10

Code Preview

Comments

css


	`/*`
	`Center the form inside a container`

	`Original doc link: https://wpforms.com/developers/how-to-center-a-form/`

	`For support, please visit: https://www.facebook.com/groups/wpformsvip`
	`*/`

	`.wpforms-container.wpf-center {`
	`margin: 0 auto !important;`
	`/* Adjust the width in the next 2 lines as your site needs */`
	`max-width: 500px !important;`
	`width: 500px !important;`
	`}`

	`/* Readjust the form width for smaller devices */`
	`@media only screen and (max-width: 600px) {`

	`.wpforms-container.wpf-center {`
	`/* Reset the width for devices under 600px */`
	`max-width: unset !important;`
	`width: auto !important;`
	`}`

	`}`

/* 
Center the form inside a container

Original doc link: https://wpforms.com/developers/how-to-center-a-form/

For support, please visit: https://www.facebook.com/groups/wpformsvip
*/

.wpforms-container.wpf-center {
    margin: 0 auto !important;
/* Adjust the width in the next 2 lines as your site needs */
    max-width: 500px !important;
    width: 500px !important;
}

/* Readjust the form width for smaller devices */
@media only screen and (max-width: 600px) {

	.wpforms-container.wpf-center {
	/* Reset the width for devices under 600px */
		max-width: unset !important;
		width: auto !important;
}
	
}

Other Snippets by Author