- Notifications
You must be signed in to change notification settings - Fork5
📜 TYPO3 extension allowing developpers and integrators to easily set up and manage forms.
License
romm/formz
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Warning This package is no longer maintained.
ℹ️ Show more info
“Manage your forms easily with powerful tools: TypoScript based validation, Fluid view helpers, a whole JavaScript API, and more. Use pre-defined layouts for Twitter Bootstrap and Foundation to build nice-looking forms in minutes. Need to build a basic form with only two fields? Need to build a huge registration form with dozens of fields? Use FormZ, it will live up to your expectations!”
❗This PHP library has been developed for
TYPO3 CMS and is intended to TYPO3 extension developers.
Join the discussion on Slack in channel#ext-formz! – You don't have access to TYPO3 Slack? Get your Slack invitationby clicking here!
Forms arecommon elements in the conception of a website, as they allow adirect interaction between the user and the application. Technically, setting up a form can quickly becomecomplex and require alot of time: many aspects must be considered:style, display conditions, validation, security…
This is why FormZ was born: to facilitate theset up and themaintenance of a form, by providing tools that aresimple and fast to use, but alsopowerful and flexible enough to fulfill every need.
FormZ helps with the following topics:
HTML – tools are provided for Fluid, to facilitate integration.
Validation – with a TypoScript based configuration, every field's validation rule is easy to set up and maintain.
Style – an advanced “data attributes” system allows FormZ to fulfill almost all possible display needs.
UX – a whole JavaScript API is provided to make the user experience as fast and as pleasant as possible.
Code generation – FormZ can generate JavaScript and CSS, which are then injected into the page and will automatize a huge part of the client-sided behaviours.
Nothing can be more interesting than a little example to understand how it works.
➡️ You can download an extension which provides a form example here:https://github.com/romm/formz_example/
Live example:
TypoScript configuration:
config.tx_formz { forms { Romm\FormzExample\Form\ExampleForm { fields { name { validation { required < config.tx_formz.validators.required } } firstName { validation { required < config.tx_formz.validators.required } } email { validation { required < config.tx_formz.validators.required isEmail < config.tx_formz.validators.email } behaviours { toLowerCase < config.tx_formz.behaviours.toLowerCase } } gender { validation { required < config.tx_formz.validators.required isValid < config.tx_formz.validators.containsValues isValid { options { values { 10 = male 20 = female } } } } } } } }}PHP form model:
<?phpnamespaceRomm\FormzExample\Form;useRomm\Formz\Form\FormInterface;useRomm\Formz\Form\FormTrait;class ExampleFormimplements FormInterface{use FormTrait;/** * @var string */protected$email;/** * @var string */protected$name;/** * @var string */protected$firstName;/** * @var string */protected$gender;// Setters and getters...}
Fluid template:
<fz:formaction="submitForm"name="exampleForm"><divclass="row"><divclass="col-md-6 form-group"><fz:fieldname="firstName"layout="bootstrap3"><fz:optionname="label"value="First name"/><fz:optionname="required"value="1"/><fz:slotname="Field"><f:form.textfieldclass="{inputClass}"property="{fieldName}"id="{fieldId}"placeholder="First name"/></fz:slot></fz:field></div><divclass="col-md-6 form-group"><fz:fieldname="name"layout="bootstrap3"><fz:optionname="label"value="Name"/><fz:optionname="required"value="1"/><fz:slotname="Field"><f:form.textfieldclass="{inputClass}"property="{fieldName}"id="{fieldId}"placeholder="Name"/></fz:slot></fz:field></div></div><divclass="row"><divclass="col-md-6 form-group"><fz:fieldname="email"layout="bootstrap3"><fz:optionname="label"value="Email"/><fz:optionname="required"value="1"/><fz:slotname="Field"><f:form.textfieldclass="{inputClass}"property="{fieldName}"id="{fieldId}"placeholder="Email"/></fz:slot></fz:field></div><divclass="col-md-6 form-group"><fz:fieldname="gender"layout="bootstrap3"><fz:optionname="label"value="Gender"/><fz:optionname="required"value="1"/><fz:slotname="Field"><labelfor="{fieldId}-female">Female</label><f:form.radioproperty="{fieldName}"id="{fieldId}-female"value="female"/><labelfor="{fieldId}-male">Male</label><f:form.radioproperty="{fieldName}"id="{fieldId}-male"value="male"/></fz:slot></fz:field></div></div><f:form.submitvalue="Send"class="btn btn-primary"/></fz:form>
About
📜 TYPO3 extension allowing developpers and integrators to easily set up and manage forms.