how to overriding fosuserbundle registration form style

Question

I want to use bootstrap style apply in fosuserbundle registration form.and the login cant overriding,but because of registration form use "{{ form_widget(form) }}",so I can't overriding it,I use symfony2.2,I also test use form theme,like this

{% block form_row %}
{% spaceless %}
<div class="control-group">
    {{ form_label(form, label|default(null),{ 'attr': {'class': 'control-label'} }) }}
    {{ form_errors(form) }}
    <div class="controls">{{ form_widget(form) }}</div>
</div>
{% endspaceless %}
{% endblock form_row %}

and

in form template the code is

{% form_theme form with '@user/form/fields.html' %}
{% trans_default_domain 'FOSUserBundle' %}
<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register form-horizontal form-box">
    {{ form_widget(form) }}
    <div>
        <input type="submit" value="{{ 'registration.submit'|trans }}" />
    </div>
</form>

but it output this

  |form action="/register/"  method="POST" class="fos_user_registration_register form-horizontal form-box"|
        |div id="fos_user_registration_form"|
            |div class="control-group"|
                |label for="fos_user_registration_form_username" class="required"|用户名：|/label|
                |div class="controls"|
                    |input type="text" id="fos_user_registration_form_username" name="fos_user_registration_form[username]" required="required" /|    
                |/div|
            |/div|
            |div class="control-group"|
                |label for="fos_user_registration_form_email" class="required"|电子邮箱：|/label|
                |div class="controls"|
                    |input type="email" id="fos_user_registration_form_email" name="fos_user_registration_form[email]" required="required" /|    
                |/div|
            |/div|
            |div class="control-group"|
                |label for="fos_user_registration_form_plainPassword_first" class="required"|密码：|/label|
                |div class="controls"|
                    |input type="password" id="fos_user_registration_form_plainPassword_first" name="fos_user_registration_form[plainPassword][first]" required="required" /|    
                |/div|
            |/div|
            |div class="control-group"|
                |label for="fos_user_registration_form_plainPassword_second" class="required"|确认密码：|/label|
                |div class="controls"|
                    |input type="password" id="fos_user_registration_form_plainPassword_second" name="fos_user_registration_form[plainPassword][second]" required="required" /|    
                |/div|
            |/div|
            |input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="622a4c73bfc48b4944c5b97ff4fc46c7fa8e9e91" /|    
        |/div|
        |div|
            |input type="submit" value="注册" /|    
        |/div|
    |/form|

its not what I want,so what I can do for it?thx!

Answer 1

Give it a try with:

https://symfony.com/doc/master/bundles/FOSUserBundle/overriding_forms.html FOS User bundled moved the documentations to symfony.com docs.

edit: updated link

Answer 2

You can render each part of the form instead of form_widget(form)

like

{% form_theme form with '@user/form/fields.html' %}

{{ form_errors(form) }}

{{ form_label(form.username) }}
{{ form_widget(form.username) }}
{{ form_errors(form.username) }}

{{ form_label(form.email) }}
{{ form_widget(form.email) }}
{{ form_errors(form.email) }}

{{ form_label(form.plainPassword.first) }}
{{ form_widget(form.plainPassword.first) }}
{{ form_errors(form.plainPassword.first) }}

{{ form_label(form.plainPassword.second) }}
{{ form_widget(form.plainPassword.second) }}

{{ form_rest(form) }}

More info is here:

https://github.com/FriendsOfSymfony/FOSUserBundle/issues/1077

Answer 3

you can do :

<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST">
<div class="form-group" id="fos_user_registration_form">
    {{ form_widget(form.email, { 'attr': {'class': 'form-control', 'placeholder': 'form.email'|trans } }) }}
    {{ form_errors(form.email) }}

    {{ form_widget(form.username, { 'attr': {'class': 'form-control', 'placeholder': 'form.username'|trans } }) }}
    {{ form_errors(form.username) }}

    {{ form_widget(form.plainPassword.first, { 'attr': {'class': 'form-control', 'placeholder': 'form.password'|trans } }) }}
    {{ form_errors(form.plainPassword.first) }}

    {{ form_widget(form.plainPassword.second, { 'attr': {'class': 'form-control', 'placeholder': 'form.password_confirmation'|trans } }) }}
    {{ form_errors(form.plainPassword.second) }}

    {{ form_rest(form) }}

</div>
<div>
    <input class="btn btn-lg btn-primary btn-block" type="submit" value="{{ 'registration.submit'|trans }}">
</div>