Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Admin / Centering a form
Duplicate Snippet

Embed Snippet on Your Site

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
400+
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;
}
	
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet