Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.
 
Inhaltsverzeichnis
Vorwort
Teil I Grundlagen
1 Einleitung
2 Testumgebung einrichten
3 Live-Umgebung einrichten
4 Website planen
Teil II Joomla! benutzen
5 Website-Frontend kennenlernen
6 Administrations-Backend bedienen
7 Content verwalten
8 Contentpflege konfigurieren
9 Menüs aufbauen
10 Layout und Design anpassen
11 Benutzerverwaltung einrichten
12 Mehrsprachigkeit aktivieren
13 System konfigurieren
Teil III Joomla! erweitern
14 Erweiterungen aktivieren
15 Offizielle Joomla!-Komponenten
16 Empfohlene Erweiterungen
17 Joomla! als Content-Management‐System
18 Joomla! als Community-Plattform
19 Joomla! als Online-Shop
Teil IV Joomla! warten
20 Wartung allgemein
21 Joomla! und Content deployen
22 Sicherheit ausbauen
23 Performance- und Suchmaschinenoptimierung
24 Notfallmaßnahmen
Teil V Joomla!-Erweiterungen entwickeln
25 Grundlagen zur Erweiterungsentwicklung
26 Templates entwickeln
27 Plugins entwickeln
28 Module entwickeln
29 Komponenten entwickeln
30 Erweiterungen veröffentlichen
Stichwortverzeichnis

Jetzt Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Joomla! 3 von Richard Eisenmenger
Das umfassende Handbuch
Buch: Joomla! 3

Joomla! 3
Pfeil 17 Joomla! als Content-Management‐System
Pfeil 17.1 Beitragsverwaltung für Autoren mit User Article Manager
Pfeil 17.2 Bilder einbinden mit Phoca Gallery
Pfeil 17.2.1 Kategorien anlegen
Pfeil 17.2.2 Fotos hochladen
Pfeil 17.2.3 Album im Frontend darstellen
Pfeil 17.2.4 Fotoalben aus Picasa veröffentlichen
Pfeil 17.2.5 Phoca Gallery erweitern
Pfeil 17.3 Formulare entwerfen mit ChronoForms
Pfeil 17.3.1 Kontaktformular entwerfen
Pfeil 17.3.2 Sicherheitsabfrage mit reCAPTCHA/NoCaptcha integrieren
Pfeil 17.3.3 Dynamische Daten ins Formular ziehen
Pfeil 17.4 Content-Construction-Kit SEBLOD
Pfeil 17.4.1 Inhaltstyp anlegen
Pfeil 17.4.2 Inhalte auf Webseiten darstellen
Pfeil 17.4.3 Inhaltestrukturen über Referenzfelder abbilden
Pfeil 17.4.4 Weitere Ausgabeoptionen über Listen
 
Zum Seitenanfang

17.3    Formulare entwerfen mit ChronoForms Zur vorigen ÜberschriftZur nächsten Überschrift

Erweiterung ChronoForms
JED-Kategorie Contacts & Feedback • Forms
Download http://www.chronoengine.com/chronoforms/download
Zweck leistungsfähige Formularkomponente zur Erstellung einfacher Kontaktformulare bis hin zu komplexen Abbildungen von Shop-Checkouts, mit Datei-Uploads, Anbindung externer Daten und mehrseitigen Formularschritten

Wer mit viel Muße eine ansprechende und mit hochwertigen Inhalten befüllte Website im Internet bereitstellt, kommt ohne Feedback der Besucher nicht aus. Mindestens sollte jede Website über ein Kontaktformular verfügen, aber wie wäre es mit einer Umfrage über die Interessen Ihrer Benutzer, um die Inhalte noch passender aufzubereiten? Joomla! bietet im Rahmen der Kontaktkomponente derlei Formulare, diese sind jedoch strikt an einen Benutzer gebunden und nur über einen separaten Reiter auf der Kontaktseite des Ansprechpartners erreichbar. Zu umständlich für eine herkömmliche Website. An dieser Stelle kommt ein sogenannter Formularmanager ins Spiel, über den Sie solche Formulare entwerfen und verwalten und im idealen Fall auch die Formularantworten übersichtlich einsehen (siehe Abbildung 17.12).

Mit ChronoForms integrieren Sie beliebige Formulare in Ihre Website.

Abbildung 17.12    Mit ChronoForms integrieren Sie beliebige Formulare in Ihre Website.

ChronoForms ist wahrlich die eierlegende Wollmilchsau unter den Formularmanagern, mit der Sie hochdynamische Formulare erzeugen und theoretisch sogar den Check-out-Prozess eines Online-Shops umsetzen. Für das Reiseforum genügt allerdings erst einmal ein primitives Kontaktformular, dessen ausgefüllte Felder per E-Mail an den Webmaster geschickt werden.

 
Zum Seitenanfang

17.3.1    Kontaktformular entwerfen Zur vorigen ÜberschriftZur nächsten Überschrift

Auf der Download-Seite stehen außer der ChronoForms-Komponente ein Plugin und ein Modul zum Herunterladen bereit. Diese erweitern Joomla! dann um die Möglichkeit, die mit der Komponente entworfenen Formulare in einen Beitrag (Plugin) oder in ein Modul zu packen, das z. B. auf bestimmten Webseiten in der Seitenleiste erscheint. Für das einfache Kontaktformular-Szenario benötigen Sie allerdings ausschließlich die ChronoForms-Komponente.

Suchen Sie jetzt nach dem deutschen Sprachpaket für ChronoForms, werden Sie leider enttäuscht. Das Backend, in dem die Formulare zusammengeklickt werden, ist leider nur auf Englisch bedienbar, im Frontend erkennt ChronoForms automatisch die eingesetzte Sprache, um z. B. Fehlermeldungen für Formularfeldvalidierungen (gültige E-Mail-Adresse) verständlich anzubringen.

Hinweis: Begrüßt Sie ChronoForms nach der Komponenteninstallation mit der Meldung Your ChronoForms installation is not validated, ist das kein Fehler, sondern lediglich der Preis, den Sie für die Benutzung der kostenlosen Variante zahlen. Die Meldung verschwindet erst, wenn Sie Ihre ChronoForms-Installation kostenpflichtig registrieren.

Kontaktformular einrichten

