It is possible to change the way a form element is rendered in a Symfony 2 project by overriding the Twig template. You can do this on a per-form basis by including the form element’s block right in your view, or you can make the change application-wide. The Twig blocks for form elements are defined in the Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig file. This is a great resource to see how the form elements are currently defined, and to identify the Twig block that needs to be overridden. Symfony details this process in the Cookbook. As an example, let’s change how form errors are rendered in a Symfony 2 project by adding a <div> container to wrap the error messages.

Update All Forms

In the form_div_layout.html.twig file, form errors are rendered in the form_errors block:

{# Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig #}

{% block form_errors %}
{% spaceless %}
    {% if errors|length > 0 %}
    <ul>
        {% for error in errors %}
            <li>{{ error.message }}</li>
        {% endfor %}
    </ul>
    {% endif %}
{% endspaceless %}
{% endblock form_errors %}

To override this block application-wide, create a file in your bundle’s Resources/views/Form directory called fields.html.twig. Copy the form_errors block and make adjustments as necessary:

{# AcmeBundle/Resources/views/Form/fields.html.twig #}

{% block form_errors %}
	{% spaceless %}
		{% if errors|length > 0 %}
		<div class="alert alert-danger">
			<ul>
				{% for error in errors %}
					<li>{{ error.message }}</li>
				{% endfor %}
			</ul>
		</div>
		{% endif %}
	{% endspaceless %}
{% endblock form_errors %}

As you can see, we added the <div> wrapper around the errors <ul> with Twitter Bootstrap alert classes.

To let Symfony know about the new file that contains Twig elements, register the new file in the app/config/config.yml file like this:

# app/config/config.yml

twig:
    form:
        resources:
            - 'AcmeBundle:Form:fields.html.twig'

Symfony will now render form errors with the new form_errors Twig block. This method applies to overriding the way all form elements are rendered, so you can change how a checkbox is rendered, or add a custom class to all of your <input> fields.

Update Some Forms

You can also customize a number of forms without changing how every form is rendered. To do this, simply create the fields.html.twig file as shown above and instead of configuring it in the config.yml file, add a form theme that references the file in your form’s template file like this:

{# Template file that renders a form #}

{% form_theme acme_form 'AcmeBundle:Form:fields.html.twig' %}

This will only override the errors on forms that have the form_theme applied. There is a way to override a form block inside the current twig template by placing the twig form element block in the current file and applying the form theme _self to the form like this:

 {% form_theme acme_form _self %}

This final option does not allow your customized form element to be reused so use one of the first two methods if you want a reusable theme.

Check out the Cookbook for more details on this.