How to Create a Stacked Form Layout

Overview

Would you like to create a stacked form layout for your WPForms? With a little CSS and some custom CSS classes you can easily create this layout and we’ll show you how.

Setup

WPForms by default already has built-in CSS classes to create column layouts for your forms but with a little custom CSS classes you can take that one step further by having, for example, your comment box floating right of all your other form fields.

1) Adding CSS Classes

In this tutorial, we’re going to float the Paragraph Text form field to the right of the other form fields. To begin, we’ll need to place the form field we want floating right at the top of the form builder.

Next, we’ll need to add the CSS classes to the appropriate fields. For the form field that needs to float right, open the Advanced Options on the Paragraph Text and in the CSS Classes add the CSS class wpforms-split-right.

Add the CSS class to float the comment box to the right of the other form fields

Now add the other form fields you want such as Name, Email Address, etc.

Just as with the Paragraph Text, open the Advanced Options and in the CSS Classes add the CSS class wpforms-split-left.

Add the CSS class to the remaining fields to float them to the left

2) Adding the CSS

Finally, you’ll need to add the CSS to your site.

@media only screen and (min-width: 600px) {

	.wpforms-split-left {  	
	  	float:left !important;
	  	width: 47% !important;
	  	clear: none !important;  
	}    

	.wpforms-split-right {
	  	float:right !important;
	  	width: 47% !important;
	  	clear: none !important;  
	}

}

Now when you view the form, you’ll see the Paragraph Text form field floating to the right of all the other form fields.

Now the comment box floats to the right of the other stacked form field layout.

And that’s all you need to complete the stacked form field layout. Would you like to force all form fields into a single column on mobile devices? Take a look at our tutorial on How to Display a Single Column on Mobile Devices.