Theming form elements

So far our form does not look too pretty. It's just a basic form without any fancy styles. Symfony2 provides a very flexible way to customize form rendering using Twig templates called form theme.

Form theme is just a regular Twig template but filled with blocks to render form rows, labels, inputs, errors, text areas, select boxes, checkboxes, and so on.

By default, Symfony2 uses a theme called form_div_layout.html.twig. The file with this form style is located in vendor/symfony/symfony/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig, and it is good to review this and see how it's organized. It is, of course, possible to change this easily.

Let's create our own theme based on the default theme. Create the app/Resources/views/Form/theme.html.twig file and fill it with the following content:

{% use 'form_div_layout.html.twig' %}

{%- block form -%}
    {{- form_start(form, { attr: { class: 'ui form small', novalidate...