Most complex layouts can be achieved using the Groups. For more advanced layouts you will need to modify your own CSS. Labels also have two options of being above or to the left of the input element.
Adding a group and configuring
Here is an example of a Group HTML layout structure. This example has elements floating left in 2 columns and two rows, it also has a bordered style. The changeable classes are described below the code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-left"> <div class="quform-group-elements"> <div class="quform-group-row quform-group-row-2cols"> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> </div> <div class="quform-group-row quform-group-row-2cols"> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> </div> </div> </div> <!-- End 2 column Group --> |
<!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-left"> <div class="quform-group-elements"> <div class="quform-group-row quform-group-row-2cols"> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> </div> <div class="quform-group-row quform-group-row-2cols"> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> </div> </div> </div> <!-- End 2 column Group -->
The changeable classes in the code above are quform-group-style-bordered
, quform-group-alignment-left
and quform-group-row-2cols
.
Setting the group column alignment
You can choose to either have the columns in your Group all using proportional space or you can choose to have the side by side using their true width.
Add the class quform-group-alignment-proportional
or quform-group-alignment-left
to the Group wrapper div which has the class name quform-group-wrap
. See the examples below.
Left aligned group elements
Add the class quform-group-alignment-left
1
2 | <!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-left"> |
<!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-left">
Proportionally aligned group elements
Add the class quform-group-alignment-proportional
1
2 | <!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-proportional"> |
<!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-proportional">
Plain groups and bordered group style
You can choose to have a pre designed bordered box around your group or you can have the group plain – with no styles.
Add the class quform-group-style-bordered
or quform-group-style-plain
to the Group wrapper div which has the class name quform-group-wrap
. See the examples below.
Bordered group class
Add the class quform-group-style-bordered
1
2 | <!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-proportional"> |
<!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-proportional">
Plain group class
Add the class quform-group-style-plain
1
2 | <!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-plain quform-group-alignment-proportional"> |
<!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-plain quform-group-alignment-proportional">
Changing label position within a Group
If you like you can choose to change the label style for all elements within a certain group. You can also change this for any nested Groups.
Add the class quform-labels-above
or quform-labels-left
to the Group wrapper div which has the class name quform-group-wrap
. See the examples below.
Labels above in Group
Add the class quform-labels-above
1
2 | <!-- Begin 2 column Group --> <div class="quform-group-wrap quform-labels-above quform-group-style-bordered quform-group-alignment-proportional"> |
<!-- Begin 2 column Group --> <div class="quform-group-wrap quform-labels-above quform-group-style-bordered quform-group-alignment-proportional">
Lables left in Group
Add the class quform-labels-left
1
2 | <!-- Begin 2 column Group --> <div class="quform-group-wrap quform-labels-left quform-group-style-bordered quform-group-alignment-proportional"> |
<!-- Begin 2 column Group --> <div class="quform-group-wrap quform-labels-left quform-group-style-bordered quform-group-alignment-proportional">
Note: You can override the labels within a group for a particular element by adding one of the same classes to the element wrapper (quform-element
). Like this:
1 | <div class="quform-element quform-element-text quform-labels-left"> |
<div class="quform-element quform-element-text quform-labels-left">
Add a Group Title, Description or both.
Add the following HTML directly under the div with class name quform-group-elements
.
1 2 3 4 | <div class="quform-group-title-description-wrap"> <div class="quform-group-title">Title</div> <p class="quform-group-description">Description</p> </div> |
<div class="quform-group-title-description-wrap"> <div class="quform-group-title">Title</div> <p class="quform-group-description">Description</p> </div>
Simply remove the line for Title or Description if it is not required for your Group.
Creating columns
You can create up to 5 columns with the existing CSS. To create columns you first need to decide how many you would like. For this example I will make a 3 column layout with 2 rows.
You need to locate (or create) a quform-group-row
wrapper which you will apply a column number class on it, for example; quform-group-row-2cols
(full list shown below).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!-- Begin 3 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-left"> <div class="quform-group-elements"> <div class="quform-group-row quform-group-row-3cols"> <!--Add three elements here--> </div> <div class="quform-group-row quform-group-row-3cols"> <!--Add three elements here--> </div> </div> </div> <!-- End 3 column Group --> |
<!-- Begin 3 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-left"> <div class="quform-group-elements"> <div class="quform-group-row quform-group-row-3cols"> <!--Add three elements here--> </div> <div class="quform-group-row quform-group-row-3cols"> <!--Add three elements here--> </div> </div> </div> <!-- End 3 column Group -->
Note: Add the same number of form elements as columns to ensure the code works correctly.
List of column classes
- quform-group-row-1cols
- quform-group-row-2cols
- quform-group-row-3cols
- quform-group-row-4cols
- quform-group-row-5cols
Nested Groups
You can add Groups inside Groups simply by adding the new group HTML inside the quform-group-row
, just like you would an element.
Here is an example of a two column Group with another two column Group nested in the 2nd column.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-proportional"> <div class="quform-group-elements"> <div class="quform-group-row quform-group-row-2cols"> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> <!-- Nested Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-proportional"> <div class="quform-group-elements"> <div class="quform-group-row quform-group-row-2cols"> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> </div> </div> </div> <!-- Nested Group --> </div> </div> </div> <!-- End 2 column Group --> |
<!-- Begin 2 column Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-proportional"> <div class="quform-group-elements"> <div class="quform-group-row quform-group-row-2cols"> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> <!-- Nested Group --> <div class="quform-group-wrap quform-group-style-bordered quform-group-alignment-proportional"> <div class="quform-group-elements"> <div class="quform-group-row quform-group-row-2cols"> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> <!-- Begin Text input element --> <div class="quform-element quform-element-text"> ... </div> <!-- End Text input element --> </div> </div> </div> <!-- Nested Group --> </div> </div> </div> <!-- End 2 column Group -->