TYPO3 Kontaktformular als Extension mit Extbase und Fluid

Für mehrere Webseiten aus der Agentur meiner Frau sollte ein Kontaktformular entstehen. Die Webseiten sind mit TYPO3 aufgebaut. Daher sollte eine Extension entstehen.

Das Formular sollte Namen, e-Mail Adresse, Telefonnummer und Nachricht übermitteln. Name, e-Mail Adresse und Nachricht müssen ausgefüllt werden. Eine Fehlerabfrage sollte entsprechende Meldungen anzeigen. Wenn das Formular richtig ausgefüllt ist, sollte es an eine e-Mail Adresse verschickt werden. Die zur Verfügung stehenden Adressen sollten an zentraler Stelle pflegbar sein.

Dazu entstand eine Extension, die sowohl das Kontaktformular als auch die Eingabe der e-Mail Adressen im Backend steuert.

Download Referenzliste als PDF

Mehrere Adressen und Validierung über Controller

Kontaktformular auf Webseite

Referenz Thomas Berscheid Kontaktformular mehrere Adressen Fehlerprüfung TYPO3 Extension Template CSS TypoScript TS CSS HTML Programmierung Köln

Die Startansicht des Kontaktformulars auf der Webseite 

Quelltext des Formulars in Extension

Referenz Thomas Berscheid Kontaktformular mehrere Adressen Fehlerprüfung TYPO3 Extension Template CSS TypoScript TS CSS HTML Programmierung Köln

Das Kontaktformular bietet vier Eingabefelder unterschiedlicher Art für die zu verarbeitenden Daten. Die Benennung der Felder erfolgt über die Language Datei der Extension. Das Formular ist im Partials-Ordner abgelegt und wird an mehreren Stellen eingebunden (Eingabe und Überprüfung der Fehler).

Quelltext Controller

Referenz Thomas Berscheid Kontaktformular mehrere Adressen Fehlerprüfung TYPO3 Extension Template CSS TypoScript TS CSS HTML Programmierung Köln

Wenn der Benutzer das Formular abgeschickt hat, erfolgt eine Abfrage, ob die als required gesetzten Felder ausgefüllt sind. Ist dies nicht der Fall, wird für jedes Feld eine Fehlermeldung generiert. Ist dies geschehen, wird der jeweilige Inhalt in die Klasse geschrieben, die das Verschicken der e-Mail auslöst.

Validierung von Fehlern bei Eingabe

Referenz Thomas Berscheid Kontaktformular mehrere Adressen Fehlerprüfung TYPO3 Extension Template CSS TypoScript TS CSS HTML Programmierung Köln

Wenn der Kunde ein Feld oder mehrere Felder nicht ausgefüllt hat, bekommt er eine entsprechende Fehlermeldung. Diese wird über ein eigenes Formular in Fluid generiert.

Meldung zu erfolgreich verschickten Formulardaten

Referenz Thomas Berscheid Kontaktformular mehrere Adressen Fehlerprüfung TYPO3 Extension Template CSS TypoScript TS CSS HTML Programmierung Köln

Wenn der Benutzer alle Angaben gemacht und auf „Abschicken“ geklickt hat, wird eine e-Mail generiert. Eine vorgeschaltete Darstellung der Eingaben findet nicht statt. Der Zwischenschritt führte bei mehreren Kunden dazu, dass sie die Mail nicht verschickt haben. Daher sollte die Funktion so einfach wie möglich gehalten werden.

Pflege e-Mail Adressen im Backend

Referenz Thomas Berscheid Kontaktformular mehrere Adressen Fehlerprüfung TYPO3 Extension Template CSS TypoScript TS CSS HTML Programmierung Köln

Das Kontaktformular wird an jeweils nur eine e-Mail Adresse verschickt. Für die gesamte Webseite können jedoch beliebig viele e-Mail Adressen hinterlegt werden, aus denen für jedes eingebundene Formular eine Adresse ausgewählt werden kann. Die Steuerung des Backends erfolgt über TYPO3 FlexForms.

Auswahl e-Mail Adresse für Empfänger

Referenz Thomas Berscheid Kontaktformular mehrere Adressen Fehlerprüfung TYPO3 Extension Template CSS TypoScript TS CSS HTML Programmierung Köln

Das Plugin bietet die Möglichkeit, aus den bereitgestellten e-Mail Adressen eine als Empfänger der e-Mail auszuwählen.

Einbindung in Webseite über den Erweiterungsmanager

Referenz Thomas Berscheid Kontaktformular mehrere Adressen Fehlerprüfung TYPO3 Extension Template CSS TypoScript TS CSS HTML Programmierung Köln

Das Kontaktformular ist als Extension für TYPO3 programmiert und kommt in mehreren Webseiten der Agentur zum Einsatz.