Joomla Anleitung - Komponenten

Joomla Forms :: Schritt-für-Schritt Anleitung




Forms for Joomla LogoJoomla Forms (Blue Flame Forms for Joomla!) ist eine AJAX-basierte Formularerweiterung von Phil Taylor. Mit der Erweiterung lassen sich umfangreiche Formulare in kürzester Zeit erstellen sowie diverse Übermittlungsaktionen wie Dankesseite und Email-Versand zusammenklicken.
Die komplette Bearbeitungs-Oberfläche von Joomla Forms ist englisch.

Joomla Forms ist kostenpflichtig und kann auf der Webseite des Entwicklers heruntergeladen werden. Es handelt sich jedoch um eine Lifetime Lizenz, wodurch zukünftige Updates kostenlos bezogen werden können.

 


Unzufrieden mit dem aktuellen Webhosting?

 

Optimiertes Joomla Hosting mit Serverstandort Schweiz!
Bei der Bestellung den Promo-Code "swisshosting" angeben und CHF 50.- Rabatt erhalten!

» hier direkt zur Joomla WebHosting Bestellung

Joomla Forms einstieg


Der Einstieg geschieht über das Backend "Komponenten > Blue Flame Forms", wodurch man auf das Control-Panel der Formularerweiterung gelangt.

Um ein Formular verwenden zu können, bedarf es 3 Schritte:
1. Formular erstellen
2. Formularfelder definieren
3. Übermittlungsaktionen definieren

Schritt 1:

....:::: Formular erstellen ::::....

blueflameforms create formAuf der Hauptübersicht von Joomla Forms wählt man zuerst den Punkt "Create new From". Danach gelangt man auf die Seite zur Eingabe des Titels für das neue Formular. Der Titel dient zur Erkennung des Formulars für den Bearbeitungsbereich und wird auf der Webseite nicht dargestellt. Er kann zudem zu einem späteren Zeitpunkt geändert werden.

Nach der Eingabe des Titels klickt man auf "Create now" und gelangt danach zur Formularkonfiguration.

blueflameforms formular titel

In der Formularkonfiguration "Your forms" erscheint nun unser neu erstelltes Formular. Klicken Sie auf den Formulartitel um in den Bearbeitungsmodus des Formulars zu gelangen. Von hier aus können Sie anschliessend alle Einstellungen für Ihr neues Formular vornehmen.

Schritt 2:

....:::: Formularfelder definieren ::::....

blueflameforms-formfieldsEin Formular besteht aus mehreren Elementen, welche der Reihe nach definiert werden. Um ein erstes Formularfeld zu erstellen, licken wir links auf "Form Fields".

Zu den Basisfeldern von Formularen gehören 7 verschiedene Felder:

Textbox
Ist ein einzeiliges Textfeld, zum Beispiel für Name, Strasse, Wohnort. Es ist das am häufigsten verwendete Formularfeld. Oft wird es auch Input-Feld genannt.

Textarea
Ist ein Textbereich ähnlich wie die Textbox, jedoch mehrzeilig. Es wird meist für Kommentare und Nachrichten verwendet.

Passwort
Hat die gleichen Eigenschaften wie die Textbox, jedoch werden die Zeichen nur als Sterne *** dargestellt.

Select List
Ist ein Dropdown Menü mit meist mehreren vordefinierten werden, zum Beispiel für die Anrede (Herr, Frau). Bei einer Select List kann man üblicherweise nur einen Eintrag daraus auswählen.

Checkboxes
Werden als 4-eckige Kästchen dargestellt, welche bei Aktivierung mit einem Hacken versehen werden. Jede Checkbox ist unabhängig und kann entweder aktiviert oder nicht aktiviert sein, zum Beispiel für eine Bestätigung wie "Ja ich will den Newsletter abonnieren".

Radio Boxes
Werden als runde Knöpfe dargestellt und funktionieren ähnlich wie Checkboxes. Die Radio Boxes gehören jedoch als Gruppe zusammen und man kann daher jeweils nur eine Radio Box anwählen. Sie können zum Beispiel für die Anrede verwendet werden (Herr, Frau).

File Upload
Das letzte Element ist der Datei Upload, um es Benutzern zu ermöglichen, eigene Dateien an die Nachricht anzuhängen.

