Formular-Entwicklung mit Facile Forms
Formsache

Kinderleichte Formularentwicklung

Formular-Entwicklung mit Facile Forms

Wenn Sie in eine Joomla-Standardinstallation Registrierungs-, Feedback- oder Bestellformulare einbinden wollen, kommen Sie ohne fundierte HTML-, PHP- und MySQL-Kenntnisse sind sonderlich weit. Die Lösung für dieses Problem ist indes recht einfach: Mit dem Joomla-Add-on Facile Forms wird die Entwicklung von Formularen zum Kinderspiel. Sie können mit dieser Erweiterung nicht nur einfache Formulare erstellen, sondern sie auch für die Entwicklung und das Testen von kleinen datenbankgestützten Applikationen verwenden. Die Entwicklungsarbeit gestaltet sich recht einfach, da Facile Forms die Entwicklung im Wysiwyg-Modus erlaubt. In diesem Workshop entwickeln Sie ein typisches Formular für Ihre Joomla-Site.

Ein erstes Formular erstellen

Ein Formular, mit dem der Benutzer sein Feedback zu einem Produkt übermitteln kann, soll als Ausgangspunkt dienen. Wechseln Sie dazu nach der Installation von Facile Forms zunächst in die Formularverwaltung und klicken Sie dort auf Neu.

Facile Forms präsentiert Ihnen den Dialog Neues Formular, der über vier Register verfügt. Zunächst weisen Sie Ihrer ersten Entwicklung eine Bezeichnung zu. Diese taucht später auch in der Formularadministration auf. Weisen Sie Ihrem Formular außerdem im Textfeld Name einen Bezeichner zu, damit Joomla-Komponenten und
-Module das Formular nutzen können. Sie können weitere Eigenschaften wie die Größe, den Vorschaumodus und eine Beschreibung hinterlegen. Belassen Sie es vorerst bei den Standardeinstellungen. Speichern Sie nun das Formular mit einem Klick auf Save. Sie landen dann in der Formularansicht, die Ihnen die Facile-Forms-typische Entwurfsansicht präsentiert.

Die Entwurfsansicht bietet Ihnen mehrere Seiten an, Sie können mit Hilfe von Facile Forms also auch mehrseitige Formulare erstellen. Diese verschiedenen Seiten lassen sich dann über eine Navigationsleiste miteinander verknüpfen. So bleiben auch umfangreiche Formulare übersichtlich und damit benutzerfreundlich.

Als Nächstes gilt es, dem noch leeren Formular Leben einzuhauchen. Dazu klicken Sie in der Symbolleiste auf Neu. Es öffnet sich der übersichtliche Auswahldialog für die gängigen Formularelemente wie Textfeld, Radio-Button, Auswahlmenü et cetera. Nun gilt es, das Formular der Reihe nach mit den gewünschten Inhalten und Formularfeldern zu füllen. Der Dialog zum Einfügen von Elementen bietet Ihnen drei Elementtypen an: statische Elemente, Knöpfe und Eingabefelder. Beginnen Sie mit einem ersten Textelement. Dazu wählen Sie in der Gruppe Statische den Eintrag Statischer Text/HTML aus und klicken auf Weiter.

Nach der Auswahl des Typs präsentiert Ihnen Facile Forms einen weiteren Dialog, mit dem Sie die Details bestimmen. Es liegt in der Natur der Sache, dass für unterschiedliche Elementtypen verschiedene Detaildialoge verwendet werden.

Formularelemente

Formular-Entwicklung mit Facile Forms

Im Formular Neues Element, Statischer Text/HTML weisen Sie dem Element eine Bezeichnung zu, die Sie später in der Elementverwaltung wiederfinden. Diese Bezeichnung wird auch beim Versand von E-Mail-Benachrichtigungen verwendet. Unter Name geben Sie einen Bezeichner für Ihr Element an. Über diesen Namen wird das Element in der Joomla-Umgebung angesprochen. Sie sollten daher darauf achten, dass diese Bezeichnung keine Sonderzeichen enthält, die Joomla womöglich falsch interpretiert. Sie können weitere Eigenschaften wie die Reihenfolge und die Position bestimmen.

