How to render a form with different themes in the same template in symfony 2

Question

I want to customize form rendering in Symfony. I checked the docs and found out that its possible to set the theme for rendering with the {{ form_theme }} tag. This works perfectly if only one form is present at the time but if you have multiple forms in the same template it doesn’t work.

A simple example from my index.html.twig

{% extends 'base.html.twig' %}
{% block body %}

<h1>Hello Form 1</h1>
{% form_theme form1 'bootstrap_3_layout.html.twig'  %}

{{  form_start( form1 ) }}
{{  form_end( form1 ) }}

<h1>Hello Form 2</h1>
{% form_theme form2 'bootstrap_3_horizontal_layout.html.twig'  %}

{{  form_start( form2 ) }}
{{  form_end( form2 ) }}

{% endblock %}

As you can see there are two form variables and I want form1 to be rendered with 'bootstrap_3_layout.html.twig' and form2 with 'bootstrap_3_horizontal_layout.html.twig'. I don't know the Twig internals but I think the themes override their block definitions.

The result looks like this

So my questions is how can I render the forms with the given themes not interfering each other. Is there any way to render a form in a separate clean twig process?

I tried a Twig Extension with a custom function but it seems the function is using the same Twig_Environment. I also tried a sub request with {% render }% but that doesn't work either.

Answer 1

Twig solution

If you only want to use the horizontal class for a form you can add it to form_start():

{% extends 'base.html.twig' %}
{% block body %}

<h1>Hello Form 1</h1>
{% form_theme form1 'bootstrap_3_layout.html.twig'  %}

{{ form_start( form1 ) }}
{{ form_end( form1 ) }}

<h1>Hello Form 2</h1>
{% form_theme form2 'bootstrap_3_horizontal_layout.html.twig'  %}

{{ form_start(form2, {'class': 'horizontal', 'attr': {'class': 'horizontal'}}) }}
{{ form_end( form2 ) }}

{% endblock %}

Thnaks to Ahmed Siouani for his answer.

HTML + CSS solution

I suggest you to enclose each Twig tag {{ form() }} in a <div> with a class, it will allow you to add specific CSS rules. See an example below:

/* display the <label> in div.form_1 as red */
div.form_1 label {
  color: Red;
}

/* Email field in div.form_2 will only have a width of 50% */
div.form_2 input[type=email] {
  width: 50%;
}
/* Password field in div.form_2 will have a left margin and will be narrower */
div.form_2 input[type=password] {
  margin-left: 5em;
  width: 30%;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="well">
  <h2>Default form</h2>
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
  </form>
</div>

<div class="form_1 well">
  <h2>Form 1</h2>
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
  </form>
</div>

<div class="form_2 well">
  <h2>Form 2</h2>
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
  </form>
</div>