Fosuserbundle: how to overriding fosuserbundle registration form style

[lichnow]

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!

[carlcraig]

You should be able to override the default register twig template to add the customization you need.

https://github.com/FriendsOfSymfony/FOSUserBundle/blob/master/Resources/doc/overriding_templates.md

You should also be able to render each part of the form instead of using the normal form_widget(form)

{% 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) }}

Alternatively you could use the form_row(form.field) option

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

{{ form_errors(form) }}

{{ form_row(form.username) }}

{{ form_row(form.email) }}

{{ form_row(form.password) }}

{{ form_rest(form) }}

This can be a long way to render the form, so you might have better luck trying to customize your form theme, to render everything in the way you want.

The Symfony 2 Documentation has lots of information on how to do this.
http://symfony.com/doc/current/cookbook/form/form_customization.html

In your form theme you should also be able to create custom row theming for specific widgets e.g. checkbox_row, radio_row. which would allow you to customize the row output for specific widgets.

Also, to see all of the default form themeing, you can find it in
vendor\symfony\symfony\src\Symfony\Bridge\Twig\Resources\views\Form\form_div_layout.html.twig

That file is a nice place to start when you are going to write a custom form theme, as you can use it as a base to build from.

There are also a few bundles which have already done this themeing for twitter bootstrap forms and menus, they may be something worth looking at

http://bootstrap.braincrafted.com/getting-started

[erikaheidi]

I was just looking for that, thanks =) should it be a good idea to add something in the docs? I tried a lot with {{ form_widget(form.password) }} (with no success, ofc) cause I was not sure where to look for the right field identifier.

[cartbeforehorse]

@carlcraig This is all very good information. However, it's also very general information which can all be picked up from the docs.

The problem that I've been having is not styling the form, but more specifically to this form in particular, how to modify the content of the form. It's very unclear to me why the form_widget(form) code only renders the 4 fields that it does (username/email/password/confirmation). How do I go about modifying the content of the form? e.g. I might like to remove the "username" field, but add a "date-of-birth" field.

[stof]

@cartbeforehorse What you want in this case is not overriding the styles of the form, but overriding the form type (it is not only about styles as the PHP code also need to know the extra fields). And this is documented for the master branch or for 1.3.x

[bornbygoogle]

@stof, sr for disturbing, but I followed all steps, exactly step by step, in the docs for overriding forms, but when i call for register, the page resulted in a blank page. Can you suggest me what error i did ? Thanks a lot.

[Dimentar]

Override "register_content.html.twig"

    <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>
</form>

[DaniSancas]

Just came to say +1 to @Dimentar explanation and to point that @carlcraig 's coment's first link is broken, now is https://github.com/FriendsOfSymfony/FOSUserBundle/blob/master/Resources/doc/overriding_templates.rst (notice .rst instead of .md), just in case you want to keep that explanation up to date.

Thank you all for your advice, and sorry for the interruption.

[xabbuh]

You should better view the docs on http://symfony.com/doc/master/bundles/FOSUserBundle/overriding_templates.html (it's much easier to read as everything will be rendered properly on symfony.com).

[jalpeshmakadia]

I want to overriding below files in FOSUserBundle. can any body guide how can i do that?

/vendor/friendsofsymfony/user-bundle/Model/User.php
/vendor/friendsofsymfony/user-bundle/Model/UserInterface.php
/vendor/friendsofsymfony/user-bundle/Resources/config/doctrine-mapping/User.orm.xml

Thanks.

[geoffreyhale]

Can FOSUserBundle default form appearance be configured via config.yml as Twig can be?:
twig: form_themes: - bootstrap_3_layout.html.twig

[maninder1516]

Helped in customizing my registration template. Thanks...