New in Symfony 5.1: Form theme improvements

New form theme for Foundation 6

Contributed by Rémi Leclerc in #34880

Symfony provides several built-in form themes compatible with Bootstrap 3.x and 4.x and Foundation 5. In Symfony 5.1 we've added a new theme for the Foundation 6 framework.

First, link to the Foundation 6 assets from your application templates. Then, add foundation_6_layout.html.twig to the list of themes in the twig.form_themes config option and all your forms will be rendered with the Foundation 6 style.

Allow to translate Bootstrap input file

Contributed by Dominik Müller in #34278

When using a Bootstrap custom form field to render <input type="file"> fields, the text of the button to select files is always displayed in English ("Browse...") instead of in the current application language.

Bootstrap allows to translate this text into any language via SCSS variables defined in your application styles. For example:

1
2
3
4
5

$custom-file-text: (
    en: "Browse",
    es: "Elegir",
    de: "Auswählen"
);

In Symfony 5.1 we've updated the Bootstrap form theme to select the label of the current application language and fall back to English if it's not available.

Allow to customize collection entries

Contributed by Jules Pietri in #36088

The CollectionType form field allows to embed a series of forms in another form. You can customize each part of this form field using the same Twig blocks as for other fields:

1
2
3
4
5

{% block collection_row %} ... {% endblock %}
{% block collection_label %} ... {% endblock %}
{% block collection_widget %} ... {% endblock %}
{% block collection_help %} ... {% endblock %}
{% block collection_errors %} ... {% endblock %}

You can also customize specific collections instead of all of them. In Symfony 5.1 we've added new blocks so you can customize every part of each element of all collections:

1
2
3
4
5

{% block collection_entry_row %} ... {% endblock %}
{% block collection_entry_label %} ... {% endblock %}
{% block collection_entry_widget %} ... {% endblock %}
{% block collection_entry_help %} ... {% endblock %}
{% block collection_entry_errors %} ... {% endblock %}