Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

TYPO3 FormZ

534 Aufrufe

Veröffentlicht am

A TYPO3 extension that allows easy yet powerful form management.

Veröffentlicht in: Internet
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

TYPO3 FormZ

  1. 1. FormZ • typo3-formz.com 1github.com/romm/formz → go and ★ it! TYPO3 FormZ A modern form handler for extensions
  2. 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. 3. FormZ • typo3-formz.com 3github.com/romm/formz → go and ★ it! Summary • What and why? • How? • Demo • Next?
  4. 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. 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. 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. 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
  8. 8. FormZ • typo3-formz.com 8github.com/romm/formz → go and ★ it! What does FormZ provide?
  9. 9. FormZ • typo3-formz.com 9github.com/romm/formz → go and ★ it! TypoScript based configuration • Easy inheritance config.tx_formz { forms { RommFormzExampleFormExampleForm { fields { name { validation { required < config.tx_formz.validators.required } } email { validation { required < config.tx_formz.validators.required isEmail < config.tx_formz.validators.email } } } } } }
  10. 10. FormZ • typo3-formz.com 10github.com/romm/formz → go and ★ it! TypoScript based configuration • Easy overriding config.tx_formz { forms { RommFormzExampleFormExampleForm { fields { gender { validation { required < config.tx_formz.validators.required isValid < config.tx_formz.validators.containsValues isValid { messages { default.value = Please select a correct value! } options { values { 10 = male 20 = female } } } } } } } } }
  11. 11. FormZ • typo3-formz.com 11github.com/romm/formz → go and ★ it! TypoScript based configuration • Could be YAML or plain PHP (incoming!)
  12. 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. 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. 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. 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. 16. FormZ • typo3-formz.com 16github.com/romm/formz → go and ★ it! JavaScript frontend framework • You can add your own custom JavaScript validators
  17. 17. FormZ • typo3-formz.com 17github.com/romm/formz → go and ★ it! Multi language • Easy translation handling Customize validation messages with TypoScript configuration name { validation { required < config.tx_formz.validators.required required.messages { default { key = example_form.error.name_required extension = formz_example } } } } firstName { validation { required < config.tx_formz.validators.required required.messages { default { key = example_form.error.first_name_required extension = formz_example } } } }
  18. 18. FormZ • typo3-formz.com 18github.com/romm/formz → go and ★ it! Multi language • Available in frontend JavaScript automatically handles translated messages
  19. 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. 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. 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. 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. 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.
  24. 24. FormZ • typo3-formz.com 24github.com/romm/formz → go and ★ it! Demo
  25. 25. FormZ • typo3-formz.com 25github.com/romm/formz → go and ★ it! What is coming next?
  26. 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. 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. 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. 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!
  30. 30. FormZ • typo3-formz.com 30github.com/romm/formz → go and ★ it! Thanks!

×