Plugin Planet

Premium WordPress Plugins

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.

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.

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.