TYPO3 FormZ

FormZ • typo3-formz.com 1github.com/romm/formz → go and ★ it!
TYPO3 FormZ
A modern form handler for extensions

Romain Canon
PHP developer on TYPO3 since 2012
Currently living in Paris
@Rommsteinz
romain.hydrocanon@gmail.com
@romm

Summary
• What and why?
• How?
• Demo
• Next?

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

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”

“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

“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

What does FormZ provide?

TypoScript based configuration
• Easy inheritance
config.tx_formz {
forms {
RommFormzExampleFormExampleForm {
fields {
name {
validation {
required < config.tx_formz.validators.required
}
}
email {
validation {
isEmail < config.tx_formz.validators.email
}
}
}
}
}
}

• Easy overriding
config.tx_formz {
forms {
RommFormzExampleFormExampleForm {
fields {
gender {
validation {
isValid < config.tx_formz.validators.containsValues
isValid {
messages {
default.value = Please select a correct value!
}
options {
values {
10 = male
20 = female
}
}
}
}
}
}
}
}
}

• Could be YAML or plain PHP (incoming!)

Fluid templating
• Build you form however you want/need, by using the full power of
Fluid: partials, view helpers, conditions, etc.

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!

JavaScript frontend framework
• Instant custom validation for the user (not the ugly default HTML5
browser validation)

• 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

• You can add your own custom JavaScript validators

Multi language
• Easy translation handling
Customize validation messages
with TypoScript configuration
name {
validation {
required.messages {
default {
key = example_form.error.name_required
extension = formz_example
}
}
}
}
firstName {
validation {
required.messages {
default {
key = example_form.error.first_name_required
extension = formz_example
}
}
}
}

Multi language
• Available in frontend
JavaScript automatically handles translated messages

Robust condition system
• Choose specific situations where fields
should be activated
conditionList {
doesLikeIceCream {
type = fieldHasValue
fieldName = likeIceCream
fieldValue = 1
}
}
fields {
iceCreamFlavors {
activation.expression = doesLikeIceCream
}
}

• Choose specific situations
where validation should be
activated
conditionList {
countryIsFrance {
fieldName = country
fieldValue = FR
}
countryIsGermany {
fieldName = country
fieldValue = DE
}
}
fields {
phoneNumber {
validation {
frenchPhone {
className = MyValidatorFrenchPhoneValidator
activation.expression = countryIsFrance
}
germanPhone {
className = MyValidatorGermanPhoneValidator
activation.expression = countryIsGermany
}
}
}
}

• Understands logical operations
deliveryChoice {
activation.expression = zipCodeValid && addressValid && (countryIsFrance || countryIsGermany)
}

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)

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.

Demo

What is coming next?

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.

Multi-steps form
• Supports separate pages
• Conditional steps
• Database/Session/Other persistence

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)

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!

Thanks!

TYPO3 FormZ

Recommended

Recommended

More Related Content

Similar to TYPO3 FormZ

Similar to TYPO3 FormZ (20)

Recently uploaded

Recently uploaded (20)

TYPO3 FormZ