medamind

Formulare in TYPOlight

Formulare finde ich, sind das A und O einer Website.
Nicht, dass man sie wirklich für alles brauchen würde, für das sie eingesetzt werden und auch wenn das typische Kontaktformular (vielleicht zurecht) vielfach verflucht wird, stelle ich fest, dass auf typischen Business Websites meist mindestens ein Formular gewünscht wird und das meistens nicht als Kontaktformular, sondern um etwas zu abonnieren, etwas zu bestellen oder sich zu einer Veranstaltung anzumelden, - nicht zu vergessen auch Umfragen aller Art, für die das typische Poll nicht mehr herhält.

Der Phantasie beim Einsatz eines Formulars sind ja kaum Grenzen gesetzt. Und damit natürlich auch nicht der Liste der Anforderungen an ein solches Formular, denn irgendwo muss das Ganze ja auch noch bedienbar bleiben. Na gut, machen wir das Beste draus.

Ich habe jahrelang begeistert eingesetzt, als ich noch mit Joomla gearbeitet habe. Übrigens war Peter Koch der, der mich mit einem Artikel irgendwo auf seiner Website und seiner dortigen leisen Kritik an Joomla und seiner neuen Leidenschaft auf die Idee TYPOlight gebracht hat. Facileforms war immer eine recht beliebte Erweiterung deshalb, weil es so viele Möglichkeiten bietet, andererseits gab es oft auch Probleme mit der Sicherheit und ganz einfach ist FacileForms auch nicht zu handhaben. Ich habe damals einige Alternativen ausprobiert und bin immer wieder dort gelandet.

TYPOlight hat das Formular als Formulargenerator bereits integriert und das funktioniert nicht nur stabil sondern ist auch kinderleicht zu handhaben und bietet alles, was man braucht, sofern man keine Sonderwünsche hat:

• Anlegen aller nötigen Formularfelder Typen mit frei wählbarem Label
• Definition von Pflichtfeldern und Validierung, also Eingabeprüfung
• Überschriften und Erklärungstexte
• Emailweiterleitung an eine festgelegte Adresse in verschiedenen Formaten
• Weiterleitung auf Dankeschön Seite nach Absenden des Formulars

Auch das Speichern in der Datenbank ist möglich. Man muss übrigens noch dazu sagen, dass die Fehlermeldungen netterweise per default nicht als Dialogfeld aufpoppen, sondern an der Stelle, wo der Fehler auftritt, dafür aber leider nicht individualisierbar sind, sondern eine Standardmeldung angezeigt wird, die lediglich den Feldnamen mitführt (beachtenswert daher auch die Benennung).

Eine Erläuterung der einzelnen Formularfelder findet sich übrigens in der .

Für die meisten Fälle wird dies doch nicht ausreichend sein. Die (hier noch verlinkt auf das alte Repository) bietet einige komfortable zusätzliche Funktionalitäten und nimmt einem einige zusätzliche Arbeit ab:

• Bestätigungsemails an Nutzer inklusive Übernahme der Formularfelder über Insert Tags
• automatische Speicherung der Formularinhalte und Verwaltung im Backend
• Export der Formulardaten als CSV oder Excel

Damit gerüstet kann man also nun loslegen, ein erstes, richtig komfortables Formular anzulegen.

Erster Schritt: Eckdaten

Die Eckdaten für ein neues Formular sind schnell eingegeben und man sollte im ersten Schritt auch nur die wesentlichen Eingaben machen. Wer mit EFG arbeitet, wird später, wenn Formularfelder angelegt wurden, sowieso noch einmal die Bestätigungsemail anlegen müssen.

Es reicht also zunächst vollkommen aus, dem Formular einen Titel sowie eine eindeutige ID zu geben und die Eingaben zu speichern. Wie immer geht’s mit “speichern und bearbeiten” direkt dorthin, wo man Elemente hinzufügen kann.

Formularfelder und Erläuterungen

Ich denke, das Anlegen von Formularfeldern und anderen Elementen wie Überschrift oder Erläuterung ist im Backend wirklich sehr schön gelöst und dürfte kein größeres Problem darstellen. Nach meiner Erfahrung ist es nicht nötig, jedes Feld mit einer Eingabeprüfung zu versehen (nicht zu verwechseln mit Pflichtfeldern!), sofern man am Ende des Formulars eine sogenannte Sicherheitsfrage als Spamschutz einbaut. Diese Sicherheitsfrage ist eine simple Rechnung - eine nettere Lösung als unleserliche Captchas, wie ich finde. Zum Schluss braucht ein Formular natürlich noch einen Absende Knopf.

Formularstyling

