ALLES ÜBER formule UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

formule

Formule für TYPO3 CMS

Vorlagenbasiert, rendern Sie eine Vielzahl von Formularen wie Kontaktformular, Anmeldeformular, etc..... mühelos!

Beachten Sie diese minimalen Schritte, um ein Formular anzuzeigen und mit der Übermittlung von Daten zu beginnen:

  • Legen Sie im Backend ein Inhaltselement vom Typ "formule" an.
  • Fügen Sie eine TypoScript-Konfiguration hinzu, um ein neues HTML-Template zu deklarieren.
  • Passen Sie Ihre Vorlage insbesondere an das Formular an. Verwenden Sie einen Formulargenerator Ihrer Wahl.
  • Dein Formular ist grundsätzlich fertig

Projektinformationen und Freigaben

Entwicklungsversion: https://github.com/Ecodev/formule

git clone https://github.com/Ecodev/formule.git

Neuigkeiten über die neuesten Entwicklungen werden auch auf http://twitter.com/fudriot bekannt gegeben

Installation und Anforderung

Die Erweiterung erfordert TYPO3 6.2 oder höher. Installieren Sie die Erweiterung wie gewohnt im Extension Manager von der TER (zur Freigabe) oder laden Sie sie über Composer herunter:


    "Erfordern": {
        "fab/formule": "Dev-Master",
    }

    -> Der nächste Schritt besteht darin, den Extension Manager im BE zu öffnen.

Du bist fast da! Erstellen Sie ein Inhaltselement vom Typ "formule" im General Plugin > Vielzahl von Formularen und konfigurieren Sie es nach Ihren Wünschen.

Konfiguration

Das Plugin kann hauptsächlich in TypoScript konfiguriert werden. Im Extension Manager kann eine mögliche E-Mail-Umleitung entsprechend dem Anwendungskontext eingestellt werden. Dies kann bei der Entwicklung nützlich sein, um zu vermeiden, dass E-Mails an den Endbenutzer gesendet werden.

Eine neue Vorlage registrieren

