Code here: http://bit.ly/ss3forms Learn to create modular forms in SilverStripe 3. Both in PHP and in HTML/CSS. Learn to create a simple Form interface so that all form logic remains together and re-usable. Create a single point of truth for your forms. Briefly cover BEM and modular CSS and front-end architecture

1. A modular approach to Forms
13 July 2015 • SilverStripe London • Dan Hensby

2. 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

3. 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 form
Defining an interface and API for your forms

4. 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

5. We’ve defined a simple Email
Template for contact form
submissions
Create a simple email template
We’ve all done this before

6. 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

7. ● 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

8. ● 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) projects
Resources:
● https://en.bem.info/
● http://cssguidelin.es/
Creating simple CSS

9. Thank you!
Code here: http://bit.ly/ss3forms
Twitter/GitHub/etc: @dhensby