Generell wird ein Formular als Tabelle dargestellt. Dies kann in den Formularoptionen jedoch deaktiviert werden (Kontrollkästchen “tabellenloses Layout”). Die Tabelle sieht erstmal schöner aus, aber das tabellenlose Layout ist um einiges flexibler, damit aber auch etwas mühsamer zu stylen.

Der TYPOlight Output kann natürlich beliebig angepasst werden. Die Templates liegen im Verzeichnis [TYPOLight Root]\system\modules\frontend\templates und beginnen mit form_. Dies ist aber eigentlich gar nicht nötig, denn der generierte Code macht ein allgemeines wie auch feines Styling der Komponenten wirklich simpel.

Jede Form hat generell schon mal einen eigenen, mit ID versehenen DIV Container, über die sich dann allgemein alle Labels und Felder eindeutig ansprechen lassen. Zusätzlich hat auch jedes Eingabefeld seine eigene ID. Hier hilft zum einen der Blick in die Online Doku, in der man auch den HTML Output nachlesen kann, vor allem aber der Blick in den Quellcode.

Wenn man eine möglichst allgemeingültige Lösung für sein CSS sucht, dann ist es praktisch, einige allgemeine Styles zu formulieren, die für alle Formulare gelten und nur im Notfall direkt die Feld-IDs anzusprechen.

EFG: Bestätigungsmails versenden

Da ich ja ein Fan von “nicht HTML Mails” bin, habe ich mir die Formularvorlage noch gar nicht angesehen, muss ich gestehen. Textmails sind da auch okay und landen bestimmt im Zweifelsfall weniger häufig im Spam. Man kann in die Bestätigungsemail alle Formularfelder per {{form::feldname}} einbinden.

Achtung: mit dem Typ Textarea funktioniert das scheinbar nicht. Wer also das typische “und was Sie uns sonst noch sagen wollten” Feld nutzt, kann diese Info nicht in der Bestätigungsemail anzeigen.
Soll die beim Website Betreiber in der Infomail (Typ “es wurde ein Formular neu ausgefüllt”) übernommen werden, müssen die Daten in unbearbeiteter Form gesendet werden.

Formular Eckdaten anpassen

Das für mich aus Benutzersicht sicherlich interessantes Feld der EFG Erweiterung ist “Daten im Modul Formular-Daten speichern”. Damit werden alle Formulareingaben in einem neuen Modul gespeichert, das ab sofort (sofern Rechte entsprechend vergeben) im Backend sichtbar sind. Hier kann man sich ungeachtet aller Bestätigungs und Infomails nochmal alle Datensätze bequem anschauen, bearbeiten oder exportieren.

So und nun sollte es eigentlich schon funktionieren mit dem Formular….

Alternative oder nette Sache: Danke Seite

Die Danke-Seite platziere ich im Seitenbaum gerne unterhalb der Seite, in die ich das Formular integriert habe, aktiviere “im Menü verstecken” und schließe sie aus der Suche aus - schließlich ist es nicht sinnvoll, die Seite überhaupt publik zu machen, solange sie nicht benötigt wird.

Nun muss man nur in den Formular Eckdaten die WEiterleitung auf die neue Seite einstellen, der natürlich inzwischen ein freundlicher Artikel mit entsprechendem Text verpasst wurde.

Einbindung des Formulars

Das Formular kann entweder über ein Modul oder direkt als Inhaltselement eingebunden werden. Module haben natürlich den Vorteil, dass sie flexibel an jeder Stelle des Layouts und auf jeder Seite angezeigt werden können. Mehr zum Einsatz von Modulen im Seitenlayout habe ich übrigens schon an anderer Stelle mal geschrieben.

Und nun noch zu den Grenzen oder dem Wünschenswerten

Nein, die eierlegende Wollmilchsau ist der Formulargenerator nicht. Seine Stärke hat er aber in der einfachen Bedienung: man kann es nämlich mit einer kleinen Anleitung und einem Beispielformular auch dem Kunden ermöglichen, seine eigenen Formulare zu basteln.

Problematischer wird es in folgenden Fällen:

• mehrseitige Formulare
• Übernahme von Formulareingaben in weitere Seiten oder neue Formulare
• voneinander abhängige Formularfelder

Dies alles war sicherlich eine der Stärken von FacileForms. Aber es geht auch in TYPOlight, nur leider mit etwas mehr Programmieraufwand und eigenen Vorlagen. Hier kann man dann auch gleich die integrierte mootools Maschine nutzen und das Ganze noch etwas peppen.

Mehr zum Thema eigene Formularfeld-Typen, mehrseitige Formulare und dem Einsatz von mootools in Formularen vielleicht bald hier in Form eines Tutorials.