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.

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;
}

Step 4

Save the form and check out the result on the front-end 🙂