How to Display Contact Form 7 Fields Side-by-Side (columns)

Total includes a powerful grid system you can use for pretty much anything, this includes creating Contact Forms with multiple columns.

Understanding The Total Grid

The grid is very simple, it consists of a main wrapper that uses the “wpex-row” class with a negative left and right margin and inner columns that have left and right paddings equal to the negative margin of the main wrapper (the negative margin is used to compensate for the padding between columns).

Column Classes

The column classes are very easy to understand. To create a column simply add the “col” class and the “span_1_of_#” (where “#” is the number of columns) to any element. So for example if you want a grid with 2 columns you would use the classes “col span_1_of_2” for your columns. See the example below for a better explanation.

Example Grid HTML

Here is a basic grid example:

<div class="wpex-row clr">
    <div class="span_1_of_2 col col-1 clr">
        Column 1 Items
    </div>
    <div class="span_1_of_2 col clr">
        Column 2 Items
    </div>
</div>

Note: I also added the "clr" class to my columns, this is the class used to clear inner floats. I also used the class "col-1" to the first column which is used to clear floats above it.

Using The Grid In Your Contact Forms

Now that you hopefully understand how the grid works here is a screenshot of how you can use the grid classes in your Contact Form. The example below is using the Contact Form 7 plugin.

Code:

Result:

Last updated on March 9, 2015