There are a number of common stying options that many Contact Form 7 (CF7) users like to add to their forms, like evenly spaced columns & and several fields on a single line. However adding these styles requires detailed HTML & CSS knowledge which is beyond the current skills of many WordPress users.

CF7 Skins Ready, an add-on for our popular Contact Form 7 Skins plugin, provides a range of useful, pre-defined styles that can be used in all CF7 Skins forms.

This article will show you how to make a Contact Form 7 form with the form fields placed in vertical columns using the CF7 Skins Ready Add-on for CF7 Skins.

Before you begin

But before we get started, there are a few things you need to know.

  1. How to set up a Contact From 7 form – Learn more.
  2. A basic understanding of CSS class selectors – Learn more.

By the end of this article you should be able to change a single column Contact Form 7 form styled with CF7 Skins into a two column form.

Making a two column form

The images below show two forms styled with CF7 Skins. Form One is a regular single column Contact Form 7 form styled with CF7 Skins. Form Two shows the final results after adding CF7 Skins Ready column class to the form.

Form OneForm Two

View larger versions of Form One and Form Two

Set-up a CF7 form and style it with CF7 Skins

Download and install the Contact Form 7 and CF7 Skins plugins if you haven’t already done that. Create a new Contact Form 7 form or use an existing one. If both Contact Form 7 and CF7 Skins are installed on your WordPress site, you should see the CF7 Skins template and styles below the Contact Form 7 user interface in the WordPress admin.

cf7skins-ui

See CF7 Skins User Interface for a more comprehensive overview of the CF7 Skins interface.

Select the CF7 Skins Template and Style of your choice, edit the text generated by CF7 Skins in the form tab of Contact Form 7 to suit your needs and click Save.

In this tutorial, we chose the Contact Template and Choc Shake Style of CF7 Skins.

Now copy the short-code generated by Contact Form 7 and paste it in the page, post or widget where you want to display your form. The result should be as shown below.

Contact Form

* Required


Tip: You can use Firebug or Chrome Dev Tools to see how we’ve built this form.

Add CF7 Skins Ready Add-on

CF7 Skins Ready lets you choose from several class options including single-line, column, box & grid to display in your Contact Form 7 forms.

See CF7 Skins Ready Classes for an explanation of the range of pre-defined styles that can be used in all CF7 Skins forms.

Once CF7 Skins Ready is installed, you are now able to make use of its rich CSS class system to display your form in various styles.

At this point you should read our CF7 Skins Ready Classes documentation for a comprehensive explanation on how CF7 Skins Ready works, if you haven’t already.

In this tutorial, we’ll focus on using the CF7 Skins Ready column class.

See CF7 Skins Ready Classes Demo for detailed examples of using other CF7 Skins Ready classes in Contact Form 7 forms.

Add the Column class to your form tags

In our example we have a five input field form. We’ll organize four form fields namely, “Your Name”, “Email Address”, “Website” and “Phone Number” into two columns using the CF7 Skins Ready column class.

Now that we have a fair idea about how CF7 Skins Ready works, lets go ahead and make our form a two column form by adding the column class to the form elements as shown in the code below:

<fieldset>
	<legend>Contact Form</legend>
	<ol class="column">
		<ol>
			<li> Your Name* [[text* cf7s-name]] </li>
			<li> Email Address* [email* cf7s-email-address] </li>
		</ol>
		<ol>
			<li> Website [url my-url] </li>
			<li> Phone Number [tel my-tel] </li>
		</ol>
	</ol>
	<ol>
		<li> Your Message [textarea cf7s-message] </li>
	</ol>

	[submit "Submit"]
	<p>* Required</p>
</fieldset>

If you are having trouble understanding how the CF7 Skins Ready column class works in the above code sample, you can read our CF7 Skins Ready Classes documentation for a comprehensive explanation on how CF7 Skins Ready works. You can come back to this tutorial when you’ve done that.

The result of the class=”column” in the ordered list in the code above is a nice clear form with some of the fields placed in two columns.

Contact Form

* Required

Tip: You can use Firebug or Chrome Dev Tools to see how we’ve made this 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 the premium version, CF7 Skins Pro, then Premium Email Support is provided (manned by paid staff) to deal with your questions and problems.

%d bloggers like this: