Contact Form 7 Form in Columns

Contact Form 7 (CF7) users often like to add evenly spaced columns to their forms.

However, many people find this task challenging because they don’t have a strong knowledge of HTML & CSS.

CF7 Skins Ready, an add-on for our popular Contact Form 7 Skins plugin, makes it possible to do this with no knowledge of HTML and CSS.

By the end of this article, you will be able to change a single column Contact Form 7 form into a two column form using the CF7 Skins Ready column.

Refer to CF7 Skins Ready – column if you’d like more detailed step-by-step instructions.

Set-up a CF7 form and styleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. it with CF7 Skins

1. Download and install the Contact Form 7 and Contact Form 7 Skins plugins if you haven’t already done that.

2. Create a new Contact Form 7 form or use an existing one.If you don’t know how to do this, see Create a form with CF7 Skins.

3. Select a CF7 Skins Template – in this case let’s start with the Contact templateTemplate CF7 Skins Templates are the structure of your form, providing the content and layout. They act as an easy to follow guide that can be adjusted to your particular needs..

4. Next copy the shortcode generated by Contact Form 7 and paste it in the page, post or widget where you want to display your form.

This form is made with CF7 Skins

In our example form above, we’ll organize the four form fields into two columns using the CF7 Skins Ready column class.

Arrange your form elements in columns

We want to arrange the first five fields as shown below:

Add Column class to your form fields

Let’s start with the first column, i.e. the Your Name & Email Address fields.

We need to assign the column Ready class to the appropriate LIST-OL items. You can do this one of two ways:

A. Use the dropdown menu to the right of the element

Click on the dropdown menu to the right of the LIST-OL element.

Click Ready Class to see a list of options. From the available list, choose column (your desired Ready class).

Tip: Ready classes which are not permitted on a particular element are automatically disabled.

B. Using the edit dialog box

Click on the edit icon on the LIST-OL element.

Then, check the Ready class you want from the dialog box that appears in the sidebar.

Tip: Wherever you work, changes will appear instantly in both locations.

Now, you can repeat this process for the second column, i.e. for the Website and Phone Number fields.

That’s it, you are all done! Now, just press the Save Visual button. Here is the final form you should have in the CF7 Skins Visual Editor:

Final Layout

After you’ve completed the form, the form elements under the same LIST-OL which has the column class will appear in the same column. You can see the final results below.

This form is made with CF7 Skins + CF7 Skins Ready

Note: On a mobile device, the fields may appear stacked on top of each other and not side by side. This is because CF7 Skins has responsive design, which makes contact forms easy to use and better-looking in mobile and handheld devices.

Tip: Fields within column are automatically evenly spaced by CF7 Skins Ready. If you want more control over individual field widths you should use the grid Ready Class.

CF7 Form Code

Your final form code should look something like this, at the end:

<fieldset>
	<legend>Contact Form</legend>
	<ol>
		<li>
			<ol class="column">
				<li>Your Name (required) [text* text-193]</li>
				<li>Email Address (required) [email* email-933]</li>
			</ol>
			<ol class="column">
				<li>Website [text* text-674]</li>
				<li>Phone Number [tel tel-881]</li>
			</ol>
			<ol>
				<li>Your Message [textarea textarea-427]</li>
			</ol>
		</li>
	</ol>
</fieldset>
[submit "Send"]
<p>
	* Required
</p>

Tip: You can still use the traditional CF7 form editor to build the form.

Have Questions or Need Help?

If you are using the free version of CF7 Skins and have any questions, get in touch via the CF7 Skins community and also the Contact Form 7 Support forum.

If you are using any of our CF7 Skins Add-ons, then Premium Email Support is available to deal with your questions and problems.

Set-up a CF7 form and styleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. it with CF7 Skins