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.

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