TYPO3 Formulare

1. Neues Formular erstellen

Formular-Generator aufrufen

1. Gehen Sie im TYPO3-Backend zu Web > Formulare
2. Klicken Sie auf „Neues Formular erstellen“
3. Wählen Sie „Leeres Formular“ aus

Standardspeicherort

Formulare werden standardmäßig als YAML-Dateien im Verzeichnis fileadmin/form_definitions/ gespeichert.

2. Formular mit dem Generator gestalten

Der TYPO3-interne Form-Generator bietet eine benutzerfreundliche Oberfläche:

• Vordefinierte Feldtypen – Text, E-Mail, Auswahl, Checkboxen, etc.
• Validierungsregeln – Pflichtfelder, E-Mail-Validierung, etc.

Verfügbare Formularelemente

• Eingabefelder: Text, E-Mail, Telefon, Passwort
• Auswahlfelder: Dropdown, Radio-Buttons, Checkboxen
• Strukturelemente: Fieldset, GridRow für Layout
• Spezialfelder: Datei-Upload, versteckte Felder, Captcha

3. Formular auf einer Seite einbinden

Content-Element erstellen

1. Navigieren Sie zur gewünschten Seite
2. Erstellen Sie ein neues Content-Element
3. Wählen Sie aus der Kategorie „Plugin“ das Element „Formular“
4. Wählen Sie unter „Plugin“ Ihr zuvor erstelltes Formular aus

Formular-Einstellungen

Im Plugin können Sie weitere Einstellungen vornehmen:

• Formular auswählen – Dropdown mit verfügbaren Formularen
• Template-Overrides – Anpassung der Darstellung (optional)

4. Finisher konfigurieren

Finisher definieren, was nach dem erfolgreichen Absenden des Formulars geschieht.

Wichtige Finisher-Typen

1. E-Mail an Admin – Benachrichtigung an Administrator
2. E-Mail an Absender – Bestätigungsmail für den Nutzer
3. Redirect – Umleitung auf eine andere Seite
4. SaveToDatabase – Speicherung in der Datenbank

Finisher-Reihenfolge beachten

Wichtig: Der Redirect-Finisher sollte immer als letzter in der Kette stehen, da nach einer Umleitung keine weiteren Finisher mehr ausgeführt werden.

Empfohlene Reihenfolge:

1. E-Mail-Finisher
2. Datenbank-Finisher (falls benötigt)
3. Redirect-Finisher (als letztes)

Redirect-Finisher konfigurieren

Beispiel für eine Umleitung auf eine Danke-Seite:

• Ziel-Seite: Unterseite der Kontaktseite (z.B. „Vielen Dank für Ihre Nachricht“)
• Statuscode: 303 (See Other) – Standard für Form-Redirects

5. Erweiterte Konfiguration: Formulare im Sitepackage speichern

Für eine professionelle Entwicklung sollten Formulare im Sitepackage gespeichert werden, anstatt im fileadmin-Verzeichnis.

Ordnerstruktur vorbereiten

Erstellen Sie folgende Ordner in Ihrem Sitepackage:

EXT:akoesitepackage/
├── Configuration/
│   └── Form/
└── Resources/
    └── Private/
        └── FormDefinitions/

Form-Konfiguration anpassen

Neue Konfigurationsdatei erstellen

Erstellen Sie EXT:akoesitepackage/Configuration/Form/akoeform.yaml:

persistenceManager:
  allowSaveToExtensionPaths: true
  allowDeleteFromExtensionPaths: false
  allowedExtensionPaths: 10: EXT:akoesitepackage/Resources/Private/FormDefinitions/

Ursprüngliche Konfiguration (Referenz)

Die Standard-Konfiguration in vendor/typo3/cms-form/Configuration/Yaml/FormSetup.yaml:

persistenceManager: 
  allowedFileMounts: 
    10: '1:/form_definitions/' 
  allowSaveToExtensionPaths: false
  allowDeleteFromExtensionPaths: false

TypoScript-Konfiguration

Erstellen Sie ext.form.typoscript:

