The document provides comprehensive documentation about configuring and using the TYPO3 ext:form extension, developed by Tritum GmbH. It covers aspects such as form configuration files, frontend and backend settings, file management, and translation handling, along with specific examples. The content is aimed at integrators and developers, offering guidance on customizing form behavior and templates within TYPO3.

1. +
TYPO3 EXT:form
for integrators
TRITUM GmbH / Björn Jacob / tritum

2. 2
+
TRITUM
• First official TYPO3 “Professional
Development Agency” in Germany
• www.tritum.de

3. 3
+
Björn Jacob
• CTO TRITUM GmbH
• Team lead EXT:form
• www.geocouch.de

4. +
Form Configuration

5. 5
+
3 Configuration files
• /typo3/sysext/form/Configuration/Yaml/BaseSetup.yaml
• /typo3/sysext/form/Configuration/Yaml/FormEditorSetup.yaml
• /typo3/sysext/form/Configuration/Yaml/FormEngineSetup.yaml

6. 6
+
4 aspects // 1
• form frontend
• basic settings, e.g. template paths, translation files
• definition of form elements, finishers, validators
• form manager
• basic settings, e.g. needed JS + CSS files, translation files
• selectable prototypes
• selectable start templates
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#configuration-aspects

7. 7
+
4 aspects // 2
• form editor
• basic settings, e.g. template paths, needed JS + CSS, translation files
• allowed form elements, finishers, validators
• editable propterties of above mentioned objects
• form plugin (FormEngine)
• basic settings, e.g. translation files
• overridable finisher properties
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#configuration-aspects

8. 8
+
Register own configuration // 1
Frontend
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#yaml-registration
plugin.tx_form {
settings.yamlConfigurations {
# choose number higher 20, below reserved
100 = EXT:theme/Configuration/Yaml/CustomFormSetup.yaml
}
}

9. 9
+
Register own configuration // 2
Backend
• module.tx_form.settings via ext_typoscript_setup.txt
• module.tx_form.settings via ext_localconf.php
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#yaml-registration

10. 10
+
Register own configuration // 3
Backend - ext_typoscript_setup.txt
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#yaml-registration
module.tx_form {
settings.yamlConfigurations {
# choose number higher 30, below reserved
100 = EXT:theme/Configuration/Yaml/CustomFormSetup.yaml
}
}

