USP Pro makes it easy to build forms exactly as needed. Every USP Form accepts any HTML tags, CSS, and JavaScript that may be required. This post shows an example of how it works by adding markup and CSS to display form fields in two columns. Estimated time to complete is about 5–10 minutes.

Step 1: Add the markup

Say you have a form where the following fields should be displayed in two columns:

[usp_name]
[usp_email]

To make it happen, first add a bit of markup to provide the structure:

<div class="cols">
	<div class="col col-1">[usp_name]</div>
	<div class="col col-2">[usp_email]</div>
</div>

Step 2: Add the styles

Next, you need to add some CSS to tell the browser to display the markup as desired:

<style>
	.cols { width: 100%; overflow: hidden; }
	.col { float: left; width: 50%; }
	#usp-pro .usp-form .col .usp-input[type=text] { width: 90%; }
</style>

Add that CSS code directly to your form, anywhere is fine — at the end of the form, after all other content is how I would do it. But anywhere will work. No edits are required, unless you want to go further, etc.

Pro Tip: Instead of adding the CSS directly to the form, which works but is not ideal in terms of web standards, performance, etc. Instead you can add the CSS via your (child) theme’s stylesheet. Or there are even plugins that enable you to add your own CSS/styles. For example, USP Pro provides an option to add your own custom styles, located under the CSS/JS tab.

Step 3: Make it responsive

After completing steps 1 and 2, save the changes on the form and preview on the front-end. The form fields will be displayed in two adjacent columns, should be lined up and looking good on desktop-sized monitors. But you still need to account for visitors who may be using smaller screens like mobile and pads. To make your columns display a little nicer for small screens, add the following CSS:

@media (max-width: 570px) {

	.col { float: none; width: 100%; }

}

What’s happening here. The outer @media query is targeting screens that have a maximum width of 570px. Then the inner selector simply collapses the two columns into a single column with two rows. It’s very simple but also very effective at “fixing” columns on small screens. Try testing this code by visiting your 2-column layout on small screens. Feel free to change the 570px @media screen width to whatever makes sense for your specific design.

More examples

If you have more fields to add to either column, you can do so like this (for example):

<div class="cols">
	<div class="col col-1">
		[usp_name]
		[usp_email]
		[usp_url]
	</div>
	<div class="col col-2">
		[usp_title]
		[usp_category]
		[usp_tags]
	</div>
</div>

Going further, here is how you would handle displaying some fields above/below the columns:

<p>Some opening text or a field, whatever.</p>

<div class="cols">
	<div class="col col-1">
		[usp_name]
		[usp_email]
		[usp_url]
	</div>
	<div class="col col-2">
		[usp_title]
		[usp_category]
		[usp_tags]
	</div>
</div>

<p>
	[usp_captcha]
	[usp_content]
</p>

No additional styles should be required, depending on the styles that are added by your theme, other plugins, and so on.