Als Beispiel wählen wir hier die Select List, um ein Dropdown zu erstellen. Geben Sie hierfür beim Punkt 1 einen Titel, wählen Sie bei Punkt 2 die Select List und klicken Sie bei Punkt 3 auf "Create now".

blueflameforms-newformfield

Als nächstes erscheint der Bearbeitungsmodus des neuen Formularelements. Dieser ist in mehrere Tabs aufgeteilt (General, Options, Validation, Filters, Permissions, Style) um die Einstellungen zu bündeln. Wir werden hier nur die wichtigsten aufgreifen, da alle Einstellungen beschrieben sind. Beginnen wir von vorne:

General
Hier werden der interne Name "Friendly Name", der "Public Field Title" so wie er auf der Webseite angezeigt wird sowie "HTML Field Name" als eindeutiger Bezeichner für das Formular eingegeben. Bei der Neuerstellung eines Element werden diese Werte bereits vorausgefüllt und können übernommen werden. Zu beachten ist, der Wert "HTML Field Name" wichtig für das richtige funktionieren des Formulars ist. Dieser Wert darf nicht mit Zahlen beginnen und ausschlisslich aus Kleinbuchstaben a-z sowie aus _ bestehen. Im vierten Bereich "Description/Instructions" kann eine Hilfestellung zu diesem Element angegeben werden.

blueflameforms-general

Options
Bei den Optionen kommt nun das Herzstück der Select List, nämlich die Werte des Dropdowns. Diese werden Zeile für Zeile eingegeben und bestehen entweder aus einem Wort resp. Text, oder aus einem VALUE|TEXT-Paar (wenn man möchte dass der Text auf der Webseite sich vom Wert der per Email versendet wird unterscheidet).

blueflameforms-options

Validation
Hier können Sie vordefinierte Einstellungn für die Formularelemente aktivieren, um zu Überprüfen, ob die Eingabe des Benutzers richtig sind. Das wichtigste Feld hier ist das "Basic Field > Requierd", wird dies auf "Yes" gesetzt, so MUSS der Benutzer hier eine Eingabe machen. Meist werden bei einem Kontaktformular Felder wie Name und Email-Adresse als required definiert, so dass der Benutzer das Formular nicht absenden kann, solange diese Elemente noch leer sind. Weitere nützliche Validierungen sind auch die Prüfung auf gültige Email-Adresse oder für numerische Zeichen (zum Beispiel Postleitzahl).

Filters
Mit Filtern können die Eingaben des Benutzers um nicht gewünschte Zeichen gefiltert werden.

Permissions
Mit Persmissions werden die Zugriffsberechtigungen gesetzt.

Style
Der Bereich Style ist abhängig vom Element, welches gewählt wurde. Es definiert jedoch bei allen die Art und Weise, wie das Element innerhalb des Formular dargestellt wird. Auch class-Zusätze können angegeben werden, welche anschliessend mittels CSS gestylt werden können.blueflameforms-save

Wenn wir fertig sind mit allen Einstellungen für unser Element, schliessen wir ab, indem wir oben rechts auf Save klicken.

 

Schritt 3:

....:::: Übermittlungsaktionen definieren ::::....

blueflameforms-submitactionNachdem wir nun alle Elemente unseres Formulars erstellt haben, müssen wir die Übermittlungsaktionen definieren. Hierfür klicken wir links auf "Submit Actions".
Sinnvoll sind mindestens drei Aktionen:

Thankyou - A Simple Thank you text
Die Danke-Seite erscheint nach der erfolgreichen Übermittlung des Formulars. Sie enthält meist einen simplen Text und kann beliebig gestaltet werden.

Send an email
Meist ist es sinnvoll, die vom Benutzer eingegeben Daten per Mail zu versenden. Dafür steht diese Funktion.
Achtung: bei dieser Aktion wird anhand der vorhandenen Formularelemente ein sogenanntes Template erstellt, welches alle Elemente beinhaltet. Werden Elemente nachträglich hinzugefügt oder gelöscht, muss dieses Template unbedingt angepasst werden.

Save submission to database
Diese Aktion ist nicht zwingend, jedoch nützlich, denn Sie speichert die eingegebenen Werte des Benutzers in die Datenbank. Sollte aus irgend einem Grund das versendete Email verloren gehen, so ist die Information hier dauerhaft gespeichert.