Wie man ein TYPO3-Formular erstellt - Tutorial & Add-on-Erweiterungen

Wie man ein TYPO3-Formular erstellt - Tutorial & Add-on-Erweiterungen

This article machine-based automatically translated from English to the German language. As this article is not human translated, there may be chances of context, spelling and grammar mistakes. We recommend to read original article in English version.

Egal, welche Rolle Sie als Redakteur, Integrator oder Entwickler spielen, die TYPO3 Formularerweiterung ist ein weit verbreitetes Thema mit einfacher bis fortgeschrittener Formularerstellung in TYPO3. In diesem Artikel erhalten Sie TYPO3-Formular-Kenntnisse auf Anfänger- bis Mittelstufenniveau.

Seit TYPO3 v8 LTS hat die Community eine coole Formularerweiterung innerhalb des TYPO3-Kerns erstellt. Meiner Meinung nach war es eine richtige Entscheidung, die von der Community getroffen wurde. Bei jeder Version wurde die TYPO3-Formularerweiterung mit neuen Funktionen für TYPO3-Redakteure, -Integratoren und -Entwickler verbessert.

Ich möchte diesen Blog allen Mitwirkenden widmen & insbesondere dem Team TRITUM für ihren enormen Einsatz bei der Entwicklung und Pflege der TYPO3-Formularerweiterung #T3Kudos!

Geschichte des TYPO3-Formulars

Wissen Sie was? Die Kern-TYPO3-Formularerweiterung, die nicht vom Kernteam erstellt wurde. Sie beweist: Wenn Sie zum TYPO3-Kern beitragen wollen, müssen Sie nicht unbedingt Teil des TYPO3-Kernteams sein ;)

Wer steckt hinter dem TYPO3-Formular-Kernmerkmal?

Die TYPO3-Gemeinschaft ist unglaublich; das Schöne daran ist, dass Menschen zum Kern beitragen können, ohne dem TYPO3-Kernteam beizutreten ;)

Die Geschichte des TYPO3-Formulars, initiiert, entwickelt und gepflegt von der Form Framework Initiative. Lassen Sie uns allen Mitgliedern dieser Initiative große Hände reichen.

  • Folgen Sie ihrem Formularfälscher für den Status des Projekts.
  • Freuen Sie sich, Ihnen Fragen an ihren Schwarzen Kanal
  • zu stellen.
  • Sie können dem Team beitreten, um Fehler zu beheben, Feedback zu geben, einen Patch, Dokumentation usw. einzureichen :)

Wissen Sie, dass TYPO3 Form den OpenSource-Preis gewonnen hat?

Das TRITUM, Die TYPO3-Agentur, die maßgeblich an der "Form Framework Initiative"  ist stolzer Gewinner des Thüringer Open Source Preises 2019, der erstmals vom ITnet Thüringen im Rahmen der IT-Ausstellung in Erfurt verliehen wird, Artikel lesen.

TYPO3-Form-Kern gegen Powermail

Wenn Sie nach TYPO3-Formularerweiterungen suchen, werden Sie zwei Lösungen finden: 1. TYPO3-Formular, das vom TYPO3-Kern bereitgestellt wird, 2. TYPO3-Formularerweiterungen aus dem TER (TYPO3 Extensions Repository).

In gewisser Hinsicht sind TYPO3-Erweiterungen von Drittanbietern wie EXT:powermail populärer, weil viele Leute sie ein Jahr lang verwendet haben, der TYPO3-Kern funktionsreiche Formularfunktionen vermisst hat usw. Sie können die verfügbaren TYPO3-Formularerweiterungen unter TER.

Was ist Powermail?

Der offizielle Autor sagt;

Powermail ist eine bekannte, redakteursfreundliche, leistungsstarke und einfach zu verwendende E-Mail-Formularerweiterung mit vielen Funktionen (Spamschutz, Marketinginformationen, Optin, Ajax-Submit, Diagrammanalyse usw.)

Groß dank der In2code-Leute, die Powermail-Erweiterungen entwickelt und gepflegt haben und immer noch von vielen TYPO3-Benutzern wegen der leistungsstarken Funktionen wie in der Datenbank gespeicherte Daten, einfache Erweiterbarkeit, entwicklerfreundliche Hooks usw. verwendet werden.

powermail

Extension key

770000+

Downloads

Warum sollten Sie den TYPO3 Formkern verwenden?

