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:

• : www.example.org
• } : http://www.example.org/example/

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).