BreezingForms – Teil 2

Wie man die BreezingForms installieren kann, wurde bereits gezeigt. Und auch, dass einige Beispielformulare mit an Bord sind, wissen Sie. So richtig interessant werden die BreezingForms aber natürlich erst, wenn man seine eigenen Formulare anlegt. Genau diesem Aspekt widmen sich dieses und die nächsten Tutorials.

Wir empfehlen:
Joomla!-Training

Irgendwann möchte man Formulare nach seinen eigenen Vorstellungen entwerfen. Das ist mit den BreezingForms natürlich möglich. Ich möchte an dieser Stelle allerdings gleich darauf hinweisen, dass die Arbeit mit den BreezingForms durchaus einiges an Einarbeitungszeit erfordert. Denn zu viele Optionen stehen zur Verfügung, als dass man sofort immer gleich weiß, welche wofür da ist. Zudem ist es hilfreich, wenn man sich bereits grundlegend mit HTML auskennt. Dann nämlich kann man die Logik, die hinter den BreezingForms steckt, schneller durchschauen.

Um ein neues Formular anzulegen, rufen Sie Komponenten/BreezingForms/Formulare verwalten auf.

Prinzipiell gibt es zwei Möglichkeiten, die beide über die Werkzeugleiste erreichbar sind.

  • Easy Mode
  • Neu

Hinter Easy Mode verbirgt sich ein WYSIWYG-Editor.

Dieser lässt kaum Wünsche offen. Schließlich kann man mit dem seine Formulare fast so komfortabel wie in einem "echten" WYSIWYG-Editor anlegen und bearbeiten. Einen Haken hat das Ganze allerdings: Um den Easy Mode nutzen zu können, muss man den Firefox verwenden. Anwendern des Internet Explorers bleibt der Easy Mode hingegen versagt.

Denen steht lediglich der normale Modus zur Verfügung. Aber auch damit lassen sich natürlich ansprechende Formulare anlegen.

An dieser Stelle darf der Hinweis nicht fehlen, dass der Easy Mode ohnehin nicht immer hundertprozentig funktioniert und es hier und da schon mal bei der Platzierung der einzelnen Elemente hakt. Das ist auch einer der Gründe, warum in diesem und in den nächsten Tutorials auf die normale Neu-Variante zurückgegriffen wird. (Ganz nebenbei bleiben die Tutorials somit dann auch noch "browserunabhängig".)

Nachdem man also in der Werkzeugleiste auf Neu geklickt hat, wählt man Formulareinstellungen.

Hier müssen allgemeine Angaben zum Formular gemacht werden. Das, was man bei Titel einträgt, wird in der Joomla!-Administration verwendet. Anders sieht es mit dem bei Name einzutragenden Wert aus. Dieser wird später interessant, wenn man das Formular per Skript steuern möchte. Dieser Aspekt macht deutlich bzw. lässt vermuten, dass an den hier vergebenen Wert besondere Anforderungen gestellt werden. So dürfen dort weder Sonder- noch Leerzeichen verwendet werden. (Ausnahmen bilden der Sonder- und der Unterstrich.) Im aktuellen Beispielformular – das Ihnen auch in den nächsten Tutorials begegnen wird – werden die folgenden Werte verwendet:

  • Titel = Kontaktformular
  • Name = kontakt

Beachten Sie, dass es sich bei beiden Werten um Pflichtangaben handelt. Fehlen diese, lässt sich das Formular nicht speichern. Soll das Formular im Frontend sichtbar sein, stellen Sie die Option Veröffentlicht auf Ja.

Über die beiden Felder Breite und Höhe lassen sich die Dimensionen des Formulars bestimmen.

Standardmäßig werden die Formulardaten an die normale E-Mail-Adresse geschickt. Wollen Sie das ändern, stellen Sie über das Feld Email Benachrichtigung entweder Nein oder Zu Spezialadresse ein. Bei beiden Varianten öffnen sich zusätzliche Felder, in die man die entsprechende E-Mail-Adresse eintragen kann.

Die übrigen Werte wie beispielsweise CSS Klasse für <div> usw. werden – wenn überhaupt – später eine Rolle spielen. Ohnehin widmet man sich dem Feintuning erst, nachdem man alle Formularfelder angelegt hat.

Mit Speichern werden die Einstellungen übernommen. Daraufhin wird man automatisch auf die Übersichtsseite der in der aktuellen Installation vorhandenen Formulare umgeleitet.

Hier lassen sich die Formulare – wie das in Joomla! üblich ist – veröffentlichen, sortieren und nachträglich anpassen.