Der Grund dafür ist einfach: Sie können die zukünftige TYPO3-Version Ihrer Website leicht warten und aktualisieren.

Seit TYPO3 v8 verfügt TYPO3 über eine coole Drag-n-Drop-Formularfunktion innerhalb des Kerns, und wir empfehlen dringend, die Formularfunktion des TYPO3-Kerns zu verwenden, um TYPO3-Erweiterungen von Drittanbietern so weit wie möglich zu vermeiden.

TYPO3 Formkern ist für Redakteure, Integratoren und Entwickler einfach zu verwenden. Ihre Marketingmitarbeiter können einfach TYPO3-Kontaktformulare erstellen und veröffentlichen, ohne dass sie irgendeine Technik benötigen ;)

Installieren und aktives TYPO3-Formular

Bevor wir beginnen, stellen Sie sicher, dass Sie bereits & installiert haben; aktiviertes TYPO3 bildet die Kernerweiterung aus dem Extensions-Manager.

// Composer guys can install with;
composer require typo3/cms-form

Wie einfach ist es, ein TYPO3-Formular für Redakteure zu erstellen?

Es handelt sich um ein unkompliziertes TYPO3-Formular, das hauptsächlich für Redakteure entwickelt wurde, die Formulare mit der klickbasierten und Drag-n-Drop-Funktion erstellen und veröffentlichen können. Machen Sie sich bereit, Ihr erstes Formular mit den folgenden Schritten zu veröffentlichen.

Schritt 1. Gehen Sie zu Seite > Formular-Backend-Modul.

Schritt 2. Klicken Sie auf die Schaltfläche "Neues Formular erstellen".

Schritt 3. Wählen Sie die Option "Leeres Formular".

Schritt 4. Geben Sie den Namen Ihres Formulars ein und klicken Sie auf die Schaltfläche "Weiter".

Schritt 5. Herzlichen Glückwunsch, Sie sind bereit, indem Sie auf die Schaltfläche "Fertigstellen" klicken.

Schritt 6. Lassen Sie uns schnell ein paar Felder in Ihrem Formular erstellen; klicken Sie auf "Neues Element erstellen".

Schritt 7. Wählen Sie Ihr Element aus, z.B. Textelement

Schritt 8. Auf der rechten Seite können Sie alle Eigenschaften, z.B. Etikett, konfigurieren.

Schritt 9. Fügen Sie alle Ihre Pflichtfelder wie Name, E-Mail, Nachricht usw. zum Formular hinzu.

Schritt 10. Klicken Sie auf die Schaltfläche "Einstellungen", um das Formular abzuschliessen.

Schritt 11. Wählen und konfigurieren Sie auf der rechten Seite alle erforderlichen "Finisher". Das bedeutet, sobald der Benutzer Ihr Formular abgeschickt hat, welche Art von Aktionen Sie durchführen möchten. Um z.B. eine E-Mail zu erhalten, wählen Sie die Option "E-Mail an den Empfänger (Sie)".

Schritt 12. Sie sind fertig, natürlich durch Klicken auf die Schaltfläche "Speichern" ;)

Schritt 13. Letzter Teil, Lassen Sie uns Ihr erstelltes Formular auf einer bestimmten Seite einfügen. Wechseln Sie in das Seitenmodul und klicken Sie auf Ihre Seite. Klicken Sie auf die Schaltfläche "Neues Inhaltselement erstellen".

Schritt 14. Gehen Sie zu Formular-Elemente, und wählen Sie das Plugin "Form" aus.

Schritt 15. Wählen Sie Ihr erstelltes Formular in der Registerkarte Plugin.

Schritt 16. Juhuu! Ihr Formular wird auf Ihrer TYPO3-Website veröffentlicht :)

TYPO3 Formular-Schnellschritte für Integratoren

Als TYPO3-Integrator müssen Sie sich als TYPO3-Integrator bei der Integration des TYPO3-Templates lediglich um eine Sache kümmern.

Statisches TypoScript-Template einbinden

Zu Template > Stammseite > Enthält, TypoScript-Templates. 1. Fluid-Inhaltselemente (fluid_styled_content), 2. Form (form).

TYPO3-Formular-Architektur

In der Regel bevorzugen TYPO3-Integratoren und -Entwickler das Erstellen und Verwalten ihrer Formulare innerhalb ihrer Template-Extension, z.B. site_package, um Vorteile wie Code-Versionierung zu erhalten.