Standardmäßig stellt die Erweiterung einen begrenzten Satz von Formularen zur Verfügung: ein einfaches Mailformular zusammen mit einem Beispiel zur Newsletter-Registrierung. Es ist sehr wahrscheinlich, dass Sie neue hinzufügen möchten. Um eine neue Vorlage zu registrieren und sie im Plugin-Datensatz zu sehen, beachten Sie die beiden notwendigen Schritte:

  • Erstellen Sie eine neue HTML-Vorlage EXT:foo/Ressourcen/Privat/Plugins/Formule/MyForm.html. Sie können sich von der in EXT:formule inspirieren lassen.
  • Füge einige minimale TypoScript-Einstellungen hinzu, z.B. in EXT:foo/Configuration/TypoScript/Plugin/tx_formule.ts

    plugin.tx_formule { {
        einstellungen {
            vorlagen {

                # Die Taste "1", "2" ist bereits von der Erweiterung belegt.
                # Verwenden Sie die Tasten "10", "11" und folgende, damit Ihre eigenen Vorlagen sicher sind.
                10 {
                    title = Foo Detailansicht
                    pfad = EXT:foo/Ressourcen/Private/Templates/formule/ContactForm.html

                }
            }
        }
    }

Laden Sie zusätzliche Assets

Nachfolgend finden Sie ein komplexeres Beispiel, das zusätzliche JS / CSS lädt. Dieses TypoScript kann in eine Datei geschrieben werden, z.B. in EXT:foo/Configuration/TypoScript/Plugin/tx_formule.ts


    plugin.tx_formule.settings.template.11 { {

        title = Newsletter-Abonnement neu
        pfad = EXT:foo/Ressourcen/Private/Standalone/Newsletter/NewSubscription.html

        # Benutzerdefinierte Assets laden
        asset {

            0 {
                pfad = EXT:foo/Ressourcen/Public/Build/StyleSheets/formule.css
                typ = css

                # Optionaler Schlüssel beim Laden von Assets über EXT:vhs.
                abhängigkeiten = mainCssss
            }

            1 {
                pfad = EXT:foo/Ressourcen/Public/Build/JavaScript/formule..js
                typ = js

                # Optionaler Schlüssel beim Laden von Assets über EXT:vhs.
                abhängigkeiten = mainJs
            }
        }
    }

Auf der Datenbank verbleiben

Man kann auch eine Konfiguration festlegen, um die übermittelten Daten in der Datenbank zu speichern. Dieses TypoScript kann in eine Datei geschrieben werden, z.B. in EXT:foo/Configuration/TypoScript/Plugin/tx_formule.ts


    plugin.tx_formule.settings.template.11 { {

        title = Newsletter-Abonnement neu
        pfad = EXT:foo/Ressourcen/Private/Standalone/Newsletter/NewSubscription.html

        # Konfiguration beibehalten
        persistieren {
            tableName = fe_users

            standardwerte {
                pid = 1
                deaktivieren = 1
            }

            # Eventuell die Werte verarbeiten
            prozessoren {
                0 = Fab\Formule\Prozessor\UserDataProcessor\UserDataProcessor
            }

            abbildungen {
                # Linker Wert entspricht dem Namen in der Form: name="firstName"
                # Der rechte Wert entspricht dem Feldnamen: fe_users.first_name
                #first_name = first_name
            }
        }
    }

Laden von Daten

Um Daten vorzuladen und Werte in das Formular einzubringen, kann man Lader konfigurieren. Ein Loader entspricht einer PHP-Klasse, in der man einige Daten holen und ein Array von Werten zurückgeben kann.


    plugin.tx_formule.settings.template.11 { {

        title = Newsletter-Abonnement neu
        pfad = EXT:foo/Ressourcen/Private/Standalone/Newsletter/NewSubscription.html

        lader {
            0 = Fab\Formule\Lader\UserDataLoader\UserDataLoader
        }

    }

HTML-Template

Die Vorlage hat die absoluten Mindestanforderungen. Ein Fluid-Formular muss deklariert werden, indem sein Inhalt an die Aktion "Senden" gesendet wird. Es hat ein Pflichtfeld, um die ursprüngliche Konfiguration des Inhaltselements abzurufen <f:form.hidden name="values" value="{contentElement.uid}"/>. Formule verfügt über einen Mechanismus zum Lesen und Analysieren des Inhalts. Daraus werden zulässige Felder und Pflichtwerte extrahiert. Beachten Sie die Grundstruktur mit den Inline-Kommentaren.


    <f:form action="submit" controller="Form" additionalAttributes="{role: 'form'}" method="post">

        <div class="form-group">
            <Eingabetyp="Text"
                   class="form-control" (Formularsteuerung)
                   id="name" (Name)
                   name="name" (Name)
                   value="{values.name}" "
                   placeholder="{f:translate(key:'name')}" "
                   required="required"/>
        </div>

        <input type="submit"/>

        <!-- Das einzige Pflichtfeld -->
        <f:form.hidden name="values" value="{contentElement.uid}"/>

        <!-- VH zur Begrenzung des Ärgers der Bots (erforderlich) -->
        <fo:honeyPot/>

        <!--Hinweis im Entwicklungskontext anzeigen (optional) -->
        <fo:message.development/>
    </f:form>

Abschnitte in der Vorlage

Die Vorlage kann sein


    # Erforderlicher Abschnitt
    <f:section name="main">
        Inhalt der Vorlage
    </f:section>

Dieser Abschnitt ist optional und dient dazu, den Body-Teil der E-Mail an den Administrator zu definieren. Falls vorhanden, ersetzt if den Wert aus der Flexform.


    <f:section name="emailAdmin">

    </f:section>

Wie oben, aber für den Endbenutzer. Falls vorhanden, ersetzt if den Wert aus der Flexform.


    <f:section name="emailUser">

    </f:section>

Dieser Abschnitt ist optional und soll die Feedback-Nachricht für den Endbenutzer nach erfolgreichem Absenden des Formulars definieren.


    <f:section name="feedback">

    </f:section>

Template-Variable

Aus Gründen der Benutzerfreundlichkeit bietet die Erweiterung eine Reihe von globalen Variablen, die in E-Mails (Betreff oder Körperteil) verwendet werden können:

Feldsteuerung

  • Die Erweiterung wird mit einem Honeypot View Helper ausgeliefert, um Bot-Nerven zu reduzieren.
  • Die mit required="required" gekennzeichneten Felder werden extrahiert und als solche kontrolliert.
  • Todo: Wir könnten das HTML5-Attribut pattern=""" zur besseren Feldkontrolle einführen (noch nicht implementiert).

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

Verteilung:FORMULE ist auf

0 % aller TYPO3 installiert.

  • 0.02 % aller TYPO3 7.6.x Installationen installiert

FORMULE Version:Verteilung nach installierten Versionen

  • 100 % FORMULE v.0.9.2

PHP Version:FORMULE wird benutzt mit

  • 100 % PHP/5.5

responsive - image 4

Gosign-Responsive Index: TYPO3 Installationen nutzen FORMULE zu

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

speed test - image 5

Pagespeed: TYPO3 Installationen nutzen FORMULE zu

  • 0 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 100 % 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=36680 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de>

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.