TYPO3 (Teil 18): Ein Kontaktformular anlegen

Jeder, der eine Webseite betreibt, sollte seinen Besuchern grundsätzlich eine Möglichkeit zur Kontaktaufnahme bieten. Üblicherweise geschieht das in Form eines Formulars. In diesem Tutorial wird gezeigt, wie sich in TYPO3 ein solches Kontaktformular anlegen und in die Webseite einbinden lässt.

Wir empfehlen:
TYPO3 CMS-Training

Das Kontaktformular sollte möglichst als einzelne Seite angelegt werden, die sich direkt über das Menü aufrufen lässt. Legt also eine entsprechende Seite vom Typ Standard an, weist ihr den Seitentitel Kontakt zu und speichert sie ab. Im Frontend sollte das dann zunächst einmal folgendermaßen aussehen:

Ruft die Seite anschließend über den Seitenbaum auf, zeigt mit dem Mauszeiger auf die Spalte Normal und klickt auf Neuen Datensatz an diesem Ort hinzufügen an. Im Register Formulare wird auf Mail-Formular geklickt. Dieser Inhaltstyp ist es dann also, mit dem sich das Formular definieren lässt.

Zunächst zum technischen Hintergrund: Wird vom Besucher ein Formular ausgefüllt und abgeschickt, sendet TYPO3 die im Formular gemachten Eingaben an die im Backend hinterlegte E-Mail-Adresse.

Um das Formular anzulegen, wechselt man ins Register Formular. Hier habt ihr prinzipiell zwei Möglichkeiten:

• Manuelles Anlegen des Formulars.
• Den Formularassistenten verwenden.

Die manuelle Variante kann man zwar verwenden, deutlich komfortabler ist aber zweifellos die Arbeit mit dem Assistenten.

Entscheidend ist das Feld Konfiguration im Register Formular.

Standardmäßig sind in diesem Feld die folgenden Einträge enthalten:

enctype = multipart/form-data
method = post
prefix = tx_form

Hierüber werden allgemeine Informationen zum Formular gemacht. Festgelegt werden die Versandmethode (post), die Kodierung (multipart/form-data) und das Präfix (tx_form). Um das eigentliche Formular zu definieren, speichert ihr die Seite zunächst einmal ab.

 

Anschließend ist neben dem Feld Konfiguration das Symbol Form wizard zu sehen.

Klickt dieses Symbol an. Wechselt anschließend in das Register Formular und öffnet dort den Bereich Nachbearbeitung. Tragt in die beiden Felder E-Mailadresse des Empfängers und E-Mailadresse des Senders jeweils eine E-Mail-Adresse ein. Meistens verwendet man hier übrigens dieselbe Adresse. Zusätzlich könnt ihr einen Betreff wie beispielsweise Kontakt über Webseite o.Ä. angeben.

 

Die eigentlichen Formularinhalte werden im Register Elemente angelegt. Dieses Register ist in verschiedene Bereiche unterteilt. Öffnet zunächst den Punkt Vordefinierte Formularelemente.

Darin sind solche Elemente enthalten, die man eigentlich für jedes Kontaktformular benötigt. Zunächst einmal wäre da Vollständiger Name. Um dieses Feld in das Formular aufzunehmen, klickt ihr doppelt auf Vollständiger Name. TYPO3 fügt daraufhin das Element dem Formular hinzu und zeigt gleichzeitig das Register Optionen an. Und über dieses Register lässt sich das eingefügte Formularelement konfigurieren.

 

Der bei Legende eingetragene Wert wird von TYPO3 intern dem legend-Element zugewiesen. Verwendet wird das legend-Element, um für eine Gruppierung von Formularelementen eine Überschrift anzugeben.

Wirft man einen Blick in den rechten Fensterbereich, fallen die vergleichsweise zahlreichen Formularfelder auf. Für den deutschsprachigen Raum werden einige von denen in aller Regel nicht benötigt. Hierzulande braucht man für gewöhnlich nur Vorname und Nachname. Die drei Felder Präfix, Mittlerer Name und Suffix sind hingegen zumeist überflüssig. Um sie auszublenden, stellt man unter Verschiedene Eigenschaften die Auswahlfelder jeweils auf Nein.

 

Neben den Namen soll meistens auch die E-Mail-Adresse abgefragt werden. Dafür gibt es ebenfalls ein vordefiniertes Element. Übernehmt dieses ebenfalls durch Doppelklick auf den Namen des Formularelements. Um die Eigenschaften des E-Mail-Feldes anzupassen, klickt man es im rechten Fensterbereich an. Daraufhin sind die Optionen des Feldes zu sehen.