Was ist die Formular-Konfiguration?

  • Welche Formelemente, Veredler und Validierer sind verfügbar,
  • wie diese Objekte vorkonfiguriert sind,
  • wie diese Objekte im Frontend und Backend angezeigt werden.

Was ist die Formdefinition?

  • Alle Formelemente und ihre entsprechenden Validierer,
  • die Reihenfolge der Formelemente innerhalb des Formulars, und
  • die Finisher, die entlassen werden, sobald das Formular eingereicht wurde.
  • Außerdem definiert sie die konkreten Werte jeder Eigenschaft der genannten Aspekte.

Leider bietet der TYPO3-Kern eine reichhaltige YAML-Konfiguration zur Erstellung mehrerer TYPO3-Formulare.

Was ist eine ideale Struktur für das TYPO3-Formular?

Bevor wir mit der Programmierung beginnen, wird offiziell empfohlen, die folgende Ordnerstruktur in Ihrer Vorlagenerweiterung einzurichten.

Formular-Konfiguration

  • EXT:extension_key/Konfiguration/Formular/

Formular-Definitionen

  • EXT:extension_key/Ressourcen/privat/Formulare/

Anpassbare Formularvorlagen

  • Vorlagen EXT:extension_key/Ressourcen/privat/Vorlagen/Formular/
  • Teile EXT:extension_key/Ressourcen/privat/Teils/Form/
  • Layouts EXT:extension_key/Ressourcen/privat/Layouts/Formular/

Übersetzungen

  • EXT:my_site_package/Ressourcen/privat/Sprache/Formular/

Konfigurationsaspekte

In EXT:form gibt es vier Aspekte, die konfiguriert werden können:

  • das Verhalten des Frontend-Renderings,
  • das Verhalten des Formular-Editors,
  • das Verhalten des Formularverwalters und
  • das Verhalten des Formular-Plugins.

Konfiguration Vererbung

Sie können die YAML-Vererbung verwenden und die Konfiguration überschreiben.

Tipps

Zu Debugging-Zwecken oder um einen Überblick über die verfügbare Konfiguration zu erhalten, verwenden Sie das Modul SYSTEM > Configuration. Wählen Sie im Menü das Modul Form: YAML Konfiguration, um das geparste YAML-Formular-Setup anzuzeigen. Falls das Modul nicht verfügbar ist, installieren Sie die Low-Level-Systemerweiterung.

Schritt-für-Schritt zum Konfigurieren des TYPO3-Formulars

Standardmäßig speichert die TYPO3-Formularerweiterung alle Formulare im Ordner /fileadmin/user_uploads/. Es ist keine gute Praxis, das Produktionsformular in fileadmin zu speichern.

Lassen Sie uns im ersten Schritt die Konfiguration so vornehmen, dass die Formulare in Ihrer Vorlagenerweiterung gespeichert werden, z.B. im Pfad /extension_key/Resources/Private/Forms.

Für TYPO3-Integratoren und -Entwickler: Lassen Sie uns in die Tiefe gehen, um das TYPO3-Formular in Ihrer eigenen Template-Extension zu registrieren, zu konfigurieren und zu veröffentlichen.

1. Tab TypoScript Setup

Ja, Sie können ein TYPO3-Formular ganz einfach mit den folgenden Schritten erstellen.

Step 1. erstellen typo3conf/ext/extension_key/Configuration/Form/MyForm.yaml mit Beispiel unter dem Code.

 

TYPO3:
  CMS:
    Form:
      persistenceManager:
        allowedExtensionPaths:
          110: EXT:extension_key/Resources/Private/Forms/
        allowSaveToExtensionPaths: true
        allowDeleteFromExtensionPaths: true

 

Step 2. Um sich beim Frontend-Plugin zu registrieren, fügen Sie das folgende TypoScript zu Ihrer Vorlage hinzu

 

// EXT:extension_key/Configuration/TypoScript/setup.typoscript
plugin.tx_form {
    settings {
        yamlConfigurations {
            100 = EXT:extension_key/Configuration/Form/MyForm.yaml
        }
    }
}

 

Step 3. Um sich am Backend-Modul zu registrieren, fügen Sie unten TypoScript

 

// EXT:extension_key/ext_typoscript_setup.txt

module.tx_form {
    settings {
        yamlConfigurations {
            100 = EXT:extension_key/Configuration/Form/MyForm.yaml
        }
    }
}

 

Für TYPO3-Entwickler-Tipps

