Changing layout using Groups

Quform PHPCustomisationStyling, themes & layoutChanging layout using Groups

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 -->
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy