There are two label positioning options available with the current CSS, left labels and above labels (default). You can easily swap between them simply by adding a new class on the outer wrapper of any Element, a Group wrapper or the Form outer wrapper.
Changing the label position
Here is an example of all three positions to add the label position class. The two class options are listed below.
Set the label position of all elements in the form
Add the class quform-labels-left to the quform-outer div. This will affect all elements in the form.
1 2 | <!-- To copy the form HTML, start here --> <div class="quform-outer quform-theme-light-rounded quform-labels-left"> |
<!-- To copy the form HTML, start here --> <div class="quform-outer quform-theme-light-rounded quform-labels-left">
Set the label position of all elements in a Group
Add the class quform-labels-left to the quform-group-wrap div. This will affect all elements in the Group.
1 2 | <!-- Begin 2 column Group --> <div class="quform-group-wrap quform-labels-left quform-group-style-plain quform-group-alignment-left"> |
<!-- Begin 2 column Group --> <div class="quform-group-wrap quform-labels-left quform-group-style-plain quform-group-alignment-left">
Set the label position of a single element
Add the class quform-labels-left to the quform-element div. This will affect only one element.
1 2 | <!-- Begin Text input element --> <div class="quform-element quform-labels-left quform-element-text"> |
<!-- Begin Text input element --> <div class="quform-element quform-labels-left quform-element-text">
Class names:
- Left labels:
quform-labels-left - Above labels:
quform-labels-above(default)
The current CSS supports 3 levels of label position inheritance into nested Groups, if you need more please contact support.