Möchten Sie ein bestimmtes TYPO3-Formular in Ihrer Extension registrieren, können Sie dies ganz einfach mit dem untenstehenden PHP-Weg tun ;)

 

// typo3conf/ext/extension_key/ext_localconf.php
defined('TYPO3_MODE') or die();
call_user_func(function () {
     \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTypoScriptSetup(
         trim('
             module.tx_form {
                 settings {
                     yamlConfigurations {
                         100 = EXT:extension_key/Configuration/Form/MyForm.yaml
                     }
                 }
             }
         ')
     );
});

2. YAML Setup

Die YAML-Konfiguration ist das Herzstück der Formularerweiterung, lassen Sie es uns untersuchen.

Benutzerdefinierte TYPO3 Fluid-Formularvorlagen

 

# /extension_key/Configuration/Form/MyForm.yaml

TYPO3:
  CMS:
    Form:
      prototypes:
        standard:
          formElementsDefinition:
            Form:
              renderingOptions:
                templateRootPaths:
                  100: 'EXT:extension_key/Resources/Private/Frontend/Templates/'
                partialRootPaths:
                  100: 'EXT:extension_key/Resources/Private/Frontend/Partials/'
                layoutRootPaths:
                  100: 'EXT:extension_key/Resources/Private/Frontend/Layouts/'

 

 

Übersetzungsdateien hinzufügen

 

# /extension_key/Configuration/Form/MyForm.yaml

TYPO3:
  CMS:
    Form:
      prototypes:
        standard:
          formElementsDefinition:
            Form:
              renderingOptions:
                translation:
                  translationFiles:
                    # custom translation file
                    20: 'EXT:extension_key/Resources/Private/Language/Form/locallang.xlf'

Nützliche TYPO3-Formularerweiterungen aus der Community

Die TYPO3-Gemeinschaft ist fantastisch; sie erstellen immer Erweiterungen zu den Kernfunktionen ;) Hier ist die Liste einiger nützlicher TYPO3-Formularerweiterungen.

Form log

Mathias Brodala (von Pagemachine AG) hat die am meisten nachgefragte TYPO3-Formularerweiterung zum Speichern von Daten erstellt ;) 

Eine Funktion, die in der TYPO3-Formularerweiterung fehlt, ist die Protokollierung von Formulardaten. Wenn Sie jemals die jetzt nicht mehr vorhandene Formhandler-Erweiterung verwendet haben, wissen Sie, wie wertvoll diese sein kann. Sie können schnell überprüfen, ob die Formulareingaben funktionieren, da sie sehen sollten, dass die internen Werte korrekt generiert werden, und dank des Exports nach CSV oder ähnlichem eine grundlegende Analyse durchführen.

TYPO3 Formular zur Datenbank

Philipp Mueller schuf eine ähnliche Erweiterung wie form-log. Diese Erweiterung fügt einen Finisher zum TYPO3-Formular (tx_form) hinzu, um die Ergebnisse in der Datenbank zu speichern.

Mueller hat eine ähnliche Erweiterung wie form-log erstellt.

reCAPTCHA

Integriert Google reCAPTCHA über TypoScript-Renderer. Leicht für Menschen, schwer für Bots.

Formulare Export

Team !frappant hat andere Formen der Exportfunktion erstellt. Fügt die Möglichkeit hinzu, als Finisher die Formulareingaben von Kunden zu speichern und zu exportieren.

Benutzerdefiniertes Formularelement "Verknüpfte Checkbox"

Team TRITUM hat diese Erweiterung erstellt, die dem TYPO3-Formular-Framework ein benutzerdefiniertes Formularelement "Verknüpfte Checkbox" hinzufügt. Der Benutzer kann das Link-Ziel und den Link-Text definieren.

Benutzerdefiniertes Formularelement für statische_Info-Tabellen

Eine weitere Erweiterung von Team TRITUM, die dem TYPO3-Formular-Framework ein benutzerdefiniertes Formularelement "Country select" hinzufügt. Es zeigt eine Auswahlliste mit allen Ländern aus der Datenbanktabelle static_countries aus der Extension static_info_tables innerhalb des Frontends an. Außerdem kann ein Land im Formular-Editor vorselektiert werden.

EXT:formular Seriennummer-Finisher

Armin Vieweg, der berühmte Entwickler der Erweiterung, hat eine kleinere, aber nützliche Erweiterung namens "form_serialnumber" geschaffen. Sie bietet einen Seriennummer-Finisher für EXT:form.

