Transform your Symfony forms, make it nice, elegant and modern with Material Design in 5 minutes!

Transform your Symfony forms, make it nice, elegant and modern with Material Design in 5 minutes!

You want to make a nice, elegant and modern form using the new design standards of Material Design, I’ll try to give you a 5-minutes way to do so with Materialize, a JQuery library, based on these guidelines.

Get Started

Get the assets from Materialize and add it in web directory of your project following Symfony best practices : in fonts, Roboto, in CSS, materialize.min.css, in JS, materialize.min.js. Prefer minified version to improve loading performance.

Run assets:install command.

Import assets in your project templates

You need to import assets into your Twig. At the beginning of your base.html:

{% block stylesheets %}
  <link href="{{ asset('css/materialize.css') }}" rel="stylesheet"/>
  <link href="{{ asset('css/your_form_theme.css') }}" rel="stylesheet"/>
{% endblock %}

At the end of your base.html

{% block javascripts %}
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="{{ asset('js/materialize.min.js') }}"></script>
{% endblock %}

You need JQuery and materialize.min.js if you use Materialize Javascripts animations .

Create your Materialize form theme

Symfony use form themes to standardize display from components

You need to create your Materialize form theme to transform your form design from a basic to an elegant one. You can use this Gist I created for you. You need to create it into app/Ressources/views folder. Once it’s done, update your Twig configuration in app/config/config.yml:

twig:
  form_themes:
  - 'views/materialize_layout.html.twig'

And that’s it! You have built an elegant, modern and responsive form with very nice TextInputs, DatePicker or SelectList.

Transform Symfony Forms with Material Design

I look forward to reading your feedbacks and your suggestions or issues on the form theme repository.

Tips

You can update primary, secondary and background colors to adapt your form to your own visual identity by editing _variables.scss file in components folder. You’ll need Gulp to compile and minify CSS files.

Use grids of Materialize to display multiple fields on the same row depending on device width.

If you want to customise a specific form instead of all the forms of your app, follow the Symfony documentation and import your new form theme by adding this line at the beginning of the corresponding template:

{% form_theme form 'materialize_layout.html.twig'}


You liked this article? You'd probably be a good match for our ever-growing tech team at Theodo.

Join Us

  • Simon Carr

    Many thanks for your work on this. I am new to symfony and am having a problem with the materialize datepicker on form date fields.

    I get the error “This value is not valid.” on the date field when I try to submit.

    In my form builder I have set

    ->add(‘startDate’,DateType::class,[
    ‘widget’=>’single_text’,
    ]);

    and in my template

    {{ form_row(form.startDate,{‘attr’:{‘class’:’datepicker’}}) }}

    and Java script

    $(‘.datepicker’).pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15 // Creates a dropdown of 15 years to control year
    });

    Any ideas what I am doing wrong?

  • Simon Carr

    OK, I fixed it. In the Javascript add

    format: ‘dd-mm-yyyy’

    So it should look like

    $(‘.datepicker’).pickadate({
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 15, // Creates a dropdown of 15 years to control year
    format: ‘yyyy-mm-dd’
    });

  • add this line to your builder so the grabed data and the onchange data has the same format :

    ‘widget’ => ‘single_text’,
    ‘format’ => ‘y-MM-dd’, // add this line

  • NicolasB

    In my case, I added in the JS
    $(‘.datepicker’).pickadate({

    format: ‘dd/mm/yyyy’,
    });
    And in the FormType :
    ->add(‘yourField’, DateType::class, array(
    ‘widget’ => ‘single_text’,
    ‘html5’ => false,
    ‘attr’ => [
    ‘class’ => ‘datepicker’,
    ‘placeholder’ => ’31/12/2017′,
    ],
    ‘format’ => ‘dd/MM/yyyy’,
    )
    )

  • Amir Beygi

    The file input does render correctly .

  • NicolasB

    Not sure to understand 😉 did you encounter any problems ?

  • Nathan Meyer

    Hi ! Can you explain to me how work the File field in your form_theme ? I don’t get it.

  • NicolasB

    Hi Nathan!
    I didn’t need the File field in my use cases until now so it’s not implemented in my form_theme.
    Do you have any idea on how to do so ? There is no specificity for this type of field in bootstrap_3_layout

  • Nathan Meyer

    It’s not easy, I’m trying to do this with Materialize but the file input with this framework is a text input. With bootstrap you don’t have to do anything because it’s just a normal input file, so your form theme can overwrite it as well.
    I don’t really know how I can do that

  • NicolasB

    Have you tried something like at this line of the Gist https://gist.github.com/JusteLeblanc/da4d2100fc966e0962e5f50daf9333f9#file-materialize_form_theme-html-twig-L17 ?
    “`
    {% if ‘file’ === type %}

    File

    {% else %}
    {{- parent() -}}
    {% endif %}
    “`
    The div part is what I found on Materialize documentation, we should adapt it so that the field get the file with something like that :
    “`
    {{ block(‘widget_attributes’) }} {% if value is not empty %}value=”{{ value }}” {% endif %}
    “`