TYPO3 Plugin:

formz

FormZ - Moderner Formular-Handler

FormZ offizielle Webseite

"Verwalten Sie Ihre Formulare einfach mit leistungsstarken Tools. TypoScript-basierte Validierung, Fluid View Helfer, eine ganze JavaScript-API und mehr. Verwenden Sie vordefinierte Layouts für Twitter Bootstrap und Foundation, um in wenigen Minuten ansprechende Formulare zu erstellen. Müssen Sie eine Grundform mit nur zwei Feldern erstellen? Müssen Sie ein riesiges Anmeldeformular mit Dutzenden von Feldern erstellen? Verwenden Sie FormZ, es wird Ihren Erwartungen entsprechen!"

:schweres_Ausrufezeichen: Diese PHP-Bibliothek wurde für TYPO3 CMS entwickelt und richtet sich an TYPO3 Extension-Entwickler.

Nehmen Sie an der Diskussion über Slack in Channel teil #ext-formz! - Du hast keinen Zugang zu TYPO3 Slack? Holen Sie sich Ihre Slack-Einladung, indem Sie hier klicken!


Einführung

Formulare sind gängige Elemente bei der Konzeption einer Website, da sie eine direkte Interaktion zwischen dem Benutzer und der Anwendung ermöglichen. Technisch kann die Erstellung eines Formulars schnell komplex werden und viel Zeit in Anspruch nehmen: Viele Aspekte müssen berücksichtigt werden: Stil, Anzeigebedingungen, Validierung, Sicherheit....

Aus diesem Grund wurde FormZ geboren: um die Einrichtung und Pflege eines Formulars zu erleichtern, indem Werkzeuge zur Verfügung gestellt werden, die einfach und schnell zu bedienen sind, aber auch leistungsstark und flexibel genug, um alle Anforderungen zu erfüllen.

FormZ hilft bei den folgenden Themen:

  • HTML - Werkzeuge werden für Fluid bereitgestellt, um die Integration zu erleichtern.

  • Validierung - mit einer TypoScript-basierten Konfiguration ist die Validierungsregel jedes Feldes einfach einzurichten und zu pflegen.

  • Stil - ein fortschrittliches "Datenattribut"-System ermöglicht es FormZ, fast alle möglichen Anforderungen an die Anzeige zu erfüllen.

  • UX - eine vollständige JavaScript-API wird bereitgestellt, um die Benutzerfreundlichkeit so schnell und angenehm wie möglich zu gestalten.

  • Codegenerierung - FormZ kann JavaScript und CSS generieren, die dann in die Seite eingespeist werden und einen großen Teil des client-seitigen Verhaltens automatisieren.

Beispiel

Nichts kann interessanter sein als ein kleines Beispiel, um zu verstehen, wie es funktioniert.

:arrow_right: Eine Erweiterung, die ein Formularbeispiel liefert, können Sie hier herunterladen: https://github.com/romm/formz_example/


Live-Beispiel:


TypoScript-Konfiguration:

config.tx_formz {
    formen {
        Romm\FormzExample\Form\ExampleFormular {
            felder {
                name {
                    validierung {
                        erforderlich < config.tx_formz.validators.required
                    }
                }

                vorname {
                    validierung {
                        erforderlich < config.tx_formz.validators.required
                    }
                }

                email {
                    validierung {
                        erforderlich < config.tx_formz.validators.required
                        isEmail < config.tx_formz.validators.email
                    }
                    verhaltensweisen {
                        toLowerCase < config.tx_formz.behaviours.toLowerCase
                    }
                }

                gender {
                    validierung {
                        erforderlich < config.tx_formz.validators.required

                        isValid < config.tx_formz.validators.containsValues
                        isValid {
                            optionen {
                                werte {
                                    10 = männlich
                                    20 = weiblich
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

PHP Formularmodell:

<?php
namensraum Romm\FormzBeispiel\Formular;

verwenden Sie Romm\Formz\Form\Form\FormInterface;
benutze Romm\Formz\Form\Form\FormTrait;

klasse ExampleForm implementiert FormInterface
{

    verwenden Sie FormTrait;

    /**
     * @var Zeichenkette
     */
    geschützte $email;

    /**
     * @var Zeichenkette
     */
    geschützter $name;

    /**
     * @var Zeichenkette
     */
    geschützte $firstName;

    /**
     * @var Zeichenkette
     */
    geschütztes $Geschlecht;

    / / Setter und Getter.....
}

Fluid-Vorlage:

<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="Vorname" />
                <fz:option name="required" value="1" />

                <fz:slot name="Field">
                    <f:form.textfield class="{inputClass}" property="{fieldName}" id="{fieldId}" placeholder="Vorname" />
                </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>

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

Verteilung:FORMZ ist auf

0.01 % aller TYPO3 installiert.

  • 0.08 % aller TYPO3 8.7.x Installationen installiert
  • 0.02 % aller TYPO3 7.6.x Installationen installiert

FORMZ Version:Verteilung nach installierten Versionen

  • 100 % FORMZ v.1.1.0

PHP Version:FORMZ wird benutzt mit

  • 50 % PHP/7.2
  • 50 % PHP/7.0

Gosign-Responsive Index: TYPO3 Installationen nutzen FORMZ zu

  • 60 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
  • 20 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
  • 20 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

Pagespeed: TYPO3 Installationen nutzen FORMZ zu

  • 40 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 60 % wenn der Pagespeed zwischen 60 % und 80 % ist
  • 0 % wenn der Pagespeed zwischen 40 % und 60 % ist
  • 0 % wenn der Pagespeed zwischen 20 % und 40 % ist
  • 0 % wenn der Pagespeed zwischen 0 % und 20 % ist


Stichprobe n=37806 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de/.ch/.at>