BreezingForms – Teil 4

Die ersten Felder wurden bereits in das Formular eingefügt. Mit den vorgestellten Möglichkeiten ist das Ende der (BreezingForms)-Fahnenstange allerdings längst noch nicht erreicht. Denn nach wie vor warten zahlreiche zusätzliche Optionen darauf, entdeckt zu werden. Im aktuellen Tutorial geht es darum, wie man das Formular mit Schaltflächen ausstatten kann, über die die Formularinhalte validiert und verschickt werden.

Wir empfehlen:
Joomla!-Training

Dass sich Felder relativ einfach anlegen lassen, wurde in den vorherigen Tutorials deutlich. Allerdings bereiten bestimmte Formularfelder erfahrungsgemäß das gleiche Problem: Oftmals wissen die Besucher nicht, was sie dort genau eintragen sollen bzw. erwarten eine Hilfestellung. Wie aber kann man den Besuchern hier helfend unter die Arme greifen? In Joomla! ist eine entsprechende Funktion integriert, die Ihnen sicherlich bereits aufgefallen ist.

Fährt man mit der Maus über ein solches Symbol, werden innerhalb von Tooltipps Hilfetexte angezeigt. So etwas eignet sich natürlich auch hervorragend für Formulare.  Stellt sich also beispielsweise heraus, dass Besucher ein bestimmtes Feld immer wieder fehlerhaft ausfüllen bzw. falsch interpretieren, können Sie einen entsprechenden Hilfetext hinterlegen. Solche Hilfetexte können Sie in den BreezingForms ganz einfach definieren.

Um ein Tooltipp anzulegen, wählen Sie im Bereich Statische den Wert Hinweis.

Über Weiter gelangt man zum Konfigurations-Dialog, in dem man die nötigen Angaben definieren kann. Der anzueigende Text wird dabei in das Text-Feld geschrieben.

Das Formular abschicken
Wie Sie Ihr Formular letztendlich gestalten, bleibt natürlich Ihnen überlassen. Eine Frage stellt sich aber dennoch: Wie kann man dafür sorgen, dass die Besucher die Formulardaten abschicken können? Das wird bekanntermaßen über eine Schaltfläche realisiert. Die BreezingForms stellen hier drei verschiedene Arten von Schaltflächen zur Verfügung.

  • Normaler Knopf – Dabei handelt es sich um einen normalen HTML-Submit-Button, wie Sie ihn von klassischen Formularen her kennen.
  • Grafikknopf – Ebenso können Sie auch grafische Schaltflächen einfügen. Dabei muss der Pfad zur Grafik in das Feld Grafik URL eingetragen werden. Parallel kann man der grafischen Schaltfläche auch noch einen Text zuweisen.
  • Piktogramm – Hier fungiert das angegebene Bild als Schaltfläche.

Auch dabei gilt wieder, dass es letztendlich Ihnen überlassen bleibt, für welche dieser Varianten Sie sich entscheiden. Viel wichtiger ist da schon die Frage, was die eingefügte Schaltfläche eigentlich können soll. Klar, ein einfaches Abschicken ist natürlich möglich. Das kennen Sie so von ganz normalen HTML-Formularen. Die BreezingForms können allerdings deutlich mehr leisten. So kann man beispielsweise auch mehrseitige Formulare realisieren. Damit aber man zwischen den einzelnen Seiten navigieren kann, muss eine entsprechende Schaltfläche vorhanden sein.

In den BreezingForms können die Schaltflächen mit Funktionen belegt werden. Wechseln Sie dazu in der entsprechenden Button-Konfiguration in das Register Skripte.

Auf dieser Seite stehen verschiedene Optionen zur Verfügung. Wählt man Kein, wird der Schaltfläche keine Funktion zugewiesen. Interessanter wird das Ganze dann aber schon, wenn man Bibliothek einstellt. Über das daraufhin eingeblendete Auswahlfeld werden von den BreezingForms verschiedene Skripte angeboten, die hier kurz vorgestellt werden sollen. An dieser Stelle gleich der Hinweis, dass sich sämtliche Skripte manuell anpassen bzw. konfigurieren lassen. Informationen dazu gibt es im weiteren Verlauf dieses Tutorials.
Zunächst die Navigationsskripte.

  • FF::ff_page1 – Seite 1 des Formulars
  • FF::ff_nextpage – nächste Seite
  • FF::ff_page2 – Seite 2 des Formulars
  • FF::ff_page3 – Seite 3 des Formulars
  • FF::ff_previouspage – vorherige Seite

Dann gibt es auch noch die folgende Bibliothek:

  • FF::ff_resetForm

Klickt ein Benutzer eine damit ausgestattete Schaltfläche an, werden sämtliche Formularinhalte gelöscht. Hilfreich ist diese Bibliothek somit also, wenn Sie einen Löschen-Button in Ihr Formular einfügen wollen.
Wenn Sie ein Hinweisfenster ausgeben wollen, wählen Sie die folgende Bibliothek:

  • FF::ff_showaction

Was in diesem Fenster tatsächlich angezeigt wird, kann man selbst definieren. Mehr dazu dann später.
Interessant sind auch die Skripte zum Validieren der Formulareingaben. Dank dieser Skripte kann man nämlich die Formulareingaben vor dem Abschicken überprüfen. Dabei wird zum Beispiel kontrolliert, ob alle Pflichtfelder ausgefüllt sind und ob im E-Mail-Feld tatsächlich eine (syntaktisch korrekte) E-Mail-Adresse eingetragen wurde. Insgesamt stehen die folgenden Varianten zur Verfügung:

  • FF::ff_validate_form
  • FF::ff_validate_nextpage
  • FF::ff_validate_page
  • FF::ff_validate_submit

Im Normalfall verwendet man sicherlich FF::ff_validate_submit. Dadurch werden die Formulareingaben kontrolliert. Stimmt alles, wird das Formular abgeschickt.

Die Skripte anpassen

Es ist ja bereits angeklungen, dass man die Skripte anpassen kann. Genau darum geht es jetzt. Warum diese Anpassungen wichtig sind, zeigt die folgende Abbildung:

Hier wurde das Formular abgeschickt. Die Meldung besagt, dass alle Eingaben korrekt sind. Das ist so zwar in Ordnung, allerdings ist der Fensterinhalt auf Englisch. An dieser Stelle gilt es also nachzubessern. Das ist problemlos möglich, denn alle Skripte lassen sich konfigurieren.

Zentrale Anlaufstelle für das Anpassen der Skripte ist das Register Skripte verwalten.

Der erste Aufruf des Registers wirkt ernüchternd, schließlich wird nur eine leere Seite angezeigt. Um das zu ändern und die tatsächlich verwendeten Skripte anzuzeigen, wählen Sie über das Paket-Feld den Wert FF aus.
 

Daraufhin werden sämtliche vorhandenen Skripte aufgeführt. Sehr schön ist dabei, dass die Skripte übersichtlich in einer Tabelle angeordnet sind. Wichtig ist vor allem die Name-Spalte, in der die Skriptnamen aufgeführt sind. So wissen Sie, welches Skript angepasst werden muss. Um ein Skript zu konfigurieren, klicken Sie dessen Namen an.

Aber Achtung: Um mögliche Probleme zu vermeiden, sollten Sie die Skripte vor einer möglichen Anpassung sichern. Auf diese Weise können Sie – wenn tatsächlich mal etwas schiefgeht – den Originalzustand wiederherstellen. Kopieren Sie sich den Inhalt des betreffenden Skripts also am besten in eine externe Datei.
Kleinere Anpassungen wie Übersetzungen u.ä. sind problemlos möglich. Will man aber die Funktionalität der Skripte verändern, dann sind mindestens Grundkenntnisse in JavaScript nötig. Bevor Sie eigene Funktionen definieren, sollten Sie aber überprüfen, ob nicht schon etwas Vergleichbares bei den BreezingForms mit an Bord ist.

Fazit
Sie haben es gesehen: Mit den BreezingForms lassen sich eben nicht nur einfache HTML-Formulare anlegen. Auch Formularvalidierungen und ausgefeilte Funktionen können integriert werden. Alle Möglichkeiten sind damit aber immer noch nicht ausgeschöpft. Die BreezingForms halten noch weitere interessante Features parat.

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