CF7 Skins Ready provides a range of useful, pre-defined styles (like evenly spaced columns & and several fields on a single line) that can be used for all CF7 Skins forms.

You can use the Ready classes right away without having to write any of your own CSS.

In this article, we explain step-by-step how to build a form using the CF7 Skins Ready class column.

column

Displays enclosed elements in a vertical column

To use the column Ready Class you should first setup an ordered list LIST-OL for each column you want in a group of ordered lists.

You need to create a group of ordered lists for all the fields you want placed in columns. Then, add a column Ready Class to the parent element.

Tip: Most of the CF7 Skins Ready classes are applied to LIST-OL elements, while a few of them are applied to a LIST-LI element.

Example:

Let us have a look at an example form:

Instructions:

In this example we are looking to add the column CF7 Skins Ready class to a LIST-OL element enclosing group of LIST-LIelements.

1. Starting from initial template

When we begin, we see that we already have an initial template ready for us to use.

While we could use this template when building our forms, for this example form, we will delete most of the existing elements to get to a more general starting point.

Let us delete all three LIST-LI elements, as well as the paragraph and submit button present in the form. You should then have the following form:

2. Adding the column Ready class

You can assign the Ready class column to the LIST-OL item in 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: The Ready classes which are not permitted on a particular element are automatically disabled.

B. Use the edit dialog box

Click the edit icon on the LIST-OL element. Then, check the Ready class you want from the dialog box that appears in the sidebar.

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

3. Adding required form elements

Now, drag and drop the form element you want under the LIST-OL.

You can drag and drop elements from the sidebar to the Visual builder. If you do not know how to do this, read our CF7 Skins Visual tutorial.

A. First add another LIST-OL element under the present LIST-OL element.

You will see that a LIST-LI element will automatically be added, under each LIST-OL element. This is done to preserve correct structure of the code.

B. Now, add a Short Text element under this LIST-OL element.

C. Now, click on the edit icon and change its name and label using the Edit element sidebar.

D. Similarly, now add the other two form elements – a select item and another text field, to get to the following form:

E. Now, we create the second column of the form. Use the icon to the right of the inner LIST-LI element to duplicate it.

Tip: You can always use our duplicate feature to simply copy your fields, and the change the form element as you need.

F. Add one more Short Text element, and drag the SELECT element to place it after the three Short Text elements. Change all the names as needed as done earlier.

Tip: You can minimize sections you are not working to make is easier to focus on sections you are changing.

4. Add form legend and finish up

Finally, you need to edit the Legend at the top to name the form.

You are all done. Now, just press the Save Visual button. Here is the final form image you should have:

The last thing you need to do is to choose a style that you want. If you want more choices in themes, you can get a lot more selections with our Pro Version.

CF7 Form Code

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

You can still use the traditional CF7 form editor to build the form. To do that, you will have to append the CF7 Skins Ready class name “column” to the surrounding LIST-OL tag.

<fieldset>
	<legend>Column</legend>
	<ol class="column">
		<li>
			<ol>
				<li>Item 1 [text text-753]</li>
				<li>Dropdown Menu 1 [select select-327 include_blank default:1 "Option 1" "Option 2" "Option 3"]</li>
				<li>Item 2 [text text-153]</li>
			</ol>
		</li>
		<li>
			<ol>
				<li>Item 3 [text text-408]</li>
				<li>Item 4 [text text-184]</li>
				<li>Item 5 [text text-128]</li>
				<li>Dropdown Menu 2 [select select-274 include_blank default:1 "Option 1" "Option 2" "Option 3"]</li>
			</ol>
		</li>
	</ol>
</fieldset>

Tip:

1. Groups of 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.
2. CF7 Skins uses Fieldset, Legend & Lists as the foundation of all CF7 Skins forms.
3. It’s a really good idea to use tabs to keep all your fields indented to show how they are grouped.