Felder anlegen
Bislang wurde lediglich das Grundgerüst des Formulars erstellt. Was noch fehlt, ist der eigentliche Inhalt, also die Formularfelder. Wie sich diese einfügen lassen, wird anhand eines Beispielformulars gezeigt. Auch wenn Sie bei sich möglicherwiese andere oder zusätzliche Felder benötigen: Das Arbeitsprinzip ist immer gleich.
    
Das Beispielformular enthält die folgenden Felder:

  • Mann/Frau
  • Name
  • Vorname
  • E-Mail-Adresse
  • Straße
  • Postleitzahl
  • Stadt
  • Newsletter
  • Ihr Anliegen
  • Nachricht

Hinter einigen dieser Felder verbergen sich BreezingForms-Spezialitäten. So wird beispielsweise bei dem Feld E-Mail-Adresse mittels eines Skripts automatisch überprüft, ob es sich bei dem vom Anwender eingetragenen Wert tatsächlich um eine E-Mail-Adresse handelt. (Stichwort Validierung)

Interessant ist aber auch das Newsletter-Feld. Darüber können die Besucher nämlich festlegen, ob sie einen Newsletter abonnieren wollen. Realisiert wird diese Abfrage über eine Checkbox.
Bei dem Feld Nachricht handelt es sich wiederum um ein mehrzeiliges Eingabefeld.

Um Formularfelder anzulegen, klicken Sie unter Formulare verwalten auf den Titel.

Beachten Sie, dass Sie unbedingt auf den Titel, nicht etwa auf den Namen klicken! Anschließend ruft man über die Neu-Schaltfläche in der Werkzeugleiste das Layout-Fenster auf. Dort können die gewünschten Felder angelegt werden. Klicken Sie dazu erneut in der Werkzeugleiste auf Neu.

Im ersten Schritt soll das Nachname-Feld angelegt werden. Dazu aktiviert man unter Eingaben die Option Text. Mit Weiter gelangt man zum nächsten Dialogfenster. Dort werden detaillierte Angaben zum Formularfeld erwartet. Im Nachname-Feld-Fall können Sie die folgenden Werte verwenden:

  • Titel = F_Nachname
  • Name = f_nachname

Während die beiden Werte Titel und Name "lediglich" interne Bedeutung haben, wird das, was bei Wert eingetragen wird, im Frontend innerhalb des Formularfeldes angezeigt. (Es wird dem value-Attribut des input-Elements als Wert zugewiesen.) Es sollte sich dabei also – wenn eine entsprechende Anzeige gewünscht ist – um einen lesbaren/echten Namen handeln. Für die Werte von Titel und Name gilt hingegen wieder, dass man dort weder Leer- noch Sonderzeichen verwenden sollte. (Im Beispielformular wird bei Wert nichts eingetragen.)

Mit Speichern werden die Einstellungen übernommen. Anschließend sieht man in der Entwurfsansicht das zuvor angelegte Feld.

Innerhalb dieser Ansicht können Sie das Feld an die gewünschte Position verschieben. Eines fällt jetzt allerdings auf: Die Benutzer wissen – aufgrund der fehlenden Beschriftung – momentan nicht, was sie eigentlich in das Feld eintragen sollen. Es muss also eine entsprechende Beschreibung her. Dazu klickt man in der Werkzeugleiste auf Neu und aktiviert unter Statische die Option Statischer Text/HTML. Mit Weiter geht es zum nächsten Schritt. Dort könnte man die folgenden Werte definieren:

  • Titel = BS_Nachname
  • Name = bs_nachname
  • Text/HTML = Nachname

Über Speichern werden die Einstellungen übernommen.

In der Rasterfläche lassen sich die beiden Elemente – also Feld und Feldbezeichnung – nebeneinander oder untereinander platzieren.

Fazit
Dieses Tutorial hat gezeigt, dass es gar nicht so kompliziert ist, die ersten Elemente in das Formular einzufügen. In den nächsten Tutorials kommen weitere Felder hinzu. Außerdem wird beschrieben, wie sich die Formulare per Skript steuern und so beispielsweise Validierungen realisieren lassen.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Joomla! für Einsteiger und Aufsteiger

Joomla! für Einsteiger und Aufsteiger

Was liegt wo und ist wie, mit welchem Inhalt verknüpft?! Nach diesem Kurs ist das keine Frage mehr! Mit Joomla! erstellst du Webseiten und behältst deren Inhalte jederzeit im kontrollierenden und koordinierenden Blick.

  • 28 Lektionen in über fünf Stunden Video-Training zum praktischen Umgang mit Joomla!
  • Lerne das CMS von Grund auf kennen und verwalte damit deine redaktionellen Webseiten-Inhalte
  • Praxisnah lernen: inklusive Arbeitsmaterialien zum Mitmachen und Nachvollziehen
  • Auf dem neuesten Stand: Optimiert für die aktuelle Joomla!-Version 3.6

Zum Training