Professional Looks in Symfony2

I am having a problem as you can see in this image:

Whenever the error messages appear my form which is neatly woven turns into a mess.

<fieldset> 
    <legend>1. Personal Details</legend> 
        <form action="/web/app_dev.php/" method="POST" novalidate>
           <label for="personaldetails_familyName">Family Name :</label>
            <ul><li>Please enter your Family Name</li></ul>                                                              
            <input type="text" id="personaldetails_familyName" name="personaldetails[familyName]" required="required" value="" class="input-text" />
           <label for="personaldetails_firstName">Family Name :</label>
           <ul><li>Please enter a First Name</li></ul>
           <input type="text" id="personaldetails_firstName" name="personaldetails[firstName]" required="required" value="" class="input-text" /><br style="clear: left;"> 
        </form>
</fieldset>

So I have two proposals which would result the same at then end I am told. First one is to do something like this:

http://pastie.org/2088918

<div class="formErrors clearBoth">
    <div class="left">
        {{ form_errors(form.addressStreet) }}
    </div>
    <div class="left">
        {{ form_errors(form.addressCity) }}
    </div>
    <div class="left">
    </div>
    <div class="left">
        {{ form_errors(form.addressZipcode) }}
    </div>
</div>
<div class="fields clearBoth">
    <div class="left">
        {{ form_label(form.addressStreet, 'Street Address: ') }}<br>
        {{ form_widget(form.addressStreet) }}
    </div>
    <div class="left">
        {{ form_label(form.addressCity, 'City: ') }}<br>
        {{ form_widget(form.addressCity) }}
    </div>
    <div class="left">
        {{ form_label(form.addressState, 'State: ') }}<br>
        {{ form_widget(form.addressState) }}
    </div>
    <div class="left">
        {{ form_label(form.addressZipcode, 'Zipcode: ') }}<br>
        {{ form_widget(form.addressZipcode) }}
    </div>
</div>

But then on a second thought I think the error row that is rendered needs to be more flexible, what happens if I want to highlight with different class color the input box in addition to having a message at the top for this. Then the error needs to be embedded inside the row field element and what if both, like for a tooltip effect with jquery?

I just checked and my template has this styling for warning or erro messages:

<p class="msg error">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Ok so now I got nailed down the errors on a different section so that the messages will not mess my two column tableless form. Now it is time to do what I said above and that is to insert a class into the label field for when triggering errors.

So after all I ended up first taking off the errors label from within the field_row block:

{% block field_row %}
{% spaceless %}
        {{ form_label(form) }}
        {{ form_widget(form) }}
{% endspaceless %}
{% endblock field_row %}

Yep no sign of form_errors(form)!

Then I added my p tag with its corresponding class msg_error here:

{% block field_errors %}
{% spaceless %}
    {% if errors|length > 0 %}
        {% for error in errors %}
            <p class="msg error">
               {{ error.messageTemplate|trans(error.messageParameters, 'validators') }}
            </p>
        {% endfor %}
    {% endif %}
{% endspaceless %}
{% endblock field_errors %}

Now we proceed to insert the class error_class upon the condition if there are errors for the given field, that we do on the field_label block to highlight in red the label:

{% block field_label %}
{% spaceless %}
    <label for="{{ id }}"{% for attrname,attrvalue in attr %} {{attrname}}="{{attrvalue}}"{% endfor %} class="{% if errors|length > 0 %}error_class{% endif %}">{{ label|trans }}</label>
{% endspaceless %}
{% endblock field_label %}

I think I overrode field_label and form_label in the same way just in case. You can comment if this makes or not a difference but we have already accomplished what we wanted. Enjoy more professional forms like the one here: