1. FormZ • typo3-formz.com 1github.com/romm/formz → go and ★ it!
TYPO3 FormZ
A modern form handler for extensions
2. FormZ • typo3-formz.com 2github.com/romm/formz → go and ★ it!
Romain Canon
PHP developer on TYPO3 since 2012
Currently living in Paris
@Rommsteinz
romain.hydrocanon@gmail.com
@romm
3. FormZ • typo3-formz.com 3github.com/romm/formz → go and ★ it!
Summary
• What and why?
• How?
• Demo
• Next?
4. FormZ • typo3-formz.com 4github.com/romm/formz → go and ★ it!
What is FormZ?
• A TYPO3 extension (TER, Packagist, GitHub)
• A strong API for building web-forms with Extbase & Fluid
• Time saving tool for developers and integrators
5. FormZ • typo3-formz.com 5github.com/romm/formz → go and ★ it!
Why FormZ?
• My customer needed a powerful and modern form manager for
dozens of forms (simulations, registration, “business”, contact)
• EXT:formhandler?
• Old and not maintained a lot (not maintained anymore, since september 2016)
• PI-based with no Fluid support
• No frontend JavaScript validation
• EXT:powermail?
• Too “specific”
6. FormZ • typo3-formz.com 6github.com/romm/formz → go and ★ it!
“Eh dude, TYPO3 v8 provides a brand new form builder!”
• Development of both extensions probably began at the same time
No communication led to two separate projects
• The new form builder is for TYPO3 8.7; we needed something for
TYPO3 6.2
7. FormZ • typo3-formz.com 7github.com/romm/formz → go and ★ it!
“Eh dude, TYPO3 v8 provides a brand new form builder!”
• Main target audience:
• EXT:form
→ For editors/integrators
→ Simple forms with no complex business rules
→ Powerful UI to manage the basic rules of the forms
• EXT:formz
→ For developers/integrators
→ Can handle huge forms with lots of business rules
→ Built by a developer for developers: easy to understand, maintain,
evolve
11. FormZ • typo3-formz.com 11github.com/romm/formz → go and ★ it!
TypoScript based configuration
• Could be YAML or plain PHP (incoming!)
12. FormZ • typo3-formz.com 12github.com/romm/formz → go and ★ it!
Fluid templating
• Build you form however you want/need, by using the full power of
Fluid: partials, view helpers, conditions, etc.
13. FormZ • typo3-formz.com 13github.com/romm/formz → go and ★ it!
Fluid templating
• Benefit from built-in view helpers:
• Field layouts (native support for Twitter Bootstrap and Foundation)
• Automatic CSS classes (for valid/invalid status)
• More incoming!
14. FormZ • typo3-formz.com 14github.com/romm/formz → go and ★ it!
JavaScript frontend framework
• Instant custom validation for the user (not the ugly default HTML5
browser validation)
15. FormZ • typo3-formz.com 15github.com/romm/formz → go and ★ it!
JavaScript frontend framework
• All frontend validators have a PHP version
• JavaScript is not needed for FormZ to work well!
Server side validation will always run to ensure data security
16. FormZ • typo3-formz.com 16github.com/romm/formz → go and ★ it!
JavaScript frontend framework
• You can add your own custom JavaScript validators
18. FormZ • typo3-formz.com 18github.com/romm/formz → go and ★ it!
Multi language
• Available in frontend
JavaScript automatically handles translated messages
19. FormZ • typo3-formz.com 19github.com/romm/formz → go and ★ it!
Robust condition system
• Choose specific situations where fields
should be activated
conditionList {
doesLikeIceCream {
type = fieldHasValue
fieldName = likeIceCream
fieldValue = 1
}
}
fields {
iceCreamFlavors {
activation.expression = doesLikeIceCream
}
}
20. FormZ • typo3-formz.com 20github.com/romm/formz → go and ★ it!
Robust condition system
• Choose specific situations
where validation should be
activated
conditionList {
countryIsFrance {
type = fieldHasValue
fieldName = country
fieldValue = FR
}
countryIsGermany {
type = fieldHasValue
fieldName = country
fieldValue = DE
}
}
fields {
phoneNumber {
validation {
frenchPhone {
className = MyValidatorFrenchPhoneValidator
activation.expression = countryIsFrance
}
germanPhone {
className = MyValidatorGermanPhoneValidator
activation.expression = countryIsGermany
}
}
}
}
21. FormZ • typo3-formz.com 21github.com/romm/formz → go and ★ it!
Robust condition system
• Understands logical operations
deliveryChoice {
activation.expression = zipCodeValid && addressValid && (countryIsFrance || countryIsGermany)
}
22. FormZ • typo3-formz.com 22github.com/romm/formz → go and ★ it!
Dynamic CSS data-attributes
• Automatically added to the <form> HTML tag
• Allows powerful CSS targeting using data-attributes
• fz-value-{field-name} / fz-valid-{field-name} / fz-error-{field-name}
• fz-loading
• More...
• Fully provided by FormZ core
• Works on frontend side (JavaScript) and server side (PHP/Fluid)
23. FormZ • typo3-formz.com 23github.com/romm/formz → go and ★ it!
Dynamic CSS classes
form[name="exForm"]:not([fz-value-email$="@typo3.org"]) .typo3-user {
display: none;
}
Basic example:
On a registration form: I want to display additional information for “official” TYPO3 users.
26. FormZ • typo3-formz.com 26github.com/romm/formz → go and ★ it!
Middlewares
• Between the request and the controller
• A specific and powerful FormZ context
• Example: pre-fill form values, add complex
validation processes, save to database, send
an email, etc.
27. FormZ • typo3-formz.com 27github.com/romm/formz → go and ★ it!
Multi-steps form
• Supports separate pages
• Conditional steps
• Database/Session/Other persistence
28. FormZ • typo3-formz.com 28github.com/romm/formz → go and ★ it!
Substeps
• A new concept that allows pure JavaScript/CSS
step control, for an instant navigation
• Check: https://goo.gl/H6TT69
(https://www.direct-energie.com/particuliers/electricite/simulateur-de-consommation)
29. FormZ • typo3-formz.com 29github.com/romm/formz → go and ★ it!
More information/support
• Join #ext-formz on Slack!
You don’t have an account? Go on forger.typo3.org/slack
• typo3-formz.com
Official website
• typo3-formz.com/doc
Documentation FR/EN
PDF versions available!