Customizing a form with Symfony

Question

I have a already created form using bootstrap but I would like to customizing it by adding class and such. I found nothing on the docs.

Here is the normal form in HTML:

<form id="form" method="POST">
                        <div class="form-group">
                            <label class="control-label">Pseudo</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input class="form-control" placeholder="xX_Pseudo_Cool_93_Xx" name="form[username]" id="emailSignUp" type="email" required="required">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Email</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                <input class="form-control" placeholder="[email protected]" name="form[email]" id="emailSignUp" type="email" required="required">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="password">Mot de passe</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input class="form-control" placeholder="Mot de passe" name="password" id="password" type="password" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="password">Confirmer le mot de passe</label>
                            <div class="input-group">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
                                <input class="form-control" placeholder="Confirmer le mot de passe" name="passwordConfirm" id="passwordConfirm" type="password" required>
                            </div>
                        </div>
                        <div class="checkbox">
                            <label>
                                <input id="term" type="checkbox" required>
                                En créant votre compte, vous acceptez nos <a href="{{ path('policy') }}">termes et conditions & politique de confidentialité</a>
                            </label>
                        </div>
                        <button type="submit" id="btnsignup" class="btn btn-primary" style="width: 127px;">S'inscrire</button>
                    </form>

Here is the form that actually works but it doesn't have anything and it's with Symfony:

{{ form_start(form) }}
    {{ form_row(form.username) }}
    {{ form_row(form.email) }}
    {{ form_row(form.plainPassword.first) }}
    {{ form_row(form.plainPassword.second) }}

    <button type="submit">Register!</button>
{{ form_end(form) }}    

So, what I would like to do is to actually customize the Symfony form based on my HTML.

Thanks for reading.

Answer 1

You need to declare the form like in the documentation https://symfony.com/doc/4.1/forms.html

With a form class or a using the form builder in the controller (the form class is a better option).

Then, when defining the fields use the code below:

->add('subtitle', 'text',
           array(
               'label'          => 'Subtitle',
               'attr'           => array(
                   'placeholder' => 'The subtitle',
                   'class' => 'form-control'
               ),
               'required'       => false,
           )

You can specify in the attr section of the options the class key that will render the class in the html file.

An alternative is set the class in the template. For that, instead of call form_row(form.username) you call the render function only with the fields passing the attributes like below:

<div class="form-group">
    {{ form_label(form.username, null, {"label_attr": {"class": "col-sm-2 control-label" }}) }}

    <div class="col-sm-10">
        {{ form_widget(form.username, {"attr": {"class": "form-control" } }) }}
    </div>
</div>

More information here: https://symfony.com/doc/current/form/form_customization.html