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 invitation by clicking here!
Forms are common elements in the conception of a website, as they allow a direct interaction between the user and the application. Technically, setting up a form can quickly become complex and require a lot of time: many aspects must be considered: style, display conditions, validation, security…
This is why FormZ was born: to facilitate the set up and the maintenance of a form, by providing tools that are simple and fast to use, but also powerful 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:
<?php
namespace Romm\FormzExample\Form;
use Romm\Formz\Form\FormInterface;
use Romm\Formz\Form\FormTrait;
class ExampleForm implements 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:form action="submitForm" name="exampleForm">
<div class="row">
<div class="col-md-6 form-group">
<fz:field name="firstName" layout="bootstrap3">
<fz:option name="label" value="First name" />
<fz:option name="required" value="1" />
<fz:slot name="Field">
<f:form.textfield class="{inputClass}" property="{fieldName}" id="{fieldId}" placeholder="First name" />
</fz:slot>
</fz:field>
</div>
<div class="col-md-6 form-group">
<fz:field name="name" layout="bootstrap3">
<fz:option name="label" value="Name" />
<fz:option name="required" value="1" />
<fz:slot name="Field">
<f:form.textfield class="{inputClass}" property="{fieldName}" id="{fieldId}" placeholder="Name" />
</fz:slot>
</fz:field>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<fz:field name="email" layout="bootstrap3">
<fz:option name="label" value="Email" />
<fz:option name="required" value="1" />
<fz:slot name="Field">
<f:form.textfield class="{inputClass}" property="{fieldName}" id="{fieldId}" placeholder="Email" />
</fz:slot>
</fz:field>
</div>
<div class="col-md-6 form-group">
<fz:field name="gender" layout="bootstrap3">
<fz:option name="label" value="Gender" />
<fz:option name="required" value="1" />
<fz:slot name="Field">
<label for="{fieldId}-female">Female</label>
<f:form.radio property="{fieldName}" id="{fieldId}-female" value="female" />
<label for="{fieldId}-male">Male</label>
<f:form.radio property="{fieldName}" id="{fieldId}-male" value="male" />
</fz:slot>
</fz:field>
</div>
</div>
<f:form.submit value="Send" class="btn btn-primary" />
</fz:form>