Unter Eigenschaften der Beschriftung gibt man den Text an, der vor dem Formularfeld angezeigt werden soll. Das, was man unter Eigenschaften notiert, wird intern dem name-Attribut des Formularfeldes zugewiesen. Weiter geht es mit dem Bereich Gültigkeit. Darin lässt sich festlegen, ob und wie die in diesem Feld gemachten Eingaben überprüft werden sollen. Im Fall des E-Mail-Feldes sind das zwei Dinge:

• Es handelt sich um ein Pflichtfeld.
• Es wird überprüft, ob es sich bei der Eingabe um eine (syntaktisch) korrekte E-Mail-Adresse handelt.

 

Die Gültigkeitsregeln folgen dabei immer demselben Prinzip. In das Feld Nachricht trägt man das ein, was neben der Feldbeschreibung angezeigt werden soll. Den standardmäßig enthaltenen Text Benötigt könnte man beispielsweise in einen Stern ändern. Am Ende des Formulars könnte dann *Das ist ein Pflichtfeld stehen. Ob der bei Nachricht angegebene Text tatsächlich im Frontend zu sehen ist, kann man über Meldung in Beschriftung anzeigen festlegen.

Der bei Fehler eingetragene Text wird angezeigt, wenn die Gültigkeitsprüfung fehlschlägt. Auf diese Weise könnt ihr also das E-Mail-Feld euren eigenen Bedürfnissen entsprechend anpassen.

 

Wechselt anschließend wieder in das Register Elemente und fügt per Doppelklick ein neues Textfeld hinzu. Tragt unter Eigenschaften der Beschriftung in das Feld Beschriftung den Wert Alter ein. Bei Eigenschaften kann im Name-Feld alter eingetragen werden. Unter Gültigkeit wird Ganze Zahl eingestellt.

Somit ist sichergestellt, dass tatsächlich ein gültiger Alterswert in das Feld eingetragen wird. Das Gültigkeit-Feld erlaubt es auch, vordefinierte Validierungsvarianten auszuwählen. Diese reichen von der Überprüfung auf Ganzzahlen über E-Mail-Adressen bis hin zu IP-Adressen und sogar regulären Ausdrücken.

Wie ihr eingangs gesehen habt, werden die Namensfelder mittels fieldset-Elementen gruppiert. Soll das auch für andere Felder gemacht werden, könnt ihr zusätzliche fieldset-Elemente eintragen. Das geschieht unter Elemente. Klickt dort doppelt auf Feldgruppe. In die daraufhin angezeigte Gruppe können die gewünschten Formularfelder per Drag&Drop verschoben werden. Der Text, welcher oberhalb der fieldset-Gruppe angezeigt werden soll, wird unter Eigenschaften der Beschriftung in das Feld Beschriftung eingetragen.

 

Auf die gezeigte Weise könnt ihr beliebig viele Elemente in das Formular einfügen. Unter Inhaltselemente im Register Elemente gibt es zudem zwei zusätzliche Elemente. Durch Kopfzeile lässt sich jeweils eine Überschrift der ersten Ordnung in das Formular einfügen. Verwendet wird dieses Element meistens, um dem Formular eine entsprechende Überschrift zuzuweisen.

Wer seinen Besuchern zum Beispiel zusätzliche Informationen zum Formular liefern will, kann das über das Element Textblock erledigen. Dort könntet ihr dann den bereits erwähnten Hinweis *Das ist ein Pflichtfeld eintragen.

Was jedes Formular besitzen muss, ist natürlich eine Absenden-Schaltfläche. Und diese lässt sich unter Elemente durch Doppelklick auf Absenden-Schaltfläche in das Formular einfügen. Passt bei der Schaltfläche ggf. den Text unter Eigenschaften an.

Wie ihr gesehen habt, lassen sich Formulare in TYPO3 dank des Assistenten ganz einfach anlegen.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

TYPO3 CMS-Training

TYPO3 CMS-Training

Du willst deine eigene Website erstellen und administrieren?

  • 8 Stunden Video-Trainings zum beliebten TYPO3 CMS 6
  • 36 Praxis-Lektionen in Text/Bild als PDF (über 400 Seiten)
  • Themeerstellung mit TypoScript
  • Blog, Forum, Multidomainfähigkeit, Mehrsprachigkeit, Benutzerverwaltung & Co.

Fazit: Deine eigene moderne Website mit anspruchsvollen Features kann kommen!

Zum Training