FOSUserBundle : Overriding a Twig template : adding HTML elements - symfony

Question

I'm using FOSUserBundle, and I want to add a few HTML elements to the registration form. Actually, I did and I can see the added properties to the User class in my form. The issue is that I want those fields (first name, last name, date of birth, etc..) to get the look and feel of my CSS template (bootstrap).
I succeeded to do that for the login page by overriding it, since the HTML are explicitly declared. I want to do the same for the register page, however it seems confused to me, because here's the content of :
register.html.twig
{% extends "FOSUserBundle::layout.html.twig" %}
{% block fos_user_content %}
{% include "FOSUserBundle:Registration:register_content.html.twig" %}
{% endblock fos_user_content %}
register_content.html.twig
{% trans_default_domain 'FOSUserBundle' %}
{{ form_widget(form) }}
How can I access to the elements that I see in the page from this code ?

Answer 1

Try this
<div class="form-group {% if form.plainPassword.first.vars.errors %}has-error{% endif %}">
<label class="col-lg-2 control-label">Password:</label>
<div class="col-lg-5">
{{ form_widget(form.plainPassword.first, {'attr': {'class': 'form-control input-lg', 'placeholder': 'Enter password', 'required': 'required'}}) }}
{% for errorItem in form.plainPassword.first.vars.errors %}
<label class="control-label has-error" for="{{ form.plainPassword.vars.id }}">{{ errorItem.message }}</label>
{% endfor %}
</div>
<div class="col-lg-5">
{{ form_widget(form.plainPassword.second, {'attr': {'class': 'form-control input-lg', 'placeholder': 'Enter password again', 'required': 'required'}}) }}
</div>
</div>
It works for me.

Answer 2

Please see the official documentation here: "Overriding Forms". You will need to create a custom registration form type class, declare it as a service, and tell FOSUserBundle to use it.
To customize the template, see "Overriding Templates". In your case, you could create app/Resources/FOSUserBundle/views/Registration/register.html.twig.

Answer 3

replace form_widget(form) with something like:
form_widget(form.username)
form_widget(form.email)
form_widget(form.plainPassword)
form_widget(form.myField)
form_rest(form)
in your custom RegistrationFormType class, you could add a class to the username field with:
$builder
->add('username', null, array('label' => 'form.username', 'translation_domain' => 'FOSUserBundle', 'attr' => array('class'=>'myClass')))
also see form docs on rendering fields by hand: http://symfony.com/doc/current/book/forms.html#rendering-a-form-in-a-template

Answer 4

Here is how I addressed this problem using FOSUserBundle, PUGXMultiUserBundle & BraincraftedBoostrapBundle:
Per FOSUserBundle documentation, add a UserBundle as a child of FOSUser. Create a custom RegistrationFormType that includes the following, where only the attr and label_attr arrays are added:
$builder
->add('email', 'email', array(
'label' => 'form.email',
'translation_domain' => 'FOSUserBundle',
'attr' => array(
'placeholder' => 'E-mail',
),
'label_attr' => array(
'class' => 'sr-only',
)))
->add('username', null, array(
'label' => 'form.username',
'translation_domain' => 'FOSUserBundle',
'attr' => array(
'placeholder' => 'Username',
),
'label_attr' => array(
'class' => 'sr-only',
)))
->add('plainPassword', 'repeated', array(
'type' => 'password',
'options' => array('translation_domain' => 'FOSUserBundle'),
'first_options' => array('label' => 'form.password',
'attr' => array(
'placeholder' => 'Password',
),
'label_attr' => array(
'class' => 'sr-only',
)),
'second_options' => array('label' => 'form.password_confirmation',
'attr' => array(
'placeholder' => 'Confirm password',
),
'label_attr' => array(
'class' => 'sr-only',
)),
'invalid_message' => 'fos_user.password.mismatch',
))
;
The registration form template then looks like this:
<form action="{{ path('volunteer_registration') }}" method="POST" class="form-inline">
{{ bootstrap_set_style('form-inline') }}
{{ form_row(form.firstName) }}
{{ form_row(form.lastName) }}
{{ form_row(form.username) }}
{{ form_row(form.email) }}
<br/>
{{ form_row(form.plainPassword) }}
{{ form_row(form.plainPassword.second) }}
{{ bootstrap_set_style('') }}