Quform Sub Label - CSS

Introduction

Quform is a powerful form builder plugin for WordPress that allows you to create advanced and complex forms using a simple drag and drop interface. One of the features of Quform is the ability to create sub labels for form fields. A sub label is a small label that appears below the main label of a form field. This can be useful for providing additional information or instructions to users filling out the form.

This tutorial will show you how to use the '.quform-sub-label' CSS selector to customize the appearance of sub labels in Quform forms.

CSS Code

To customize the appearance of sub labels in Quform forms, you can use the following CSS code:

.quform-sub-label {
    /* Enter your styles here */
}

This code targets the '.quform-sub-label' CSS selector, which is the class assigned to all sub labels in Quform forms.

Examples

Here are some examples of how you can use CSS to customize the appearance of sub labels in Quform forms:

Example 1: Changing the font color

.quform-sub-label {
    color: #333;
}

This code changes the font color of all sub labels to a dark gray color.

Example 2: Adding a background color

.quform-sub-label {
    background-color: #f4f4f4;
    padding: 5px;
}

This code adds a light gray background color to all sub labels and adds some padding to create visual separation between the sub label and main label.

Example 3: Changing the font size and weight

.quform-sub-label {
    font-size: 14px;
    font-weight: bold;
}

This code increases the font size and weight of all sub labels to create a more prominent visual hierarchy.

Conclusion

Using the '.quform-sub-label' CSS selector, you can easily customize the appearance of sub labels in Quform forms. With a little bit of CSS, you can make your forms more visually appealing and user-friendly.