Tutorials

Placing labels above form fields

Using our Custom Contact Forms extension for Magento, it's possible to display the form field labels above the fields by using some custom CSS.

label_above

Step 1#

Navigate to your contact form and click on the "Front-end Style" tab

Step 2#

Add the value "labelabove" in the "Custom CSS Class(es)" field

Step 3#

Add the following CSS snippet to the "Custom CSS" field:

.labelabove .form-group>div.col-md-6,
.labelabove .form-group>label.col-md-3.control-label
{
    width: 100%!important;
    text-align: left!important;
}

css

Step 4#

Save the form and check out the result on the front-end :)