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 in all CF7 Skins forms.

Add common stying options quickly & easily to all your CF7 Skins forms. You can use the Ready Classes right away without having to write any of your own CSS.

In this article, we will look at one of the CF7 Ready classes: grid, by using it to build an example form.

grid

Implements a strict form grid

CF7 Skins Ready has the grid class which is very useful. Using a grid is very powerful and quite intuitive once you get a handle on it.

There are three main parts of CF7 Skins Ready grid. We will go through all of these in this article.

Grid:

Grid: Grid class is used to create a grid ..

.. by giving a surrounding parent ol or div element a grid class to turn the enclosed area into a grid.

You can optionally add grid-hover, grid-lined to add these features to your grid.

Rows:

Rows: Your grid has a number of rows.

Fields:

Fields: Each row has a number of fields.

Tip: You can use the grid Ready Class to give you control over individual column widths within a form.

Example:

Let us have a look at an example form:

For this example, we are using grid, grid-hover and grid-lined classes.

Instructions:

In this example, we are looking to add the grid CF7 Skins Ready class to a LIST-OL element enclosing a group of LIST-LI elements. We will also add other grid data attributes to the elements as needed.

1. Starting from initial template

When we begin, we see that we already have a beginner template ready for us to use.

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

2. Adding the grid class

You can assign the Ready class grid to the LIST-OL item in one of two ways:

A. Use the dropdown to the right of the element

Click on the dropdown to the right of the LIST-OL element. Select Ready Grid and under it, choose grid (your desired ready class).

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

B. Use the edit dialog box to the right

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.

For this example form, also select the Grid Hover and Grid Lined classes.

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

3. Adding rows

The rows are always added under the grid LIST-OL element. Under the previous LIST-LI element, add another LIST-OL element.

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.

You will see that a LIST-LI element will automatically be created for you when you add any form element under a LIST-OL element.

Now, we assign this LIST-OL the Grid Row data-attribute. Again, you can do this by either using the dropdown, or the checkbox, as mentioned above.

4. Adding fields

Now, the field class must be added under the Row element. But unlike the other two, you should add the Row class to the LIST-LI element rather than the LIST-OL element.

Additionally, you need to also select the field span for the field. Again, you can do this either using the dropdown or the edit side dialog.

Tip: You will see that the row span automatically updates after you select a field span. So you do not need to worry about balancing the grid and row spans.

5. Adding form elements

Now that you have added all three of grid, row, and field classes, add a form element to the form.

Under the LIST-LI element that has the field class, add a Text (Short Text) element.

6. Adding some more rows

Now use the approach above to build the next four rows in the example form.

First, repeat the process to add the two grid data-attributes – row and field.

You can either do it step by step as shown above, or simply use the duplicate feature to copy the entire LIST-LI element and everything under it.

You should have a form that looks something like this:

Tip: Remember that the grid class doesn’t need to be added again as one LIST-OL with grid class works for the entire form.

Now, just add another LIST-LI element under the LIST-OL with the row class.

Now, assign the field class to it (or use duplicate tool again to achieve this). You will see that the row span of the LIST-OL with the row class automatically updates to 2.

Similarly, you can repeat for the process for as many form elements as you want. Repeat the process for three, four, and five rows to achieve the first half of the form.

6. Building more complex rows

The rows we built until this point are fairly simple, with each field having 1 span each. But CF7 Skins Ready offers the flexibility to have fields with different spans in the same row, as you can see in the second half of the example form.

Let us try and build the second to last row of the example field.

Tip: To avoid confusion when building complex forms like these, you can use the collapse tool to hide the details of the elements inside other elements using the button to the left of each element.

Using the steps mentioned above, create a LIST-OL with a grid class, a LIST-LI with a row class under it, and finally a LIST-LI with a field class under the inner LIST-OL.

You can make use of our duplicate feature to simply copy the fields from above, or do it manually using either the dropdown to the right of the element, or the checkboxes in the edit dialog box as shown above.

Now, duplicate the LIST-LI element so that you have three LIST-LI elements.

The top half of the form is not shown in the image for simplicity.