Neben der Feldbezeichnung Vorname soll nun ein einzeiliges Eingabefeld gesetzt werden, das die Vornameneingaben entgegennimmt. Dazu erstellen Sie ein neues Element, wählen dieses Mal allerdings den Typ Eingaben, Text. Bezeichnen Sie das Feld wieder. Achten Sie auf ein einheitliches Schema bei der Elementbenennung. Das vereinfacht das nachträgliche Identifizieren und Bearbeiten von Elementen.

Die beiden zuvor beschriebenen Schritte wiederholen Sie für all die Felder, die Ihr Feedback-Formular besitzen soll. Sie sollten natürlich auch den Nachnamen, die E-Mail-Adresse sowie eventuell die Kundennummer und Anschrift abfragen.

Auswahlmöglichkeiten

Als Nächstes fragen Sie ab, ob der Nutzer bereits Kunde ist oder nicht. Dazu verwenden Sie Radio-Buttons, bei denen der Anwender die Wahl zwischen Ja und Nein hat. Zunächst fügen Sie wieder den erläuternden Text ein. Im Beispiel genügt Kunde.

Platzieren Sie das Element an der gewünschten Position. Wenn Sie ein wenig Erfahrung mit Facile Forms gesammelt haben, können Sie bereits in den Elementeigenschaften die Positionierung grob setzen.

Beim Erzeugen von Radio-Buttons, die wie in diesem Fall zusammengehören, müssen Sie darauf achten, dass Sie im Feld Name identische Werte verwenden. Ansonsten können Sie bei den Radiobuttons noch die Anfangswerte setzen, indem Sie den Schalter Angekreuzt auf Ja setzen. Als Nächstes werden Sie ein Auswahlmenü erstellen, bei dem der Kunde entscheiden kann, ob es sich um Lob, Kritik oder ein technisches Problem handelt. Dazu erzeugen Sie wieder ein neues Element und wählen als Typ Auswahlliste. Nehmen Sie wieder die bereits bekannten Einstellungen vor. Wichtig sind die Eingaben des Feldes Optionen. Dort definieren Sie, welche Auswahlmöglichkeiten das Menü zu bieten hat. Eine typische Eingabe sieht wie folgt aus:

1; Bitte wählen Sie:; 0
0; Kritik; 1
0; Lob; 2
0; Problem; 3

Was hat es nun mit dieser Konfiguration auf sich? Jeder Eintrag besitzt zumindest zwei, optional auch drei Teile. Mit der 1 definieren Sie den Standardeintrag, der beim Zugriff auf das Formular geöffnet wird. Durch einen Strichpunkt getrennt folgt der eigentliche Eintrag, den Sie wieder mit einem Strichpunkt beenden. Der dritte Teil bestimmt die interne Reihenfolge der Elemente. Diese können Sie aber auch weglassen. Achten Sie bei der ersten Zeile darauf, dass der Benutzer direkt weiß, worum es hier geht.

Es fehlt noch der typische Abschicken-Button, der für die Datenübermittlung der Eingaben sorgt. Dazu wählen Sie aus der Elemente-Auswahl einen der drei angebotenen Knöpfe, bezeichnen ihn im nächsten Dialog und positionieren ihn an der gewünschten Stelle.

Funktionalität für Ihre Formulare

Formular-Entwicklung mit Facile Forms

So richtig spannend wird die Sache erst, wenn Sie Ihren Formularen Funktionen und damit Leben einhauchen. Beim Erstellen der verschiedenen Formularelemente ist Ihnen sicherlich nicht entgangen, dass alle Knopf- und Eingabefelder ein weiteres Register besitzen: Skripte. Über dieses können Sie Ihren Elementen unterschiedliche Funktionen zuweisen, die abhängig von Ereignissen bestimmte Aktionen ausführen.

Wenn Sie die Eigenschaften eines Eingabefelds ? keines statischen ? öffnen und zum Register Skripte wechseln, so bietet Ihnen dieses Register das Einbinden von drei Skript-Varianten an:

Initialisierungsskript: Damit legen Sie fest, was beim Laden der Elemente passiert.
Aktionsskript: Hiermit legen Sie fest, was bei bestimmten Aktionen wie einem Mausklick passiert.
Validierungsskript: Dieser Typ prüft die Dateneingaben auf ihre Korrektheit.

