Example extended forms via view
@
.00

Note: Labels surround all the options for much larger click areas and a more usable form.

Prefix Text
Suffix Text
%

Everything's included

All things shown here are directly included via the bundle.

You can completely drive the appearence within view too, and hopefully updates wont change the anything!!

An example: to generate a nice input field with appended icon:

$builder
    ->add('appendedicon')
;
    

and in your twig template:

{{ form_row(form.appendedicon,
    {'label': 'Appended Icon',
     'widget_addon': {'type': 'append',
                      'icon': 'headphones'},
     'attr': {'class': 'input-large',
              'placeholder': 'What kind of music do you like?'}
    }) }}

Detailed Examples!

Have a look into the source code of this template and its form class and see how this page is completely view driven

FormType Code

// ExampleExtendedViewFormType.php

<?php
namespace Mopa\Bundle\BootstrapSandboxBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

class ExampleExtendedViewFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('textfield1', 'text', array(
                'label' => 'Form sizes',
            ))
            ->add('textfield2', 'text', array(
                'label_render' => false,
            ))
            ->add('textfield3', 'text', array(
                'label_render' => false,
            ))
            ->add('select1', 'choice', array(
                'label_render'        => false,
                'choices'      => array('1' => 'one', '2' => 'two'),
            ))
            ->add('select2', 'choice', array(
                'label_render'        => false,
                'choices'      => array('1' => 'one', '2' => 'two'),
            ))
            ->add('select3', 'choice', array(
                'label_render'        => false,
                'choices'      => array('1' => 'one', '2' => 'two'),
            ))
            ->add('prepend1')
            ->add('prepend2')
            ->add('append1')
            ->add('append2')
            ->add('checkboxesinline', 'choice', array(
                'multiple'     => true,
                'expanded'     => true,
                'choices'      => array('1' => 'one', '2' => 'two', '3'=>'three')
            ))
            ->add('checkboxes', 'choice', array(
                'label'        => 'Checkboxes',
                'multiple'     => true,
                'expanded'     => true,
                'choices'      => array(
                    '1' => 'Option one is this and that—be sure to include why it`s great',
                    '2' => 'Option two can also be checked and included in form results',
                    '3' => 'Option three can—yes, you guessed it—also be checked and included in form results'
                ),
            ))
            ->add('radiobuttons', 'choice', array(
                'label'        => 'Radio buttons',
                'expanded'     => true,
                'choices'      => array(
                    '1' => 'Option one is this and that—be sure to include why it`s great',
                    '2' => 'Option two can also be checked and included in form results',
                    '3' => 'Option three can—yes, you guessed it—also be checked and included in form results'
                ),
            ))
            ->add('publicVisible', 'checkbox', array('required'=> false))
            ->add('time1', 'time', array(
                'widget' => 'choice',
            ))
            ->add('Prefix_Text', 'text')
            ->add('Suffix_Text', 'text')
            ->add('Money_default', 'money')
            ->add('Percent_default', 'percent')
        ;
    }
    public function getName()
    {
        return 'mopa_bootstrap_example_extended_forms';
    }
}

Template Code