Now, once you have the required LIST items, click the edit element for the first LIST-LI, and change the span to 2. The LIST-OL row will automatically adjust to make room for your select span. It’s that simple. It should look something like this:

The top half of the form is not shown in the image for simplicity.

That’s it, your row is done. You can now repeat the process to build other parts of the form.

Tip: Don’t worry if you accidentally put rows in the wrong order. You can use the drag button to get things in the right place.

7. Finishing Touches

You are all done. Now, just press the Save Visual button.

Tip: 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.

8. Form Code

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

Form Code:

<fieldset>
	<legend>Grid Pro</legend>
	<ol class="grid">
		<li>
			<ol class="grid-row" data-row-span="1">
				<li class="grid-field" data-field-span="1">Field 1 [text text-580]</li>
			</ol>
		</li>
		<li>
			<ol class="grid-row" data-row-span="2">
				<li class="grid-field" data-field-span="1">Field 1 [text text-938]</li>
				<li class="grid-field" data-field-span="1">Field 2 [text text-199]</li>
			</ol>
		</li>
		<li>
			<ol class="grid-row" data-row-span="3">
				<li class="grid-field" data-field-span="1">Field 1 [text text-314]</li>
				<li class="grid-field" data-field-span="1">Field 2 [text text-673]</li>
				<li class="grid-field" data-field-span="1">Field 3 [text text-657]</li>
			</ol>
		</li>
		<li>
			<ol class="grid-row" data-row-span="4">
				<li class="grid-field" data-field-span="1">Field 1 [text text-974]</li>
				<li class="grid-field" data-field-span="1">Field 2 [text text-796]</li>
				<li class="grid-field" data-field-span="1">Field 3 [text text-892]</li>
				<li class="grid-field" data-field-span="1">Field 4 [text text-980]</li>
			</ol>
		</li>
		<li>
			<ol class="grid-row" data-row-span="5">
				<li class="grid-field" data-field-span="1">Field 1 [text text-957]</li>
				<li class="grid-field" data-field-span="1">Field 2 [text text-624]</li>
				<li class="grid-field" data-field-span="1">Field 3 [text text-612]</li>
				<li class="grid-field" data-field-span="1">Field 4 [text text-547]</li>
				<li class="grid-field" data-field-span="1">Field 5 [text text-973]</li>
			</ol>
		</li>
		<li>
			<ol class="grid-row" data-row-span="3">
				<li class="grid-field" data-field-span="2">Field 1 [text text-814]</li>
				<li class="grid-field" data-field-span="1">Field 2 [text text-282]</li>
			</ol>
		</li>
		<li>
			<ol class="grid-row" data-row-span="3">
				<li class="grid-field" data-field-span="1">Field 1 [text text-427]</li>
				<li class="grid-field" data-field-span="2">Field 2 [text text-490]</li>
			</ol>
		</li>
		<li>
			<ol class="grid-row" data-row-span="4">
				<li class="grid-field" data-field-span="1">Field 1 [text text-596]</li>
				<li class="grid-field" data-field-span="2">Field 2 [text text-824]</li>
				<li class="grid-field" data-field-span="1">Field 3 [text text-676]</li>
			</ol>
		</li>
		<li>
			<ol class="grid-row" data-row-span="4">
				<li class="grid-field" data-field-span="2">Field 1 [text text-165]</li>
				<li class="grid-field" data-field-span="1">Field 2 [text text-675]</li>
				<li class="grid-field" data-field-span="1">Field 3 [text text-551]</li>
			</ol>
		</li>
		<li>
			<ol class="grid-row" data-row-span="4">
				<li class="grid-field" data-field-span="3">Field 1 [text text-943]</li>
				<li class="grid-field" data-field-span="1">Field 2 [text text-331]</li>
			</ol>
		</li>
	</ol>
	[submit "Submit"]
</fieldset>
<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus pharetra vehicula. Aliquam pellentesque mi non scelerisque placerat.
</p>

Tip:

1. You can use the CF7 Skins Pro Grid Pro Template to help you get started building a CF7 Skins form based on a strict grid. Then you can copy, add, remove and alter fields to customize the form to suit your needs.
2. You can use the grid Ready Class to give you control over individual column widths within a form.