Customize register FOSUserBundle with Bootstrap

Question

I create a Form builder.php like in bootstrap documentation to build my login form and my register form, like that : http://bootstrap.braincrafted.com/base-css#forms But next I discover the FOSUserBundle and I think it's maybe a good idea to use it. The problem is : I can't simply reuse the forms created before.

I want to use bootstrap to customize FOSUser template. Especially for the submit buttons, I want to add for all of them : class="btn primary large"

I create a UserBundle which override the FOSUserBundle.

I customize the login.html.twig in FOSUserBundle, putting a login.html.twig in UserBundle/Ressources/Views/Security/login.html.twig

It's easy because there is only one file for the login template.

But how I can do it for registration part for example ?

There is two files : register.html.twig and register_content.html.twig

So I create a Registration folder in my UserBundle, and I put in these two files.

But, what did I put into to change the style of the submit button ?

In register.html.twig I let :

{% extends "UserBundle::layout.html.twig" %}

{% block fos_user_content %}
{% include "UserBundle:Registration:register_content.html.twig" %}
{% endblock fos_user_content %}

And in register_content.html.twig :

<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register">
    {{ form_widget(form) }}
    <div>
        <input class="btn primary large" type="submit" value="{{ 'registration.submit'|trans({}, 'FOSUserBundle') }}" />
    </div>
</form>

But it's don't work.

Did you think it's a good solution to use that bundle ? https://github.com/CCETC/FOSUserBundle

It integrate directly all the form with bootstrap style.

But if one day I want to add a field in registration form (like gender for example), could I do it in this bundle, like with the original FOSUserBundle ?

Knowing that I want to add some custom fields in register form, and customize forms with bootstrap, I'm wondering if it's a good idea to use FOSUserBundle or if it's better to build a fresh new bundle of my own to manage the user on my website.

Answer 1

If you want to add custom fields in the register form, you have to override the form :

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

Add fields to your User entity and in the buildForm method, simply add your custom fields

 $builder->add('name');

Answer 2

This is a complete example of how I do it (boostrap mode :P, you can adapte to simple html or others frames). You have to look at the end of the form and you pay attention in the "{{ form_rest(form) }}" this is the code how symfony it draw de token

<!-- BEGIN REGISTRATION FORM -->
{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
    <h3 class="font-green">Register Form</h3>
    <div class="form-group">
        {{ form_widget(form.username, { 'attr': {'class': 'form-control placeholder-no-fix', 'placeholder':'User Name'} }) }}
        {% for errorItem in form.username.vars.errors %}
        <span class="help-inline">{{ errorItem.message }}</span>
        {% endfor %}
    </div>
    <div class="form-group">
        {{ form_widget(form.email, { 'attr': {'class': 'form-control', 'placeholder':'E-mail'} }) }}
        {% for errorItem in form.email.vars.errors %}
        <span class="help-inline">{{ errorItem.message }}</span>
        {% endfor %}
    </div>
    <div class="form-group">
        {{ form_widget(form.plainPassword.first, { 'attr': {'class': 'form-control', 'placeholder':'Password'} }) }}
        {% for errorItem in form.plainPassword.first.vars.errors %}
        <span class="help-inline">{{ errorItem.message }}</span>
        {% endfor %}
    </div>
    <div class="form-group">
        {{ form_widget(form.plainPassword.second, { 'attr': {'class': 'form-control', 'placeholder':'Repeat Password'} }) }}
        {% for errorItem in form.plainPassword.second.vars.errors %}
        <span class="help-inline">{{ errorItem.message }}</span>
        {% endfor %}
    </div>
    <div class="form-actions">
        <a class="btn btn-default" href="{{ path('fos_user_security_login') }}">Back to login</a>
        <button type="submit" id="register-submit-btn" class="btn btn-success">Submit</button>
    </div>
    {{ form_rest(form) }}
{{ form_end(form) }}
<!-- END REGISTRATION FORM -->

Answer 3

To answer the question in your title: you have FOSUserBundle and you want Bootstrap CSS to style it. You can style it all yourself like in Carlos Garcia's answer, or apply a sitewide theme in Symfony3.

# app/config/config.yml
# Twig Configuration
twig:
  form_themes: ['bootstrap_3_layout.html.twig']

This applies the Twig theme at https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_3_layout.html.twig which adds a class="form-control" to all text fields so Bootstrap CSS will style it, amongst other stuff.

But that theme only styles <button> and not the <input type="submit" that FOSUserBundle seems to use for some reason. So you still need to override the FOSUserBundle register_content.html.twig and the btn btn-lg btn-primary btn-block class manually.

# app/Resources/FOSUserBundle/views/Registration/register_content.html.twig
{% trans_default_domain 'FOSUserBundle' %}

{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register'}}) }}
{{ form_widget(form) }}
<div>
    <input class="btn btn-lg btn-primary btn-block" type="submit" value="{{ 'registration.submit'|trans }}" />
</div>
{{ form_end(form) }}

Answer 4

modifie FOSUB layout file in "vendor/fos../resource/views/" (or overwrite) ex:

{% extends 'JamBlogBundle::layout.html.twig' %}
{% block content %}
<div class="container">
<div class="row">
    <div class="span9">
        <section id="erreurs">
        {% for type, messages in app.session.flashbag.all() %}
            {% for message in messages %}
                <div class="flash-{{ type }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endfor %}
        </section>
        <section id="foscontent">
        {% block fos_user_content %}
        {% endblock fos_user_content %}
        </section>
    </div>
etc....

and the "JamBlogBundle:layout.html.twig"

{% extends '::base.html.twig' %} /** with bootstrap.css **/
{% block title %} {{ parent() }} - Le Blog {% endblock %}
{% block body %}
<div class="jumbotron subhead">
<div class="container">
    <h1>Le blog de Jamonce !</h1>
    <p class="lead">Lire, écrire, écouter et partager notre passion de la musique.</p>
</div>
</div>
{% block content %} {% endblock %}
<footer class="footer">
<div class="container">
etc.....

for the custom fields, See the reponse above. If it can help