Für eine so komplexe Komponente wie ChronoForms hilft es, sich vor der Implementierung kurz die Anforderungen anzusehen: Ziel ist die Bereitstellung eines Kontaktformulars, das Name, E-Mail-Adresse, die Frage »Woher kennen Sie diese Website?« und eine beliebige Textnachricht des Besuchers entgegennimmt. Danach wird eine Dankeseite angezeigt und eine Mail mit diesen Daten an den Webmaster sowie eine Dankemail an den Besucher verschickt. Ferner sollen die Angaben auch in einer Datenbanktabelle gespeichert werden, um später eine bessere Übersicht über alle ausgefüllten Formulare zu erhalten.

  1. Wechseln Sie über KomponentenChronoForms5 in den ChronoForms-Manager, und klicken Sie auf den Button New simple. Im Gegensatz zu New ist diese Formularkonfiguration etwas einfacher gehalten.

    Für das Kontaktformular besuchen Sie fünf der Konfigurationsreiter: General für allgemeine Einstellungen, Designer für die Formulargestaltung, Setup, um die E‐Mails und die Dankeseite einzustellen, DB Viewer für die Formatierung der ChronoForms-internen Darstellung der Anfragentabelle und schließlich Styles, um die Formulardarstellung anzupassen.

  2. Reiter General (siehe Abbildung 17.13)

    • Form name: Vergeben Sie dem Formular einen beschreibenden Namen; diesen Namen benötigen Sie später für die Konfiguration der Webseite, die das Formular darstellt, z. B. »Kontaktaufnahme«.

    • Form description: eine kurze interne Beschreibung nur für Ihre Übersicht

    • Published: Yes kennzeichnet das Formular als aktiv.

    • Setup Mode: Simple ist wegen des New simple-Buttons voreingestellt. Benötigen Formulare irgendwann spezielle Konfigurationen, ist die Komplexität hier auf Advanced umschaltbar.

    Im Reiter »General« vergeben Sie den Formularnamen, wichtig für die spätere Formulareinbettung in eine Website.

    Abbildung 17.13    Im Reiter »General« vergeben Sie den Formularnamen, wichtig für die spätere Formulareinbettung in eine Website.

  3. Reiter Designer (siehe Abbildung 17.14)
    Auf dieser Seite klicken Sie sich per Drag & Drop die Eingabefelder zusammen, aus denen das Formular besteht. Ziehen Sie das betreffende blaue Feld aus der linken Liste rechts in den großen Baukastenbereich. Unter Umständen müssen Sie zwischen den Überschriften Basic, Advanced und Widgets umherschalten, um das richtige Element zu finden. Haben Sie es im Baukastenbereich platziert, klicken Sie auf den Button Edit des neuen Formularfelds, um das Konfigurations-Popup zu öffnen und die auf den nächsten Seiten gelisteten Einstellungen vorzunehmen. Die Reihenfolge im Baukastenfeld steuern Sie übrigens wieder per Drag & Drop, diese ist also jederzeit nachträglich korrigierbar.

    Per Drag & Drop ziehen Sie alle Formularfelder in den großen Baukastenbereich auf der rechten Seite; eine Umsortierung ist jederzeit wieder durch Klicken und Ziehen mit der Maus möglich.

    Abbildung 17.14    Per Drag & Drop ziehen Sie alle Formularfelder in den großen Baukastenbereich auf der rechten Seite; eine Umsortierung ist jederzeit wieder durch Klicken und Ziehen mit der Maus möglich.

    Legen Sie nacheinander die folgenden Felder an, und bearbeiten Sie sie mit dem Edit-Button. Nachdem alle Konfigurationsfelder ausgefüllt sind, klicken Sie im Popup auf Save and Close, um mit dem nächsten Formularfeld fortzufahren. Tipp: Besuchen Sie gerne das Administrations-Backend der CMS-Begleitwebsite http://cms.joomla-handbuch.com/administrator, um die Formularkonfiguration am lebenden Objekt zu studieren.

    • Custom Code (aus dem Advanced-Bereich, siehe Abbildung 17.15): Dieses Feld nimmt benutzerdefinierten HTML-Code auf und wird verwendet, um dem Formular einen kleinen Einleitungstext voranzustellen. Schreiben Sie neben Label »Introtext« und in das Code-Feld einen beliebigen Text, am besten gleich HTML-konform innerhalb eines <p>-Tags, also z. B. »<p>Füllen Sie bitte dieses Formular aus, um mit uns Kontakt aufzunehmen.</p>«.

    • Text Box (aus dem Basic-Bereich): Die erste Textbox dient dem Namen des Kontaktsuchenden. Im Konfigurations-Popup (siehe Abbildung 17.16) schreiben Sie unter Field Name und Field ID »name«, das ist fortan die interne Bezeichnung für dieses Element (z. B. für die Datenbank-Tabellenspalte) . Label ist die Beschriftung, die vor dem Texteingabefeld erscheint, also »Ihr Name«. Placeholder ist ein Wort, das im Formular leicht transparent im Textfeld erscheint, aber sofort verschwindet, sobald der Benutzer seinen eigenen Text eingibt. Eine Art Hinweis oder Beispieltext, welche Eingabe in dem Feld erwartet wird, also »Name«. Um das Textfeld später per CSS individueller zu gestalten, vergeben Sie unter Class einen neuen CSS-Klassennamen, z. B. »reiseforum-textfield«, dann Save and Close.

      Formularfelder des Typs »Custom Code« nehmen beliebigen HTML-Code auf; für das Kontaktformular schreiben Sie einen Einleitungstext in ein <p>-HTML-Element.

      Abbildung 17.15    Formularfelder des Typs »Custom Code« nehmen beliebigen HTML-Code auf; für das Kontaktformular schreiben Sie einen Einleitungstext in ein <p>-HTML-Element.

      Im Reiter »General« der »Text Box« vergeben Sie u. a. den internen Feldnamen und die Beschriftung (»Label«).

      Abbildung 17.16    Im Reiter »General« der »Text Box« vergeben Sie u. a. den internen Feldnamen und die Beschriftung (»Label«).

    • Text Box: Die zweite Box wird die E-Mail-Adresse enthalten, also: Field Name und Field ID »emailaddress«, Label »Ihre E-Mail-Adresse«, Placeholder »name@domain.de« und dieselbe neue CSS-Klasse wie beim letzten Textfeld »reiseforum-textfield«. Bevor Sie jetzt auf Save and Close klicken, scrollen Sie noch einmal nach oben und wechseln auf den Reiter Validation (siehe Abbildung 17.17). Über diese Liste aktivieren Sie ChronoForms-interne Formularfeldvalidierungen, ob der Benutzer z. B. eine gültige Telefonnummer (nur Ziffern) oder Webadresse (muss http:// oder https:// enthalten) angab. In diesem Fall stellen Sie die Dropdown-Liste Email auf Yes, dann lässt sich das Formular später nur abschicken, wenn die E-Mail-Adresse z. B. ein @-Symbol enthält. Am oberen Ende der Liste stellen Sie außerdem Required auf Yes, denn das Formular verschickt später eine Bestätigungsmail an den Benutzer; darum wird die E‐Mail-Adresse zum Pflichtfeld.

      Formularfeldvalidierungen sind ein wichtiger Mechanismus, um die Gültigkeit der Feldinhalte sicherzustellen, z. B. muss eine E-Mail-Adresse ein @-Zeichen enthalten; jedes ChronoForms-Formularfeld verfügt dazu über einen Reiter »Validation«.

      Abbildung 17.17    Formularfeldvalidierungen sind ein wichtiger Mechanismus, um die Gültigkeit der Feldinhalte sicherzustellen, z. B. muss eine E-Mail-Adresse ein @-Zeichen enthalten; jedes ChronoForms-Formularfeld verfügt dazu über einen Reiter »Validation«.

    • Textarea Box: Ein mehrzeiliges Texteingabefeld für die Nachricht, von der Konfiguration fast identisch mit einzeiligen Textboxen. Field Name und Field ID sind »message«, Label ist »Ihre Nachricht« und Placeholder »Das Reiseforum ist wirklich eine tolle Website. Hut ab!«. Als CSS-Class vergeben Sie aber eine andere Bezeichnung, z. B. »reiseforum-textarea«, da mehrzeilige Textfelder gesondert formatiert werden. Über die Felder Rows und Columns steuern Sie außerdem die Anzahl der Spalten und Zeilen, also Breite und Höhe des Textfelds. Noch eine Besonderheit: Ohne Nachricht macht das ganze Kontaktformular keinen Sinn, darum wird diese Texteingabe ebenfalls zum Pflichtfeld, ohne die das Formular nicht abgesendet werden darf. Wechseln Sie auf den Reiter Validation, und stellen Sie Required (notwendig) auf Yes.

    • Dropdown: Das Bonusfeld, in dem Besucher angeben können, woher sie das Reiseforum kennen, ist eine Dropdown-Liste. Hinter Field Name und Field ID schreiben Sie »reference«. Unter Options wird es interessant: Es handelt sich um die Liste der Auswahlmöglichkeiten, die in der Dropdown-Liste erscheinen, pro Zeile ein Eintrag nach dem Schema programminterner-Name=dargestellter-Name. Der Grund für die Angabe von zwei Bezeichnungen: Programminterne Namen (z. B. für Quellcodevariablen) dürfen keine Leerzeichen enthalten, dargestellte Namen aber sehr wohl, was der Leserlichkeit zuträglich ist. Einige Beispieleinträge aus dem Reiseforum-Dropdown:

      google=Google-Suchergebnis
      searchengine=Andere Suchmaschine
      website=Irgendeine Website
      joomla-book=Joomla!-Handbuch
      joomla-book-website=Website des Joomla!-Handbuchs
      friends=Von einem Freund
      collegue= Von einem Kollegen
      tv=Aus dem Fernsehen
      other=Ich bin nur zufällig da. Was ist das hier?

      Abschließend schreiben Sie hinter Empty Option »Auswahl«, das ist der im Dropdown-Feld befindliche Text, wenn das Formular das erste Mal erscheint. Hinter Label gehört »Woher kennen Sie das Reiseforum?« und hinter CSS-Class »reiseforum-dropdown«. Save and Close.

    • Submit Button: Das letzte Feld ist schließlich der Absenden-Button am unteren Ende des Formulars. Die Edit-Konfiguration: Name und ID heißen »submitbutton«, die Beschriftung Value/Label »Nachricht absenden«. Im Feld Class befinden sich bereits einige CSS-Klassen, genauer gesagt, vom Bootstrap-CSS-Framework. Um Ihre eigene zu ergänzen, führen Sie die Liste mit einem Leerzeichen fort, sodass dort am Ende »btn btn-default reiseforum-submit« steht. Save and Close.

    Im nächsten Schritt konfigurieren Sie die Befüllung der Ergebnisdatenbanktabelle, in der später die abgesendeten Formularfelder gespeichert werden. Dazu erzeugen Sie zunächst die neue Tabelle, die übrigens in derselben Datenbank entsteht, in der Joomla! alle Inhalte speichert: Speichern Sie Ihre Eingaben, und verlassen Sie die Formularkonfiguration über den Save and Close-Button in der oberen rechten Ecke. Dann markieren Sie den Formulareintrag Kontaktformular links mit einem Häkchen und klicken auf den Button Create table.

    Beispiel für die vollständige »Designer«-Konfiguration eines einfachen Kontaktformulars

    Abbildung 17.18    Beispiel für die vollständige »Designer«-Konfiguration eines einfachen Kontaktformulars

    Sie sehen jetzt die Datenblattansicht für die neue Tabelle, die untereinander alle Formularfelder und einige zusätzliche Daten (fortlaufende Nummer, Erstellungsdatum etc.) listet (siehe Abbildung 17.19). Ähnliche Ansichten kennen Sie vielleicht auch von phpMyAdmin bei der Tabellenerzeugung oder Datensatzbearbeitung. ChronoForms ist so schlau, bereits alle Felder, die Sie gerade eingefügt haben, vorauszufüllen. Sie vergeben jetzt nur noch einen internen Tabellennamen neben Table name, z. B. »reiseforum_kontaktaufnahmen« (Vorsicht: darf kein Leer- oder Sonderzeichen enthalten!), und klicken auf Save.

    Klicken Sie jetzt auf den Button Test form (siehe Abbildung 17.20). Nach der Konfiguration aller Eingabefelder lässt sich über diese Vorschau prüfen, wie das Formular im Frontend aussieht. Füllen Sie das Formular ruhig schon aus, und schicken Sie es ab, damit Sie später einige Testdaten zur Verfügung haben. Wundern Sie sich aber nicht: Eine Dankeseite gibt es zurzeit noch nicht.

    Über den Button »Create table« erzeugen Sie pro ChronoForms-Formular eine Datenbanktabelle, die die Formularergebnisse speichert.

    Abbildung 17.19    Über den Button »Create table« erzeugen Sie pro ChronoForms-Formular eine Datenbanktabelle, die die Formularergebnisse speichert.

    Über den Button »Test Form« erhalten Sie eine Vorschau des Formulars, obwohl Sie noch keine Webseite über den Menümanager angelegt haben.

    Abbildung 17.20    Über den Button »Test Form« erhalten Sie eine Vorschau des Formulars, obwohl Sie noch keine Webseite über den Menümanager angelegt haben.

    Zurück in die Formularkonfiguration gelangen Sie durch einen Klick auf den Formularnamen Kontaktaufnahme.

  4. Reiter Setup
    Hinter dem Setup-Reiter verbergen sich grün hinterlegte Unterreiter, die das Verhalten des Formulars steuern. Für Sie interessant sind die Reiter Data Save, um die eingegebenen Daten in einer Datenbank zu speichern, Email und Email für die E-Mails an Webmaster und Benutzer und Thanks Message, der Text für die Webseite, die nach dem Absenden des Formulars erscheint, auch als Dankeseite bekannt.

    • Unterreiter Data Save (siehe Abbildung 17.21): Vergeben Sie unter Action Label einen beliebigen Namen, z. B. »Speicherung aller Kontaktanfragen«, und stellen Sie Enabled (aktiviert) auf Yes. Um dem Formular mitzuteilen, in welcher Datenbanktabelle die Formularergebnisse landen, wählen Sie aus der Dropdown-Liste Table name die eben erzeugte Ergebnistabelle (reiseforum_kontaktaufnahmen). Die übrigen hier gelisteten Tabellen sind Joomla!-intern. Vorsicht also, dass Sie die Formularergebnisse nicht versehentlich in der Benutzertabelle speichern!

      Zur Speicherung der Formularinhalte genügt eine eigene beschreibende Kennzeichnung, die Aktivierung unter »Enabled« und die Angabe, in welche Tabelle die Daten geschrieben werden.

      Abbildung 17.21    Zur Speicherung der Formularinhalte genügt eine eigene beschreibende Kennzeichnung, die Aktivierung unter »Enabled« und die Angabe, in welche Tabelle die Daten geschrieben werden.

    • Unterreiter Email: Den Reiter Email gibt es gleich zweimal, denn für gewöhnlich versendet ein Formularmechanismus zwei Mails: eine an den Webmaster mit den eigentlichen Formularinhalten und eine zweite an den Besucher, der das Formular ausfüllte, eine Art »Vielen Dank für Ihre Nachricht«-Antwort. Befüllen Sie also zunächst das erste Formular wie in Abbildung 17.22. Action Label ist eine beliebige interne Kennzeichnung, Enable auf Yes, dann unter To die Absender-E-Mail-Adresse (z. B. des Joomla!-Webmasters) und unter Subject der Betreff, z. B. »Neues Reiseforum-Kontaktformular wurde ausgefüllt«.

      Die Bestätigungsmail an den Webmaster besteht aus HTML-Code; beim Mailversand befüllt ChronoForms die Platzhalter mit echten Daten aus dem Formular.

      Abbildung 17.22    Die Bestätigungsmail an den Webmaster besteht aus HTML-Code; beim Mailversand befüllt ChronoForms die Platzhalter mit echten Daten aus dem Formular.

      From name und From email sind Name und E-Mail-Adressen des Absenders, sozusagen ein virtueller Joomla!-Webmaster, da die Nachricht von der Website verschickt wird. Für das Reiseforum gibt es hierfür eine besondere allgemeine Adresse, »info@reiseforum.joomla-handbuch.com«. Auch eine »noreply@«- oder »nichtantworten@«-Adresse ist an dieser Stelle denkbar, falls Sie unter dieser Adresse wirklich nur Systemmails verschicken, aber keine Mails empfangen. Email format belassen Sie bei Html, Template generation bei Custom. Das große Textfeld Email template enthält den Fließtext der Mail. Sie dürfen hier HTML-Tags verwenden und Platzhalter für die Eingaben, die der Benutzer im Kontaktformular machte. Diese Platzhalter setzen Sie in geschweifte Klammern und verwenden dieselben Variablenbezeichnungen, die Sie zuvor bei der Konfiguration im Reiter Designer vergaben.

      Die Fließtextvorlage für die Webmastermail des Reiseforums sieht z. B. so aus:

      <p><strong>{name}</strong>  
      hat das Kontaktformular des Reiseforums
      ausgeüllt.</p>
      <p>Die E-Mail-Adresse lautet: {emailaddress}</p>
      <p>{name}s Nachricht lautet:</p>
      <br/>
      <p><em>{message}</em></p>
      <p>{name} kennt das Reiseforum von: {reference}</p>

      Listing 17.1    Inhalt des Felds »Email template« für die Webmaster-Mail; ChronoForms’ Platzhalter sind im Listing hervorgehoben.

    • Unterreiter Email: Die zweite E-Mail-Konfiguration ist die Bestätigungsmail an den Benutzer, der das Formular ausfüllte. Action Label ist wieder eine interne Bezeichnung, damit Sie die Formulare nicht verwechseln, z. B. »E-Mail an den Besucher«. Enabled steht auf Yes, das Feld To lassen Sie dieses Mal aber leer, denn es wird dynamisch befüllt; dazu gleich mehr. Subject ist wieder der Betreff (»Vielen Dank für Ihre Nachricht«), und unter From name und From email tragen Sie die Website-E-Mail-Adresse ein (»Reiseforum«, »info@reiseforum.joomla-handbuch.com«). Das Email template ist simpler, ohne Platzhalter, und enthält nur einen generischen Danketext.

    • Wechseln Sie jetzt auf den Reiter Advanced (siehe Abbildung 17.23). Vorsicht, dieser befindet sich in der dritten Reiterebene, die fortgeschrittene E-Mail-Konfiguration unter den grau und grün hinterlegten Reiterzeilen. In das Feld Dynamic To tragen Sie »emailaddress« ein, die Variablenbezeichnung für das E-Mail-Feld (aus dem Designer), in das der Besucher im Formular seine Mailadresse eintrug. Dynamic bedeutet, dass die Empfängeradresse der Mail nicht starr ist wie bei der Webmastermail oben, sondern dynamisch, da jeder individuelle Benutzer natürlich seine eigene Mailadresse hat. »emailaddress« ist somit ein Platzhalter, ähnlich wie im Email template der Webmastermail, diesmal allerdings ohne geschweifte Klammern.

    • Die übrigen Felder sind im Moment nicht relevant, aber Sie erahnen ihre Funktion. Ein Dynamic subject könnte ebenfalls ein Formularfeld des Kontaktformulars enthalten, das als Betreffzeile herhält. Dynamic from name/email könnte flexible Empfängeradressen enthalten, die im Kontaktformular aus einer Dropdown-Liste gewählt würden (»Welche Abteilung möchten Sie kontaktieren?«).

      Die Dankemail an den Benutzer enthält ein dynamisches Feld: die »emailaddress«, die der Benutzer beim Ausfüllen des Kontaktformulars angegeben hatte.

      Abbildung 17.23    Die Dankemail an den Benutzer enthält ein dynamisches Feld: die »emailaddress«, die der Benutzer beim Ausfüllen des Kontaktformulars angegeben hatte.

    • Unterreiter Thanks Message (siehe Abbildung 17.24): Zu guter Letzt konfigurieren Sie unter Thanks Message den Inhalt der Danke-Webseite, die erscheint, nachdem der Benutzer das Kontaktformular abgesendet hat. Action Label ist wieder frei wählbar. Unter Message content schreiben Sie einen kurzen »Vielen Dank für Ihre Nachricht.«-Text. Da dieses Textfragment Bestandteil der Webseite wird, sind auch HTML-Tags erlaubt. Über den Button Switch Editor schalten Sie sogar zum WYSIWYG-Editor, um die Nachricht komfortabler zu formatieren.

      Die »Thanks Message« enthält den Inhalt der Dankeseite, die im Frontend nach Absenden des Kontaktformulars erscheint.

      Abbildung 17.24    Die »Thanks Message« enthält den Inhalt der Dankeseite, die im Frontend nach Absenden des Kontaktformulars erscheint.

    Nach vollendeter Setup-Konfiguration klicken Sie wieder oben rechts auf Save – sicher ist sicher.

  5. Reiter DB Viewer
    Dieser Reiter enthält Einstellungen zur administratorinternen Ansicht der Formularergebnistabelle, die Sie erzeugten. Genauer gesagt, geben Sie hier die Variablen, die Formularfelder und eine passende Spaltenüberschrift an, pro Zeile eine Zuweisung nach dem Schema Variablenname=Spaltenüberschrift. Am Ende steht im Textfeld z. B.:

    name=Anfrage von
    created=am
    emailaddress=E-Mail-Adresse
    message=Nachricht
    reference=Kennt Reiseforum&nbsp;von

    Das war’s mit den Einstellungen. Klicken Sie auf Save und Close, um die Kontaktformularkonfiguration zu speichern und zu ChronoForms’ Hauptansicht zurückzukehren.

Nun ist der Zeitpunkt gekommen, das neue Formular auf Herz und Nieren zu testen. Klicken Sie einige Male auf den Button Test form, um einige Browsertabs mit dem Kontaktformular zu öffnen, befüllen Sie die Felder, klicken Sie auf Nachricht absenden, und überprüfen Sie, ob die Dankeseite so erscheint, wie Sie das unter dem Reiter Thanks Message konfigurierten.

Zurück in ChronoForms werfen Sie einen Blick in die Formularergebnistabelle, die all die Daten enthält, die Sie während Ihrer Tests eingegeben hatten. Klicken Sie auf den kleinen Dropdown-Pfeil (inline image) in der Spalte Connected Tables (siehe Abbildung 17.25). Wählen Sie die Tabelle, die Sie zu Beginn dieses Abschnitts für die Aufnahme der Formularergebnisse anlegten.

Über die Spalte »Connected Tables« greifen Sie auf die Ergebnistabelle zu, die alle Formulareingaben mitprotokolliert.

Abbildung 17.25    Über die Spalte »Connected Tables« greifen Sie auf die Ergebnistabelle zu, die alle Formulareingaben mitprotokolliert.

Auf der folgenden Seite erscheint nun eine übersichtliche Tabelle mit allen Formulareingaben (Beispiel siehe Abbildung 17.26): ein ausgefülltes Kontaktformular pro Zeile und in den Spalten die Formularfelder, die Sie über die DB-Viewer-Konfiguration einstellten.

Über die Buttonleiste löschen Sie einzelne, vorher markierte Einträge (Delete) oder laden die komplette Tabelle oder markierte Einträge per Backup table bzw. Backup records als CSV-Datei herunter. Solch eine Textdatei mit kommagetrennten Formularwerten lässt sich dann z. B. in Excel weiterverarbeiten. (Tipp: In Excel nicht über Datei öffnen oder einen Doppelklick auf die CSV-Datei öffnen, sondern über das Menüband DatenAus Text importieren, sonst erkennt Excel das Komma nicht als Trennzeichen.)

Mit »Backup table« bzw. »Backup records« exportieren Sie die Formularergebnisse als CSV-Datei, über »Cancel« gelangen Sie zurück zur Formularübersicht.

Abbildung 17.26    Mit »Backup table« bzw. »Backup records« exportieren Sie die Formularergebnisse als CSV-Datei, über »Cancel« gelangen Sie zurück zur Formularübersicht.

Kontaktformular im Frontend darstellen

Haben Sie Ihr Kontaktformular perfekt abgestimmt und hinreichend getestet, folgt der letzte Schritt: das Einbinden des Formulars als Webseite. Das geschieht außerhalb von ChronoForms über den Menümanager, und zwar am besten als Menüpunkt im Footer Menu, da man derlei Webseiten in der Regel nicht im primären Menü erwartet:

  1. Wechseln Sie über das Menü MenüsFooter MenuNeuer Menüeintrag zur Anlage einer neuen Webseite.

    • Menütitel: »Kontaktaufnahme«

    • Menüeintragstyp: ChronoForms5ChronoForms5 form

  2. Entscheidend ist eine Konfiguration im Reiter Optionen. Damit die ChronoForms-Webseite weiß, welches Formular anzuzeigen ist, tragen Sie seinen Namen ins Feld Form Name, z. B. »Kontaktaufnahme«.

  3. Speichern & Schliessen Sie die Webseitenkonfiguration, und prüfen Sie die korrekte Darstellung und Funktionalität des Formulars im Frontend. Wichtig ist die Ergebnistabellenbefüllung und dass beide E-Mails versendet werden. Erschien das Formular zwar bei den Test-form-Vorschauen, wird aber nicht auf der Webseite angezeigt, prüfen Sie noch mal das korrekt ausgefüllte Feld Form Name des Menüeintrags.

Somit steht die Basisversion eines Kontaktformulars, das für viele Websites oft ausreicht. In den folgenden Abschnitten steigen Sie etwas tiefer in die ChronoForms-Funktionalitäten ein und lernen den Einsatz von CAPTCHAS und dynamisch angezogenen Daten kennen.

 
Zum Seitenanfang

17.3.2    Sicherheitsabfrage mit reCAPTCHA/NoCaptcha integrieren Zur vorigen ÜberschriftZur nächsten Überschrift

Werfen Sie noch mal einen genauen Blick auf die Formularergebnistabelle in Abbildung 17.26. Nigerianische Prinzessin? Sofort-Bargeld-Auszahlungen? Kein normaler Reiseforumsbesucher würde solch einen Unsinn ins Kontaktformular schreiben. Spambots aber wohl. Die sind an sieben Tagen 24 Stunden im Internet unterwegs, um genau solche Formulare ausfindig zu machen, wie Sie eben eines erstellten. Dann laden sie ihren Werbemüll in die Formularfelder und hoffen auf die 0,0001 % derjenigen, die tatsächlich reagieren.

Eine recht erfolgreiche Mechanik, diesem Spam entgegenzuwirken, ist die Ergänzung eines CAPTCHAs im Formular. Das ist ein Eingabefeld, in das der Benutzer eingeben muss, welche Buchstaben- und/oder Zahlenkombinationen er auf einem kleinen Bildchen erkennt. Spambots scheitern an der Interpretation dieser zum Teil unscharfen, verwackelten und schiefen Fotos und können das Formular daher nicht absenden. Perfekt für Ihr Kontaktformular. Joomla! erlaubt übrigens auch einen website-weiten Einsatz von CAPTCHAs völlig unabhängig von ChronoForms. Mehr dazu lesen Sie in Abschnitt 22.1, »reCAPTCHA/NoCaptcha aktivieren«. Dort finden Sie auch Instruktionen zur Beschaffung des Websiteschlüssels und des Geheimen Schlüssels, die Sie beide für die CAPTCHA-Konfiguration benötigen.

Hinweis: reCAPTCHA ist die aktualisierte Variante des Original-CAPTCHA. Alternativ benutzen Sie für Ihre Formulare auch die neueste Version NoCaptcha, die noch einfacher zu bedienen ist und statt der Eingabe eines Zahlen- oder Buchstabencodes nur noch das Setzen eines Häkchens erfordert – siehe Vergleich in Abbildung 17.27.

Achtung: Falls Sie das NoCaptcha nutzen möchten, ist eine weitere Konfiguration in Joomla! notwendig. Bearbeiten Sie dazu die Einstellungen des Plugins Captcha - ReCAPTCHA, und stellen Sie die Dropdown-Liste Version auf 2.0.

Beispiele für altes CAPTCHA (oben), das am weitesten verbreitete reCAPTCHA (Mitte) und die neueste Variante NoCaptcha (unten)

Abbildung 17.27    Beispiele für altes CAPTCHA (oben), das am weitesten verbreitete reCAPTCHA (Mitte) und die neueste Variante NoCaptcha (unten)

Kontaktformular um CAPTCHA ergänzen

  1. Für die Integration eines CAPTCHA, reCAPTCHA oder NoCaptcha wechseln Sie zunächst in die Konfiguration Ihres Kontaktformulars und dort auf den Reiter Designer.

  2. In der Feldauswahl auf der linken Seite wählen Sie die Gruppe Advanced.

  3. Ziehen Sie jetzt das Feld Recaptcha (auch beim Einsatz des NoCaptcha) in den Formularbaukastenbereich auf der rechten Seite, und positionieren Sie das neue Element per Drag & Drop über den submitbutton.

  4. Klicken Sie im neuen Recaptcha-Element auf den Button Edit, und beschriften Sie das Feld neben Label, z. B. »Sicherheitsabfrage«, und bestätigen Sie mit Save and Close (siehe Abbildung 17.28).

    Über den »Designer« fügen Sie das neue Formularelement »Recaptcha« in das Kontaktformular.

    Abbildung 17.28    Über den »Designer« fügen Sie das neue Formularelement »Recaptcha« in das Kontaktformular.

  5. Die Darstellung des reCAPTCHA-Elements in Ihrem Formular erfordert eine weitere Konfiguration. Es handelt sich nämlich nicht nur um ein einfaches Formularfeld; im Hintergrund verrichtet JavaScript-Code seinen Dienst, um die reCAPTCHA-Bilder vom Google-Server zu laden und beim Absenden des Formulars auf die richtige Eingabe des Codes zu prüfen. Diese Mechanik aktivieren Sie über den Reiter Setup. In der zweiten, grün hinterlegten Reiterebene ist ein neues Element erschienen: Captcha (siehe Abbildung 17.29). Klicken Sie darauf, stellen Sie Enabled auf Yes, und geben Sie eine deutschsprachige Fehlermeldung ein, z. B. »Das ist nicht der richtige CAPTCHA-Code«.

    Hinweis: Die Einrichtung des NoCaptchas ist leider nur im fortgeschrittenen Konfigurationsmodus möglich, siehe folgender Abschnitt.

    Ergänzen Sie im »Designer« neue Formularfelder, erweitern sich automatisch die Konfigurationsoptionen im Reiter »Setup«.

    Abbildung 17.29    Ergänzen Sie im »Designer« neue Formularfelder, erweitern sich automatisch die Konfigurationsoptionen im Reiter »Setup«.

  6. Klicken Sie auf Save und dann auf Test form für eine Formularvorschau.

Abhängig vom Wechselspiel der bei Ihnen installierten Joomla!- und ChronoForms-Version sehen Sie nun das Formular mit korrekter CAPTCHA-Darstellung oder einer rätselhaften {ReCaptcha}-Ausgabe. In beiden Fällen ist nun ein Wechsel in den fortgeschrittenen Konfigurationsmodus notwendig, denn nur dort lassen sich die CAPTCHA-Einstellungen finalisieren.

Fortgeschrittenen Konfigurationsmodus bedienen

In diesem Abschnitt schließen Sie die CAPTCHA-Konfiguration ab und lernen den fortgeschrittenen Konfigurationsmodus kennen, der nicht viel komplizierter, aber deutlich flexibler ist.

Der Unterschied zwischen einem einfachen (Simple) und einem normalen (Advanced) ChronoForms-Formular ist die Konfiguration der einzelnen Elemente unter dem Reiter Setup auf Basis von Formularereignissen. Das ist ein in der Programmierung verbreitetes Konzept, um die Ausführung von Anweisungen zu initiieren. Das Programm führt ein Kommando genau dann aus, wenn etwas Bestimmtes passiert. Im Kontext Ihres Kontaktformulars ist solch ein Ereignis beispielsweise das Laden und Anzeigen des Formulars oder das Klicken des Absenden-Buttons.

  1. Wechseln Sie in die Konfiguration Ihres Kontaktformulars, und setzen Sie die Dropdown-Liste Setup Mode von Simple auf Advanced. Damit die Formularkonfiguration in den Fortgeschrittenenmodus umschaltet, speichern Sie die Einstellungen über den Button Save.

  2. Wechseln Sie jetzt auf den Reiter Setup, präsentiert sich Ihnen ein völlig anderes Bild (siehe Abbildung 17.30). Die grün hinterlegten Einstellungsreiter sind einem Baukasten gewichen, der an den Reiter Designer erinnert. Allerdings sehen Sie keine Formularfelder, sondern mit bunten Einträgen befüllte verschachtelte Kästen. Dies ist die vollständige Formularlogik als Liste aufeinanderfolgender Ereignisse (englisch: Event). Sämtliche Einstellungen, die Sie hier sehen, hat ChronoForms bereits auf Basis Ihrer Simple-Konfiguration eingetragen.

    Die äußersten beiden Kästen tragen die Beschriftungen On load und On Submit und repräsentieren die Ereignisse beim Laden (Darstellung auf der Webseite) und beim Absenden (Klick auf den Button) des Formulars. Von diesen Ereignissen ausgelöst, arbeitet das Formular die blau hinterlegten Aktionen ab, die allesamt aus der umfangreichen Baukastenliste auf der linken Seite stammen.

    • On load

      Aktionen beim Laden bzw. Darstellen des Formulars. Load JavaScript, Load CSS und HTML (Render Form) entsprechen den üblichen Bestandteilen einer Webseite oder, wie hier, eines ChronoForms-Formulars. Wichtig ist hier vor allem HTML (Render Form), die Aktion, die das Formular tatsächlich darstellt.

      Im »Advanced«-Modus sehen Sie die detaillierte Logik des Kontaktformulars auf Basis sogenannter Ereignisse.

      Abbildung 17.30    Im »Advanced«-Modus sehen Sie die detaillierte Logik des Kontaktformulars auf Basis sogenannter Ereignisse.

      Weiter oben sehen Sie die Aktion Load Captcha. An dieser Stelle hat sich in der vorliegenden ChronoForms-Version (5.0.9) ein kleiner Hund eingeschlichen. Die Aktion Load Captcha bereitet die Bilder- und Abfragelogik des CAPTCHAs vor, bevor das Formular erscheint (HTML (Render Form)), und ist demzufolge in der Aktionenliste an höherer Stelle. Das Problem: Load Captcha behandelt den alten CAPTCHA- und nicht den neuen reCAPTCHA- oder NoCaptcha-Mechanismus. Ein Fehler der Simple-Konfiguration, die beim Einfügen des Recaptcha-Felds hier die falsche Aktion eintrug. Denn öffnen Sie die Baukastengruppe Anti Spam auf der linken Seite, finden Sie in der Liste durchaus ein Load ReCaptcha-Element.

      Die Reparatur ist einfach: Klicken Sie rechts beim Load Captcha-Element auf den Button Delete, um es zu löschen. Dann ziehen Sie das Load ReCaptcha-Element oder, falls Sie NoCaptcha einsetzen, das Load Google NoCaptcha-Element aus der Baukastengruppe Anti Spam in den On load-Bereich und positionieren es oberhalb des Elements HTML (Render Form). Klicken Sie auf Edit, und tragen Sie unter Public Key den Websiteschlüssel ein, den Sie vorbereitend über die Website https://www.google.com/recaptcha erhielten (siehe Abbildung 17.31). (Eine ausführliche Anleitung finden Sie in Abschnitt 22.1, »reCAPTCHA/NoCaptcha aktivieren«.) Unter Theme haben Sie ferner die Möglichkeit, ein Farbschema einzusetzen (Clean und White sind wesentlich farbneutraler als die anderen Optionen). Last, but not least stellen Sie Language auf German, um die reCAPTCHA-Beschriftungen im Frontend in der richtigen Sprache anzuzeigen. Save and Close.

      »Public Key« ist der »Websiteschlüssel«, den Sie über »https://www.google.com/recaptcha« beziehen.

      Abbildung 17.31    »Public Key« ist der »Websiteschlüssel«, den Sie über »https://www.google.com/recaptcha« beziehen.

    • On submit

      Diese Aktionen werden ausgeführt, sobald der Benutzer auf den Absenden-Button des Formulars klickt. Das sieht auf den ersten Blick komplex aus, lässt sich aber einfach Stück für Stück auseinandernehmen.

      Der erste Aktionsblock, also unmittelbar nach dem Klick auf den Absenden-Button, heißt Check Captcha, und er dient dazu, die Benutzereingabe im CAPTCHA-Feld zu überprüfen. Wurde die richtige Zahlenkombination eingegeben oder das Anti-Roboter-Häkchen gesetzt? Anhand der in Check Captcha verschachtelten grünen und roten Blöcke erkennen Sie zwei mögliche Ergebnisse dieser Verifizierung: Die Eingabe war korrekt (On success) oder falsch (On fail). Anhand des Schlüsselworts On sehen Sie, dass es sich wieder um Ereignisse handelt, ähnlich wie On load und On submit, diesmal aber nicht vom Formular abhängig, sondern von der CAPTCHA-Verifizierung. Und damit ist es erneut möglich, beliebige Aktionen aus der linken Baukastenliste hineinzuziehen.

      Die On success-Liste ist leer, denn ist die CAPTCHA-Eingabe des Benutzers korrekt, muss nichts Besonderes passieren, die weiteren On submit-Aktionen dürfen ganz normal abgearbeitet werden. Bei On fail sieht das anders aus. Eine fehlerhafte Eingabe führt dazu, dass die On submit-Aktionskette unterbrochen wird und das Formular auf keinen Fall abgesendet wird. Im Gegenteil: Es wird neu geladen. Abgebildet ist das im Baukastenblock über die Aktion Event Loop, deren Event name »load« auf das Neuladen deutet. Für die Anzeige der Fehlermeldung sorgt das On fail-Ereignis automatisch.

      Und auch hier hat der Fehlerteufel zugeschlagen, denn für das reCAPTCHA bzw. NoCaptcha benötigt das Formular die passende Check ReCaptcha-/Check Google NoCaptcha-Aktion aus der Anti Spam-Liste. (Ignorieren Sie diesen Abschnitt, falls Ihre ChronoForms-Version bereits die richtige Aktion konvertiert hatte.) Löschen Sie also die Check Captcha-Aktion über den Button Delete, und ziehen Sie Check ReCaptcha oder Check Google NoCaptcha in den On submit-Bereich (siehe Abbildung 17.32). Achten Sie darauf, dass Sie die Aktion nicht versehentlich in irgendein anderes Ereignis ziehen, am besten verschieben Sie die Aktion per Drag & Drop in die Nähe der On submit-Beschriftung.

      Die neue Aktion erscheint zunächst am Ende der On submit-Liste, positionieren Sie die Aktion an erster Stelle, denn die reCAPTCHA-/NoCaptcha-Überprüfung soll unmittelbar nach dem Absenden-Klick durchgeführt werden, vor allen anderen Aktionen (z. B. dem E-Mail-Versand). Klicken Sie danach auf Edit, und tragen Sie unter Error eine deutschsprachige Fehlermeldung und unter Private key den Geheimen Schlüssel Ihrer reCAPTCHA-Anmeldung ein. Save and Close.

      Als Letztes ziehen Sie die Aktion Event Loop aus der Basic-Aktionsliste in das On fail-Ereignis entsprechend der früheren Check Captcha-Konfiguration. Klicken Sie auch hier auf Edit, und stellen Sie sicher, dass unter Event name »load« steht, das Schlüsselwort zum Neuladen des Formulars, falls ein falscher reCAPTCHA-Code eingegeben oder das Setzen des Häkchens (NoCaptcha) vergessen wurde. Save and Close.

      Am schwarzen Rahmen des »On-submit«-Ereignisblocks erkennen Sie die korrekte Zuordnung der »Check ReCaptcha«-/»Check Google NoCaptcha«-Aktion, die exakte Platzierung an den Anfang der Liste nehmen Sie wieder per Drag & Drop vor.

      Abbildung 17.32    Am schwarzen Rahmen des »On-submit«-Ereignisblocks erkennen Sie die korrekte Zuordnung der »Check ReCaptcha«-/»Check Google NoCaptcha«-Aktion, die exakte Platzierung an den Anfang der Liste nehmen Sie wieder per Drag & Drop vor.

      Alle übrigen Aktionen im On submit-Ereignisblock erhielten ihre korrekten Einstellungen bereits aus der Simple-Konfiguration. Klicken Sie trotzdem auf den einen oder anderen Edit-Button, um sich die Felder näher anzusehen. Insbesondere DB Save und die beiden Email-Blöcke kommen Ihnen sicher bekannt vor. Es handelt sich um die Ergebnistabellenbefüllung und den E-Mail-Versand aus Ihrer früheren Konfiguration. Davor sehen Sie eine Aktion Handle Arrays, die die Formulardaten für die Tabelle und die E-Mails aufbereitet. Bei Display Message handelt es sich um die Dankeseite, und Debugger ist eine optional aktivierbare Aktion, die Daten zur Fehlersuche ausgibt, die Sie z. B. im ChronoForms-Forum angeben, wenn Sie die Community um Hilfe bitten.

  3. Nach dem Ausflug in den fortgeschrittenen Setup-Reiter ist Ihr Kontaktformular wieder einsatzbereit. Klicken Sie in der Buttonleiste auf Save, dann auf Test form, um die Funktionsfähigkeit des reCAPTCHAs/NoCaptchas sicherzustellen.

Info: Noch mehr Aktionen finden Sie in der linken Baukastenliste

Im Advanced-Modus der Formularkonfiguration finden Sie in der linken Baukastenliste des Setup-Reiters Dutzende von Aktionen, die die enorme Flexibilität von ChronoForms ausmachen. Während die Aktionen unter Basic mindestens bei Standardformularen zum Einsatz kommen, gliedern sich die übrigen Einträge nach Einsatzzweck. CAPTCHAs und reCAPTCHAs aus der Anti Spam-Gruppe kennen Sie bereits von den vergangenen Seiten. Unter Data Management erhalten Sie Datenbankzugriffe und finden Exportfunktionen, Joomla gibt Ihnen Zugriff auf Beiträge und Plugins, und Payment Processors verwandelt Ihr Formular in einen Checkout-Prozess. Die Möglichkeiten sind mannigfaltig, aber nicht untrivial einzustellen und pro Anwendungsfall detailliert zu beleuchten, da die Konfiguration zum Teil komplex ist.

Alle Einsatzmöglichkeiten kann dieses Handbuch leider nicht erklären, darum müssen Sie sich von Fall zu Fall auf die Herstellerwebsite unter http://www.chronoengine.com begeben. Eine ausführliche Anleitung sucht man dort zwar leider vergebens, aber Ihre ersten Anlaufstellen sind die FAQs (http://www.chronoengine.com/faqs) und das Forum (http://www.chronoengine.com/forums). Auch eine Google-Suche mit vorangestelltem »chronoforms«-Stichwort bringt in der Regel mehrere Dutzend Ergebnisse.

Tipp: Klicken Sie in der ChronoForms-Formularübersicht auf den Button Demos, installiert die Komponente über ein Dutzend Testformulare unterschiedlicher Szenarien. Unterhalb des Formularnamens ist der Einsatzzweck erklärt, so lassen sich diese voll funktionsfähigen Prototypen nutzen, um Ihre eigenen Formulare um entsprechende Funktionalitäten zu erweitern.

 
Zum Seitenanfang

17.3.3    Dynamische Daten ins Formular ziehen Zur vorigen ÜberschriftZur nächsten Überschrift

Zum Abschluss des Einblicks in die ChronoForms-Komponente machen Sie einen ersten Schritt in die Einbindung dynamischer Daten in ein Formular. Ein einfaches, mit leeren Texteingabefeldern bestücktes Formular ist schnell implementiert, aber wie sieht es mit befüllten Dropdown-Listen aus, über die der Websitesucher einen vorgegebenen Wert auswählt? Hinter das Formularfeld »Woher kennen Sie das Reiseforum?« legten Sie eine statische Liste von möglichen Antworten. Doch ChronoForms kann solch eine Antwortenliste auch aus beliebigen anderen Quellen ziehen. In der finalen Version des Reiseforum-Kontaktformulars fragen Sie deshalb die Benutzer, welcher Beitrag ihnen besonders gut gefiel.

Da es sich sowohl Webmaster als auch Programmierer immer möglichst einfach machen, liegt nichts ferner, als per Hand in ChronoForms eine Beitragsliste mit Dutzenden von Einträgen anzulegen. Wozu auch, denn die Beiträge sind doch in den Inhaltselementen von Joomla! gespeichert. Wirft man einen Blick in die Datenbank, fällt z. B. die Tabelle #__content ins Auge (siehe Abbildung 17.33). Sie enthält alle Metadaten Ihrer Beiträge inklusive title, also der Überschrift, die sich hervorragend in einem neuen Kontaktformularfeld »Welcher Beitrag gefiel Ihnen besonders gut?« eignete. Eine der einfachsten Übungen in ChronoForms, Sie müssen nur ein paar neue Räder kennenlernen, an denen Sie drehen werden.

Ein Blick in die Datenbanktabellen Ihrer Joomla!-Installation deckt die Tabelle auf, die alle Beitragsmetadaten enthält, »#__content«; die Felder »title« und »alias« kommen für die neue Dropdown-Liste infrage.

Abbildung 17.33    Ein Blick in die Datenbanktabellen Ihrer Joomla!-Installation deckt die Tabelle auf, die alle Beitragsmetadaten enthält, »#__content«; die Felder »title« und »alias« kommen für die neue Dropdown-Liste infrage.

Bevor es an die Erweiterung der Formularkonfiguration geht, werfen Sie einen Blick auf das Diagramm in Abbildung 17.34 – eine alternative Darstellung der Konfiguration des Setup-Reiters, den Sie gleich erneut bearbeiten. Sie erkennen hier, dass der gesamten Formularlogik zwei Ereignisse zugrunde liegen, On load und On submit. Innerhalb dieser Ereignisse folgt eine Kette mehrerer Aktionen, die Datenaufbereitung und -darstellung übernehmen, Daten speichern, reCAPTCHAs/NoCaptchas überprüfen und E-Mails versenden.

Die gestrichelten Pfeile stehen für voneinander abhängige Aktionen: Bevor die Check ReCaptcha-Aktion durchgeführt wird, muss Load ReCaptcha passiert sein. (Gleiches trifft für die NoCaptcha-Implementierung zu.) Die neue dynamische Beitrags-Dropdown-Liste enthält eine ähnliche Abhängigkeit: Zunächst liest das Formular per DB Read alle Beiträge aus der Joomla!-Datenbank, um sie dann dem Formular in der Aktion HTML (Render Form) bereitzustellen und die Dropdown-Liste zu befüllen.

  1. Vor der Ergänzung des neuen Dropdown-Felds im Formular kümmern Sie sich um den Mechanismus, der die Beitragsüberschriften aus der Datenbank liest. Dazu begeben Sie sich in Ihrer Formularkonfiguration in den Reiter Setup, öffnen die Baukastengruppe Data Management und ziehen das Element DB Read in das On load-Ereignis.

  2. Da diese Daten vor der Darstellung des Formulars bereitgestellt werden müssen, positionieren Sie das neue Element mit der Maus über die Aktion HTML (Render Form).

    Ablauflogik des Kontaktformulars auf Basis der zwei Ereignisse »On load« (beim Laden) und »On Submit« (nach dem Absenden)

    Abbildung 17.34    Ablauflogik des Kontaktformulars auf Basis der zwei Ereignisse »On load« (beim Laden) und »On Submit« (nach dem Absenden)

  3. Bearbeiten Sie jetzt die Eigenschaften des neuen Felds über den Button Edit (siehe Abbildung 17.35):

    • Action Label: Ein beliebiger, von Ihnen zu vergebener Feldname, z. B. »BeitraegeAuslesen«. Beachten Sie, dass hier keine Leerzeichen vorkommen dürfen.

    • Enabled: Yes

    • Table name: Die Dropdown-Liste zeigt alle Tabellen aus der mit Ihrer Joomla!-Installation verknüpften Datenbank. Suchen Sie hier die Tabelle heraus, die auf _content endet. Sie enthält die Basisdaten aller Joomla!-Beiträge.

    • Multi read: Yes, damit alle Beiträge und nicht nur der erste ausgelesen werden

    • Enable Model ID: Yes, um die hier erhaltenen Tabellendaten später dem neuen Formularelement zuzuweisen

    • Model ID: Unter dieser Bezeichnung sind die Daten später abrufbar, das ist vergleichbar mit einem ChronoForms-internen Tabellen- oder Variablennamen, z. B. »articles«, das ist die offizielle englische Bezeichnung für Joomla!-Beiträge.

    • Fields: Kommagetrennte Liste der benötigten Tabellenfelder, die Sie aus der Tabellenansicht in phpMyAdmin ablesen, in diesem Fall »title,alias«. »title« enthält die sichtbare Überschrift (mit Umlauten), »alias« den URL-Pfadbestandteil, der keine Umlaute, Leer- oder Sonderzeichen enthält und sich damit hervorragend als Variablenname eignet.

    Über die weiteren Felder sortieren, gruppieren und filtern Sie die angezogenen Daten, ganz ähnlich wie Sie es von SQL-Abfragen kennen. Für das Beitragsformularfeld genügt jedoch die volle ungefilterte Liste. Klicken Sie auf Save and Close.

    Schritt 1 – vor Darstellung des Formulars laden Sie mithilfe der Aktion »DB Read« die Felder »title« und »alias« aus der »#__content«-Tabelle, die alle Joomla!-Beiträge enthält.

    Abbildung 17.35    Schritt 1 – vor Darstellung des Formulars laden Sie mithilfe der Aktion »DB Read« die Felder »title« und »alias« aus der »#__content«-Tabelle, die alle Joomla!-Beiträge enthält.

  4. Die Beitragsüberschriften liegen nun bereit; Zeit, das Formularfeld einzubauen. Zurück in der Formularkonfiguration wechseln Sie zum Reiter Designer.

  5. Ziehen Sie ein Baukastenelement des Typs Dropdown in den Formularbereich, und platzieren Sie es mit der Maus über das Recaptcha-Element.

  6. Zur Bearbeitung des neuen Dropdown-Elements klicken Sie auf Edit:

    • Reiter General: Befüllen Sie Field Name und Field ID mit einer beliebigen internen Variablen-/Feldbezeichnung, z. B. »favoritearticle«, dann schreiben Sie weiter unten neben Label die im Frontend dargestellte Feldbeschreibung »Welcher Beitrag gefiel Ihnen besonders gut?«.

    • Reiter Dynamic Data (siehe Abbildung 17.36): Hier passiert die Magie – über diese Felder verlinken Sie die zuvor im Setup-Reiter bereitgestellten Beitragsdaten. Stellen Sie Enabled auf Yes zur Aktivierung der dynamischen Daten. Unter Data Path tragen Sie die zuvor vergebene Model ID, »articles«, ein; das ist die Variable, in der DB Read die Beitragsdaten bereitstellt. Value key ist die Variable, die ChronoForms intern für die Formularfelder benutzt, ihre Werte dürfen also keine Leer- oder Sonderzeichen enthalten. Darum eignet sich das Beitragstabellenfeld »alias« hierfür besonders gut. Neben Text key schreiben Sie schließlich »title«, die Tabellenspalte für die Beitragsüberschriften. Sie erinnern sich, beide Felder hatten Sie zur in der DB-Read-Konfiguration Fields genau für diesen Zweck bereitgestellt.

      Die Verknüpfung zu den zuvor per »DB Read« bereitgestellten Beitragsdaten stellen Sie über den Reiter »Dynamic Data« des Dropdown-Felds her.

      Abbildung 17.36    Die Verknüpfung zu den zuvor per »DB Read« bereitgestellten Beitragsdaten stellen Sie über den Reiter »Dynamic Data« des Dropdown-Felds her.

  7. Das war’s. Klicken Sie auf Save and Close der Feldkonfiguration, dann auf Save des Kontaktformulars und schließlich auf Test form, um die neue, mit Beiträgen befüllte Dropdown-Liste zu begutachten (siehe Abbildung 17.37).

Das finale Kontaktformular enthält die reCAPTCHA-Sicherheitsabfrage gegen Spambots und eine dynamisch angezogene Auswahlliste aller Reiseforumsbeiträge.

Abbildung 17.37    Das finale Kontaktformular enthält die reCAPTCHA-Sicherheitsabfrage gegen Spambots und eine dynamisch angezogene Auswahlliste aller Reiseforumsbeiträge.

 


Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Joomla! 3 Joomla! 3
Jetzt Buch bestellen

 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS und JavaScript
Schrödinger lernt HTML5, CSS und JavaScript


Zum Rheinwerk-Shop: Einstieg in PHP 7 und MySQL
Einstieg in PHP 7 und MySQL


Zum Rheinwerk-Shop: PHP 7 und MySQL
PHP 7 und MySQL


Zum Rheinwerk-Shop: Erfolgreiche Websites
Erfolgreiche Websites


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2019
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern