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).
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><!-- .span_1_of_2 --> <div class="span_1_of_2 col clr"> Column 2 Items </div><!-- .span_1_of_2 --> </div><!-- .wpex-row -->
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.