Doppelte Opt-In-Formulare

TYPO3-Erweiterung, die Double Opt-In zum TYPO3 CMS-Formular-Framework hinzufügt

Praktische Beispiele für TYPO3-Formulare

1st, Sebastian Klein, schuf gute Beispiele für die Form von TYPO3 mit verschiedenen TYPO3-Versionen. Es ist eine gute Idee, sich Formbeispiele anzuschauen.

2nd, TRITURM, der TYPO3 Formkernentwickler hat Beispiele für "Wiederholbare Formelemente" wie folgt erstellt.

Video-Tutorials zu TYPO3-Formularen

Wenn Sie gerne in die Tiefe gehen möchten, können Sie sich diese Videos ansehen (Deutsch & Englisch).

Einpacken!

Danke für das Lesen meines Blogs. Ich hoffe, dass Ihnen der Überblick über die TYPO3-Formularerweiterung gefallen hat.

  • Die TYPO3-Form ist ein größeres Thema, um jede Konfiguration und Anpassung zu untersuchen, und ich empfehle dringend, offizielle TYPO3-Dokumentation.
  • Möglichst viele TYPO3-Erweiterungen von Drittanbietern für Formularfunktionen vermeiden. Verwenden Sie weiterhin die Kernfunktionen von Formularen, und erkunden Sie die Möglichkeit, sie für Ihre eigenen Anforderungen zu erweitern.

Gibt es Probleme beim Einrichten des TYPO3-Formulars? Oder: Haben Sie Vorschläge für nützliche Ressourcen? Ich freue mich über Ihr Feedback im Kommentarfeld

Post Comment

Your email address will not be published. Required fields are marked *

×

Name ist erforderlich!

Geben Sie einen gültigen Namen ein

Gültige E-Mail ist erforderlich!

Gib eine gültige E-Mail Adresse ein

Kommentar ist erforderlich!

Google Captcha ist erforderlich!

Bemerkungen :

  • Karl March 11, 2022 Beim 11:12 am
    Your blog is always very competent and helpful, but extremely painful to read through.
    Please please remove this ugly horrible ridiculous giphy stuff in between !!!!
    • Anjali Bhatt March 14, 2022 Beim 7:39 am
      Hi Karl,
      Many thanks for your appreciation and transparent feedback.
      Your opinion matters to us, we'll take it into consideration.
      Cheers!
  • Christoph Fischer March 3, 2022 Beim 12:39 pm
    Hello Nitsan,
    Thanks a lot for your Article. It was very helpfull to me.
    I have a question: I'd like to create a form wich fills out automaticaly a hidden or visible field,
    with the currend logged in username. Is there a way to do that?
    Thank you in advance for your brief answer.
    Best regards
    Christoph
  • Osborne February 4, 2022 Beim 11:20 am
    Osborne
  • Bentley https://naver.com/ February 4, 2022 Beim 11:20 am
  • Nicolas Gumpert February 1, 2022 Beim 12:09 pm
    Danke für die Beschreibung.
    Bin Autodidakt und kein C oder, kann aber Typo3 eigentlich ganz gut!
    Möchte für Typo3 11 die powermail ersetzen um damit meine letzte externe EXT loszuwerden.
    Ohne diese gute Zusammenfassung hätte ich wieder mal einigestunden trial and error gespielt, bis das alle so läuft wie ich will.
    Am Ende stimmt eh nur 89%, aber das reicht dann für mich;-)
    Danke und viele Grüße aus Frankfurt,
    Nicolas Gumpert
  • Nicolas Gumpert February 1, 2022 Beim 12:08 pm
    Danke für die Beschreibung.
    Bin Autodidakt und kein C oder, kann aber Typo3 eigentlich ganz gut!
    Möchte für Typo3 11 die powermail ersetzen um damit meine letzte externe EXT loszuwerden.
    Ohne diese gute Zusammenfassung hätte ich wieder mal einigestunden trial and error gespielt, bis das alle so läuft wie ich will.
    Am Ende stimmt eh nur 89%, aber das reicht dann für mich;-)
    Danke und viele Grüße aus Frankfurt,
    Nicolas Gumpert
  • Sunil D June 4, 2021 Beim 7:33 pm
    I need to send custom attachment pdf/image with form mail send. Can you assist?

Stay up to date with our recent TYPO3 Blogs, news, & updates