Typische Funktionen, die ein Formular bieten sollte, sind die Validierung von Eingaben und das Versenden der Eingaben. Sehen Sie sich zunächst an, wie Sie die Eingabe in das E-Mail-Adressfeld überprüfen, damit Ihre Benutzer Ihnen nicht durch fehlerhafte Einträge unnötig Arbeit bereiten. Sie werden staunen, wie einfach das Einführen einer typischen Eingabenüberprüfung ist.

Öffnen Sie die Eigenschaften des E-Mail-Eingabefelds und wechseln Sie zum Register Skripte. Unter Validierungsskript aktivieren Sie den Typ Bibliothek. Dann geben Sie in das Feld Meldung den Text an, der ausgegeben wird, wenn der Benutzer eine fehlerhafte Eingabe vornimmt. Unter Skript wählen Sie den Eintrag FF::ff_validemail aus. Speichern Sie die Einstellungen mit einem Klick auf Speichern.

Wie Sie dem Auswahlmenü entnehmen können, bietet Ihnen die Validierungsfunktion eine Vielzahl an Validierungsmöglichkeiten an. Mit der Option ff_integer können Sie beispielsweise festlegen, dass es sich bei der Eingabe um einen Integer-Wert handeln muss.

Das Formular im Beispiel hat bis auf eine simple Eingabenüberprüfung noch nicht viel zu bieten. Sorgen Sie also dafür, dass die Formulareingaben übermittelt werden können. Auch hierfür greifen Sie auf die Skript-Bibliothek zurück. Öffnen Sie wieder die Eigenschaften des Buttons und wechseln Sie zum Register Skripte. Unter Aktionsskript wählen Sie zuerst Bibliothek und suchen dann das Skript ff_validate_submit aus. Wenn Sie sich die Einträge des Auswahlmenüs genauer ansehen, stellen Sie fest, dass Sie bei einer Schaltfläche die unterschiedlichsten Aktionen ausführen können. So können Sie beispielsweise zur nächsten Seite springen (ff_nextpage) oder einen Reset der Eingaben (ff_resetForm) ausführen.

Sie können weitere interaktive Komponenten in das Formular einführen und den Benutzer beispielsweise nach dem Versand darüber informieren, dass die Daten zuverlässig übertragen wurden. Um eine solche Ausgabe nach der Übermittlung zu erzeugen, wechseln Sie in die Formularverwaltung und klicken dort auf den Formularnamen. Es öffnet sich der Dialog Formularbearbeitung. Hier wechseln Sie ebenfalls zum Register Skripte und aktivieren unter Übermittelt-Skript die Bibliothek und wählen dann das Skript ff_showsubmitted aus. Der Versand funktioniert natürlich nur, wenn Sie die Mail-Konfiguration korrekt hinterlegt haben.

Eingaben sichten

Formular-Entwicklung mit Facile Forms

Nun fragen Sie sich natürlich, wo die Eingaben gelandet sind, die Ihre Benutzer übermittelt haben. Die Antwort ist recht einfach: Sie landen in der Datensatzverwaltung. Um auf die Daten zuzugreifen, klicken Sie auf das Register Datensatzverwaltung. Hier werden alle Formulareingaben samt verschiedenen Details wie die Eingaben-ID, das Absendedatum, die IP-Adresse des Benutzers et cetera gesammelt.

Für das Einsehen und die weitere Behandlung sind die drei letzten Spalten wichtig, denn hier zeigt Ihnen Facile Forms an, welche Eingaben Sie bereits gesichtet, exportiert oder archiviert haben.

Im Kopfbereich der Datensatzverwaltung finden Sie verschiedene Funktionen, mit denen Sie die Ansicht der Datensätze gezielt einschränken können. Standardmäßig werden nur ungesichtete, nicht exportierte und nicht archivierte Datensätze angezeigt. Sie können außerdem über das Eingabefeld Formular Name gezielt nach einem Datensatz suchen. Wichtig: Wenn Sie Änderungen an der Ansicht vornehmen, wird die Ansicht leider noch nicht automatisch aktualisiert.

Um einen Eintrag zu sichten, klicken Sie auf den jeweiligen Listeneintrag. Die Facile-Forms-Seite Datensatz sichten präsentiert Ihnen vier Info-Bereiche. Unter Gesendete Werte finden Sie die Datensatz-ID, die Element-ID, Titel und Name der Felder, den Elementtyp und die Werte, also die tatsächlichen Eingaben.

