Home Admin

Embed Snippet on Your Site

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

Creating Multi-Column Form Layouts With CSS Classes

If you use a multi-column layout with conditional fields, any fields that are conditionally shown will be aligned to the left. To keep these fields aligned according to your preferred layout, you can use this CSS snippet.

WPForms Team PRO

50+

Code Preview

Comments

css


	`/*`
	`Multi-column layout with conditional fields`

	`Original doc link: https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/`

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

	`.wpforms-conditional-hide {`
	`display: block !important;`
	`height: 0 !important;`
	`padding: .01px !important;`
	`}`

	`.wpforms-conditional-hide * {`
	`visibility: hidden !important;`
	`}`

Other Snippets by Author

Assign User Role Conditionally in WordPress

This snippet works with WPForms and the User Registration Add-on. It lets you assign user roles…

Preview Use Snippet

WPForms Team PRO

<10

Generate and Send Invoice Number to Authorize.Net

This snippet generates and sends a unique invoice number to Authorize.Net for completed payments in WPForms

Preview Use Snippet

WPForms Team PRO

<10

Setting the Default Address Scheme to International

This snippet is used to update the default behavior of the Address field in WPForms. This…

Preview Use Snippet

WPForms Team PRO

<10

Adding Material Design to Your Form Fields Using CSS

#wpforms-form-697 { float: left; width: 100%; text-align: center; margin: 30px auto 30px auto; } #wpforms-form-697 .wpforms-field…

Preview Use Snippet

WPForms Team PRO

<10

How to Add Material Design to Your Form Fields Using CSS

/** * Move label position from above form field to below * * @link https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/ */…

Preview Use Snippet

WPForms Team PRO

<10

Creating a Form With Floating Labels

form#wpforms-form-1682 { position: relative; } form#wpforms-form-1682 .floating label:nth-of-type(2) { display: none; } .floating input { position:…

Preview Use Snippet

Embed Snippet on Your Site

Creating Multi-Column Form Layouts With CSS Classes

Comments

Add a Comment Cancel Reply