{# MopaBootstrapSandboxBundle:Examples:extended_view.html.twig #}

{% extends "MopaBootstrapSandboxBundle::layout.html.twig" %}
{% from 'MopaBootstrapBundle::flash.html.twig' import session_flash %}

{% block headline %}Extended Forms Views{% endblock headline %}

{% block content %}
<div class="col-lg-6">
    <form class="form-horizontal">
        <fieldset>
            <legend>Example extended forms via view</legend>
            {{ form_row(form.textfield1, {'horizontal_input_wrapper_class': 'col-lg-4', 'attr': {'placeholder': 'col-lg-4'}}) }}
            {{ form_row(form.textfield2, {'horizontal_input_wrapper_class': 'col-lg-6', 'horizontal_label_class': 'col-lg-offset-3', 'attr': {'placeholder': 'col-lg-6'}}) }}
            {{ form_row(form.textfield3, {'horizontal_input_wrapper_class': 'col-lg-9', 'attr': {'placeholder': 'col-lg-9'}}) }}
            {{ form_row(form.select1, {'horizontal_input_wrapper_class': 'col-lg-4'}) }}
            {{ form_row(form.select2, {'horizontal_input_wrapper_class': 'col-lg-6'}) }}
            {{ form_row(form.select3, {'horizontal_input_wrapper_class': 'col-lg-9'}) }}
            {{ form_row(form.prepend1, {'label': 'Prepended Text', 'widget_addon_prepend': {'text': '@'}, 'horizontal_input_wrapper_class': 'col-lg-4'}) }}
            {{ form_row(form.prepend2, {'label': 'Prepended Icon', 'widget_addon_prepend': {'icon': 'headphones'}, 'attr': {'placeholder': 'Which kind of music?'}}) }}
            {{ form_row(form.append1, {'label': 'Appended Text', 'widget_addon_append': {'text': '.00'}, 'attr': { 'placeholder': 'col-lg-4'},'horizontal_input_wrapper_class': 'col-lg-5'}) }}
            {{ form_row(form.append2, {'label': 'Appended Icon', 'widget_addon_append': {'icon': 'pencil'}, 'attr': {'placeholder': 'Which kind of books?'}}) }}
            {{ form_row(form.checkboxesinline, {'label': 'Inline Checkboxes', 'widget_type': 'inline'}) }}
            {{ form_row(form.checkboxes, {'label': 'Checkboxes'}) }}
            {{ form_row(form.radiobuttons, {'help_block': '<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.'}) }}
            {{ form_row(form.publicVisible, {'label': 'publicVisible', 'required': 'false'}) }}
            {{ form_row(form.time1, {'horizontal_input_wrapper_class': 'col-lg-4'}) }}
            {{ form_row(form.Prefix_Text, {'widget_prefix': "Prefix Text", 'attr': {'placeholder': 'col-lg-4'}, 'horizontal_input_wrapper_class': 'col-lg-4'}) }}
            {{ form_row(form.Suffix_Text, {'widget_suffix': "Suffix Text", 'attr': {'placeholder': 'col-lg-4'}, 'horizontal_input_wrapper_class': 'col-lg-4'}) }}
            {{ form_row(form.Money_default, {'attr': {'placeholder': 'col-lg-4'}, 'horizontal_input_wrapper_class': 'col-lg-4'}) }}
            {{ form_row(form.Percent_default, {'attr': {'placeholder': 'col-lg-4'}, 'horizontal_input_wrapper_class': 'col-lg-4'}) }}
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Save changes</button>
                <button type="reset" class="btn">Cancel</button>
            </div>
        </fieldset>
    </form>
</div>
<div class="col-lg-6">
    <h3>Everything's included</h3>
    <p>All things shown here are directly included via the bundle.</p>
    <p>You can completely drive the appearence within view too, and hopefully updates wont change the anything!!</p>
    <p>An example: to generate a nice input field with appended icon:</p>
    <pre class="prettyprint">
$builder
    ->add('appendedicon')
;
    </pre>
    <p>and in your twig template:</p>
    <pre class="prettyprint">{% raw %}
{{ form_row(form.appendedicon,
    {'label': 'Appended Icon',
     'widget_addon': {'type': 'append',
                      'icon': 'headphones'},
     'attr': {'class': 'input-large',
              'placeholder': 'What kind of music do you like?'}
    }) }}
{% endraw %}</pre>
    <h3>Detailed Examples!</h3>
    <p>Have a look into the <a href="https://github.com/phiamo/MopaBootstrapSandboxBundle/blob/master/Resources/views/Examples/extended_view.html.twig">source code</a> of this template and its <a href="https://github.com/phiamo/MopaBootstrapSandboxBundle/blob/master/Form/Type/ExampleExtendedViewFormType.php">form class</a> and see how this page is completely view driven</p>
</div>
{% endblock content %}

{% set showTemplate = _self %}{% set showForm = formType %}
Fork me on GitHub