plugin.tx_form.settings.yamlConfigurations.100 = EXT:akoesitepackage/Configuration/Form/akoeform.yaml module.tx_form.settings.yamlConfigurations.100 = EXT:akoesitepackage/Configuration/Form/akoeform.yaml 

Wichtig: Die Konfiguration muss sowohl für das Frontend (plugin.tx_form) als auch für das Backend (module.tx_form) gesetzt werden.

Testen und Migration

1. Neues Formular erstellen – Beim Anlegen sollte nun eine Auswahl für den Speicherordner (Extension-Pfad) erscheinen
2. Bestehende Formulare migrieren – Verschieben Sie vorhandene Formulare aus fileadmin in den neuen Extension-Ordner
3. Formular-Referenzen aktualisieren – Überprüfen Sie die Plugin-Einstellungen auf Ihren Seiten

Sicherheitseinstellungen

Löschen über Backend: Wenn Sie allowDeleteFromExtensionPaths: false auf true setzen, können Formulare über das Backend gelöscht werden. Dies wird jedoch aus Sicherheitsgründen nicht empfohlen.

6. Eigene E-Mail-Templates nutzen

Anpassung von E-Mail-Templates in TYPO3 Form

Verzeichnisstruktur erstellen

vendor/typo3/cms-form/Resources/Private/Frontend/Templates/Finishers/Email/

Original-Templates kopieren

Die Standard-Templates befinden sich in:

vendor/typo3/cms-form/Resources/Private/Frontend/Templates/Finishers/Email/

Kopiere folgende Dateien:

• Default.html → Receiver.html
• Default.txt → Receiver.txt

YAML-Konfiguration erweitern

In der akoeform.yaml ergänzen:

prototypes:
  standard:
    finishersDefinition:
      EmailToReceiver:
        implementationClassName: TYPO3\CMS\Form\Domain\Finishers\EmailFinisher
        options:
          templateName: 'Receiver'
          templateRootPaths:
            10: 'EXT:akoesitepackage/Resources/Private/Extensions/form/Templates/Finishers/Email/'

Wichtige Punkte:

• templateName: Muss dem Dateinamen entsprechen (ohne Endung)
• templateRootPaths: Pfad zu den eigenen Templates
• Priorität: Höhere Zahlen überschreiben niedrigere (hier: 10)

Vorteile:

• Updates überschreiben nicht die eigenen Anpassungen
• Vollständige Kontrolle über das E-Mail-Layout
• Separate Templates für verschiedene Zwecke möglich

Nach dieser Konfiguration verwendet der EmailToReceiver-Finisher die angepassten Templates aus dem Sitepackage.

7. SystemEmail-Layout verändern

Die Standard-Templates befinden sich in:

vendor/typo3/cms-core/Resources/Private/Layouts/

Verzeichnisstruktur erstellen

akoesitepackage/Resources/Private/Extensions/core/Layouts/

Templates kopieren

Kopiere folgende Dateien:

• SystemEmail.html
• SystemEmail.txt

Layout-Pfad in ext_localconf.php konfigurieren

$GLOBALS['TYPO3_CONF_VARS']['MAIL']['layoutRootPaths'][100] = 
    'EXT:akoesitepackage/Resources/Private/Extensions/core/Layouts/';

8. Logo und Farben der E-Mail anpassen

In der ext.localconf.php kann dies angepasst werden.

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['backend']['loginLogo'] = 'EXT:akoesitepackage/Resources/Public/img/logo.svg';
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['backend']['loginHighlightColor'] = '#1d71b8';

9. TYPO3 korrekt für den E-Mailversand konfigurieren

Unter Installation Wide Options im Backend gibt es den Eintrag Mail.

Unter [MAIL][defaultMailFromAddress] die Defaultadresse eintragen.

Unter [MAIL][defaultMailFromName] den Namen setzen.

Für SMTP den Eintrag sendmail abändern in smtp. Anschließend die Serverdaten ergänzen.

Unter Environment kann das Mail setup getestet werden.