Formulare einbinden

Natürlich eignet sich Facile Forms nicht nur zum Erstellen von Formularen, die auf Seiten des Benutzers verfügbar sind, sondern Sie können Formulare auch im Backend gut gebrauchen. Unterschiede bei der Vorgehensweise gibt es nicht, wohl aber beim Einbinden.

Zunächst integrieren Sie ? weil es so einfach ist ? das erste Formular in das Backend. Öffnen Sie zunächst die Facile-Forms-Menüverwaltung. Wenn Sie die Beispieldateien installiert haben, finden Sie dort bereits einen Eintrag: Contact form. Klicken Sie in der Menüverwaltung auf Neu, um einen neuen Eintrag zu erstellen. Bei dieser Vorgehensweise wird das Formular in das Joomla-Menü Components eingefügt.

Facile Forms präsentiert Ihnen den Dialog Menüposition hinzufügen. Über das Auswahlmenü Übergeordnete Position bestimmen Sie die Position des einzufügenden Menüs. Im darunter liegenden Auswahlfeld finden Sie auch das oben erzeugte Feedbackformular. Markieren Sie den Eintrag und klicken Sie auf Weiter.

Es folgt ein weiteres Formular, in dem Sie beispielsweise ein Bild für den Menüeintrag auswählen und die Position sowie einige weitere Einstellungen bearbeiten. Mit einem Klick auf Speichern ist der Menüeintrag erzeugt. Sie können nun über Components, Feedback-Formular auf das Formular zugreifen.

Die Integration in das Frontend ist ebenfalls recht einfach. Hier bietet es sich zunächst an, die Komponente wie gewohnt als Menüpunkt anzulegen. Außerdem können Sie Facile Forms als Modul integrieren. Es gibt eine dritte Möglichkeit, bei der Sie auf den Facile-Forms-Mambot zurückgreifen.

Import und Export von Formularen

Formular-Entwicklung mit Facile Forms

Facile Forms hat neben dem einfachen Erstellen von Formularen eine weitere Besonderheit zu bieten: Sie können Pakete importieren und exportieren. Hinter einem Paket verbergen sich die zu einem Formular gehörenden Dateien. Diese Funktion vereinfacht den Formularaustausch zwischen Joomla-Installationen. So können Sie beispielsweise auf einem Entwicklungssystem Ihre Formulare entwickeln und testen, um sie dann später auf das Produktionssystem aufzuspielen. Die Exportfunktion schnürt übrigens ein XML-basiertes Paket, in dem die verschiedenen Elemente wie Skripts, Menüeintrage, Grafiken et cetera hinterlegt sind.

Exportieren Sie zunächst das oben erzeugte Feedback-Formular. Dazu wechseln Sie in die Facile-Forms-Konfiguration und klicken auf Paket erstellen . Das Facile-Forms-Formular Kreiere Paket wird geöffnet. Hier bestimmen Sie den Paketnamen, Titel, Autor, E-Mail-Adresse, eventuell Autoren-URL, hinterlegen eine Beschreibung und die Lizenzinfo. Unter Formular Auswahl und Menüposition Auswahl bestimmen Sie, welches Formular mit welcher Menüposition exportiert werden soll. Unterhalb dieses Auswahlmenüs erfolgt die Skript- und Teileauswahl. Achten Sie darauf, dass Sie alle Komponenten Ihres Formulars einbinden, da es ansonsten auf der Gegenseite nicht ausgeführt werden kann. Mit einem Klick auf Weiter wird der Dialog Ihres Browsers geöffnet, mit dem Sie die XML-Datei speichern.

Der Import von Paketen ist ebenfalls recht einfach durchzuführen. Klicken Sie dazu in der Facile-Forms-Konfiguration auf die Schaltfläche Paketinstallation. Sie landen in der Paketverwaltung, die bereits installierte Pakete wie die Beispieldateien und die Standardteile und Skriptbibliotheken samt Detailinformationen aufführt.

Fazit

Facile Forms ist ein Formularspezialist, der alle typischen Anforderungen abdeckt, die Sie beim Ausbau Ihrer Joomla-Site benötigen. Auf der Facile-Forms-Website finden Sie zudem jede Menge Infos, wie sich auch aufwendige Formularanwendungen realisieren lassen.