A modular approach to Forms

13 July 2015 • SilverStripe London • Dan Hensby

Why modular forms?

● Keep related logic in one place● Have a single point of truth for forms● Form re-use is easy● Add logic to all forms in one go● Remove logic from your controller● Provide a common interface for defining forms in you project

Here we are:● Defining an abstract class to

create our common interface● Making most constructor

arguments optional● Using internal class methods to

define Fields, Actions & Validator

Now we have a common API for creating forms

A base formDefining an interface and API for your forms

Here we are:● Defining a simple contact form● Adding fields● Setting the button label● Making the fields required● Defining the submission handler `doSubmit`● Using `Config` to assign defaults for the

outgoing email

Creating a contact form

We’ve defined a simple Email Template for contact form submissions

Create a simple email templateWe’ve all done this before

Here we have:● Added `Form` and `success` as

“allowed action”● Defined a `Form` method to create

the `ContactForm`● Defined a `success` action on the

controller (and template)

We have removed the logic around the `ContactForm` from the controller

Set up the controller

● Since 3.0 styling form fields has become simple

● We can add custom template files to override the markup

● We can work around default behaviour of duplicated classnames

● In 3.2 we can add default class names to forms and fields

Styling the front end form

● Using BEM to write clear CSS● Block Element Modifier● .block .block__element .block__element--

modifier● Best used with a CSS pre-processor● Solves many common issues with

CSS on (large) projectsResources:

● https://en.bem.info/● http://cssguidelin.es/

Creating simple CSS

Thank you!Code here: http://bit.ly/ss3formsTwitter/GitHub/etc: @dhensby