11. 11
+
Register own configuration // 4
Backend - ext_localconf.php
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#yaml-registration
<?php
...
call_user_func(function () {
if (TYPO3_MODE === 'BE') {
TYPO3CMSCoreUtilityExtensionManagementUtility::addTypoScriptSetup(
trim('
...
')
);
}
});
...

12. 12
+
Configuration inheritances
configuration is merged  only diff in own configuration needed
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#inheritances
configuration 1
Form:
klaus01:
key01: value01
key02: value02
key03: value03
configuration 2
Form:
klaus01:
key01: new value
key04: additional key
result
Form:
klaus01:
key01: new value
key02: value02
key03: value03
key04: additional key

13. 13
+
__inheritances operator (like „<“ in TS)
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#inheritances-operator
configuration 1
Form:
klaus01:
key01: value01
key02:
key03: value03
klaus02:
__inheritances:
10: Form.klaus01
key02:
key03: new value
result
Form:
klaus01:
key01: value01
key02:
key03: value03
klaus02:
key01: value01
key02:
key03: new value

14. +
Form definition

15. 15
+
Basics
• describes specific form including
• form elements
• properties of form elements (label, placeholder, data-foo, etc.)
• order
• validators
• finishers
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-configuration-vs-form-definition

16. 16
+
Kickstart
• use form editor for kickstart
• manually add form definition which you cannot create with
form editor (e.g. save to database finisher)
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-configuration-vs-form-definition

17. +
File mounts

18. 18
+
Basics
• default file mount: „fileadmin/user_uploads“
• define new file mount  available in form manager
• file mount can be extension folder
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-file-storages

19. 19
+
Access rights
• if editor has no access to file mount  form definitions not listed
(form manager, plugin)
• form definitions stored in extension folder
• … are always available (form manager, plugin)
• … cannot be edited and deleted  can be configured
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-file-storages

20. 20
+
Example
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-file-storages
TYPO3:
CMS:
Form:
persistenceManager:
allowedFileMounts:
# format: [file storage uid]:/file/mount/path
100: 1:/forms/
110: 2:/cloudstorage/forms/
allowedExtensionPaths:
10: EXT:theme/Resources/Private/Forms/
allowSaveToExtensionPaths: true
allowDeleteFromExtensionPaths: false

21. +
Override templates
Burning question #1 ☺

22. 22
+
Basics
• fluid template path defined in form configuration (YAML TS )
• templates for form elements are stored in partialRootPaths
• name of form element  name of partial, e.g. Text  Text.html
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#templates

23. 23
+
Example
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#templates
TYPO3:
CMS:
Form:
prototypes:
standard:
formElementsDefinition:
Form:
renderingOptions:
templateRootPaths:
100: 'EXT:theme/Resources/Private/Frontend/Templates/'
partialRootPaths:
100: 'EXT:theme/Resources/Private/Frontend/Partials/'
layoutRootPaths:
100: 'EXT:theme/Resources/Private/Frontend/Layouts/'

24. +
Translation

25. 25
+
Basics (1)
• XLIFF, TypoScript
• XLIFF file defined within „form“ element
• possible to define additional files
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#translate-form-definition

26. 26
+
Basics (2)
• form definition contains label for specific form element
• if a translation is found  label of form definition is overridden
• look-up based on identifiers
• look-up strategy searches in all given translation files based on
the following order:
• translation for specific form + form element
• translation for a specific form element
• translation for a form element type (e.g. „Page“)
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#translate-form-definition

27. 27
+
Example
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#translate-form-definition
TYPO3:
CMS:
Form:
prototypes:
standard:
formElementsDefinition:
Form:
renderingOptions:
translation:
translationFile:
# by default, no array (compatibility) > re-add core XLIFF
# search order is 20:, 10: (highest to lowest)
10: 'EXT:form/Resources/Private/Language/locallang.xlf'
20: 'EXT:theme/Resources/Private/Language/locallang.xlf'

28. +
Customize form editor

29. 29
+
Example 1: remove „Hidden“ element
https://docs.typo3.org/typo3cms/drafts/code.tritum.de/TYPO3.CMS/Form_Documentation/Concepts/Index.html#form-editor
TYPO3:
CMS:
Form:
prototypes:
standard:
formElementsDefinition:
Hidden:
formEditor: 'null'

30. 30
+
Example 2: add „class“ attribute (1)
TYPO3:
CMS:
Form:
prototypes:
standard:
formElementsDefinition:
Text:
formEditor:
# prefill when form element is created in editor
predefinedDefaults:
properties:
elementClassAttribute: 'input'

31. 31
+
Example 2: add „class“ attribute (2)
# TYPO3.CMS:Form.prototypes.standard.formElementsDefinition.Text.formEditor:
editors:
# add a new editable property within the inspector
600:
# unique identifier
identifier: 'class-attribute'
# define inspector editor, can read/ write values of
# 'properties.elementClassAttribute'
templateName: 'Inspector-TextEditor'
# label within inspector
label: 'Class'
# path within form definition
propertyPath: 'properties.elementClassAttribute'

32. +
What‘s next?

33. 33
+
2017
• finish documentation
• release examples/ snippet DB
• powermail migration

34. 34
+
TYPO3 v9 (tbd)
• translations via backend
• additional finishers in editor
• HTML5 elements and validators
• streamline configuration system

35. +
Thanks! Questions?
TRITUM GmbH / Björn Jacob / tritum