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