CODEWITHSUNDEEP
phpsymfonyfosuserbundle
ElPiter
ElPiter

Reputation: 4324

How to aply style to Registration Form in FOSUserBundle

I'm using Symfony2 and FOSUserBundle.

This question is extensible to any other bundled form in FOSUserBundle.

Since it is right there in the bundle, it's pretty easy to use the Login Form from FOSUserBundle. In that case you see the complete form and you just to "copy" or use it anywhere else and aplying the style you wish. This is how it looks like:

<form action="{{ path("fos_user_security_check") }}" method="post">
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
<label for="username">{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}</label>
<input type="text" id="username" name="_username" value="{{ last_username }}" />
<label for="password">{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}</label>
<input type="password" id="password" name="_password" />
<input type="checkbox" id="remember_me" name="_remember_me" value="on" />
<label for="remember_me">{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}</label>
<input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />

But how about, for example, the Registration Form? In that case, this is all we get in the bundle:

<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register">

{{ form_widget(form) }} 

<input type="submit" value="{{ 'registration.submit'|trans({}, 'FOSUserBundle') }}" />

</div></form>

[please, note that stackoverflow is not parsing correctly this last piece of code and it is not prettyfying it correctly]

As you can see, all the form comes from the tag {{ form_widget(form) }} and that is all we have to render the form.

The question: how and where can I change that form to fit my styles, widths, colors, etc...?

Upvotes: 3

Views: 2980

Answers (2)

adapar
adapar

Reputation: 79

You should override the bundle templates (FOSUser in this case) and make all your customization in the new template, including handling the Form Component render options as suggested by @Inorry. An explanation can be found in FOS documentation here.

In general, the following is enough:

  1. Override layout.html.twig from the bundle by creating your own under app/Resources/FOSUserBundle/views/.
  2. Override any additional templates you want to customize using the same pattern: foo.html.twig by app/Resources/FOSUserBundle/views/foo.html.twig.

  3. For example, if you want to customize the login form using Bootstrap then you create app/Resources/FOSUserBundle/views/Security/login.html.twig:

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

{% trans_default_domain 'FOSUserBundle' %}

{% block title %}Login{% endblock %}

{% block fos_user_content %}
{% if error %}
    <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}

<form action="{{ path("fos_user_security_check") }}" method="post">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
    <div class="form-group">
        <label for="username">{{ 'security.login.username'|trans }}</label>
        <input class="form-control" type="text" id="username" name="_username" value="{{ last_username }}" required="required" />
    </div>
    <div class="form-group">
        <label for="password">{{ 'security.login.password'|trans }}</label>
        <input class="form-control" type="password" id="password" name="_password" required="required" />
    </div>
    <div class="form-group">
        <input type="checkbox" id="remember_me" name="_remember_me" value="on" />
        <label for="remember_me">{{ 'security.login.remember_me'|trans }}</label>
    </div>

    <div class="form-group">
        <input class="btn btn-default" type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" />
    </div>
</form>
{% endblock fos_user_content %}

  4. Be careful to keep the structure of views under the bundle. That is the reason the login template was created under a Security folder. Remember: the structure in the bundle must be kept for each custom template.

  5. Be careful also to use {% extends "FOSUserBundle::layout.html.twig" %} as the original template is masked by your custom one (I would check this in newer versions of Symfony in case the basic assumption fails).

Upvotes: 0

Inoryy
Inoryy

Reputation: 8425

RegistrationForm is built with Symfony2 Form Component, so all customizing should be done with it.

Here's a very good cookbook entry on this topic.

A very simple example:

<div class="pull-left input">
    {{ form_label(form.username) }}
    {{ form_widget(form.username) }}
</div> 

{{ form_rest(form) }}

Upvotes: 3

Related Questions