Question

Trying to customize Symfony2 form to produce html code looking like the following example:

<div class="cform_box">
  <div><label>First name:</label></div>
  <input name="" type="text" id="" class="TextBox" />
</div>
<div class="cform_box" style="height:auto">
   <div><label>Message:</label></div>
  <textarea name="" rows="10" cols="38" id="" class="TextBox" style="height:100px;" /></textarea>
</div>

My form code :

$builder->add('name', 'text', array('label' =>'First Name:'));
$builder->add('message', 'textarea', array('label' =>'Message:'));

The template contact.html.twig:

{% form_theme form _self %}
{% block text_widget %}
{% spaceless %}
    <input type="text" class='TextBox' {% if value is not empty %}value="{{ value }}"     {% endif %}/>
{% endspaceless %}
{% endblock %}
{% block textarea_widget %}
{% spaceless %}
    <div class="textarea_widget">
        <textarea rows="10" cols="38" id="{{ id }}" class="TextBox" style="height:100px;">{{ value }}</textarea>
    </div>
{% endspaceless %}
{% endblock textarea_widget %}

<div class="cform_box">    
    <div>{{ form_label(form.name) }}</div>{{ form_widget(form.name) }}
</div>
<div class="cform_box" style="height:auto">
    <div>{{ form_label(form.message) }}</div>{{ form_widget(form.message) }}
</div>

I am getting either Variable "value" does not exist in contact.html.twig or Variable "id" does not exist in form_div_layout.html.twig if I comment {% block text_widget %} out.

I’m using Symfony 2.0.15

Answer 1

The block named ‘text_widget’ does not exist in Symfony2 forms helpers. It’s a field_widget with type = 'text'.

You should add class “textBox” from your php Form definition, with ‘attr’ :

$builder->add('name', 'text', array('label' =>'First Name:', 'attr' => array('class' => 'textBox')));
$builder->add('message', 'textarea', array('label' =>'Message:', 'attr' => array('class' => 'textBox')));

Or in your form_theme file :

{% block field_widget %}
{% spaceless %}
    {% if type == 'text' or type == 'textarea' %}
        {% set attr = attr|merge({'class': attr.class|default('') ~ ' textBox'}) %}
    {% endif %}
    {% set type = type|default('text') %}
    <input type="{{ type }}" {{ block('widget_attributes') }} value="{{ value }}" />
{% endspaceless %}
{% endblock field_widget %}