Wer Formulare für eine Joomla-Seite verwenden will, der kann auf zusätzliche Erweiterungen zurückgreifen. Eine der besten und auch für Joomla 1.6 erhältlichen Komponenten für diesen Zweck ist zweifelsohne Chrono Forms.
Formulare mit Chrono Forms in Joomla 1.6!
Sehr viel Auswahl hat man leider nicht, wenn man eine Formular-Erweiterung für Joomla 1.6 sucht. Fast zwangsläufig stößt man dabei auf Chrono Forms, worüber auch ein Bericht hier in den News zu finden ist.
Chrono Forms ist vielen vielleicht schon von Joomla 1.5 als hervorragende Komponente bekannt. Glücklicherweise ist die Extension jetzt auch für Joomla 1.6 erhältlich und kostet keinen Cent.
Die einzige Investition ist etwas Einarbeitung in die doch recht umfangreiche und damit auch vielseitig einsetzbare Komponente. Beim Hersteller gibt es gute Dokumentationen als PDF zum Download. Auch ein Forum und FAQ sind vorhanden.
Aber wie so oft, sind auch hier etwas Englisch-Kenntnisse gefragt. Für alle die damit nicht viel anfangen können oder in deutscher Schrift einfach entspannter Lesen wollen, ist die folgende Beschreibung zu Chrono Forms für Joomla 1.6 gedacht und hoffentlich hilfreich. Diese Anleitung ist aber keine reine Übersetzung des englischen Originals, welche für Joomla 1.6 auch bisher nicht erhältlich ist.
Die Anleitung wurde so geschrieben, dass auch absolute Joomla-Einsteiger damit zurechtkommen dürften. Aber auch erfahrenere Joomla-Anwender können hoffentlich ihren Nutzen daraus ziehen. Dennoch handelt es sich hier nicht um eine komplette Anleitung. Um Chronoforms erschöpfend zu erklären, könnte man durchaus ein ganzes Buch schreiben. Hier soll aber zumindest ein Einstieg in diese Komponente ermöglicht werden.
Download und Installation!
Als erstes muss die tolle Komponente natürlich mal beim Entwickler heruntergeladen werden. Hier geht es zum Chronoforms Download für Joomla 1.6. (Link funktioniert nicht mehr und wurde entfernt)
Es gibt dort neben der Komponente auch noch ein dazugehöriges Plugin und ein Modul, welche am Besten auch gleich heruntergeladen und mit installiert werden. Für den Download ist keinerlei Registrierung notwendig und alles ist wie bereits erwähnt, kostenfrei zu haben.
Nach dem Download muss nichts entpackt werden. Als erstes wird die Komponente installiert. Das geht wie üblich mit dem Joomla-Installer, welcher im Menü über Erweiterungen -> Erweiterungen zu erreichen ist.
Jetzt hat man fünf Möglichkeiten, wobei natürlich "Installieren" zu wählen ist. Aber dieser erste Punkt ist sowieso immer erst mal ausgewählt.
Jetzt ein Klick auf den Auswählen-Button und die heruntergeladene Zip-Datei kann ausgewählt werden. Dann bleibt noch der Klick auf den Button "Hochladen & Installieren" und fertig.
Sollte es mal Probleme beim Installieren geben, könnte man die Datei per FTP auch in das temporäre Verzeichnis (tmp) von Joomla kopieren und hier die Möglichkeit "Aus Verzeichnis installieren" wählen. Aber das ist hier nicht das Thema.
Wenn hoffentlich alles geklappt hat, erscheint auch schon die Erfolgsmeldung von Joomla.
Zusätzlich erscheinen noch einige Hinweise zu Chrono Forms in englischer Sprache, die hier aber nicht weiter zu interessieren brauchen.
Auf die Gleiche Art und Weise können jetzt noch schnell das Plugin und das Modul installiert werden. Das Installer-Fenster ist ja noch geöffnet.
Das Plugin ist für die Darstellung von Formularen innerhalb von Beiträgen gedacht. Mit dem Modul können Formulare an einer im Template vorhandenen Modulposition angezeigt werden.
Normalerweise wird jetzt als nächstes das Formular am besten mit dem Wizard erstellt. Eine allgemeine Beschreibung aller wichtigen Sachen soll jetzt aber erst mal für den nötigen Überblick sorgen bevor das erste Formular erstellt wird.
Plugin!
Nachdem die Installation abgeschlossen ist, kann gleich das Plugin aktiviert werden, sofern später Formulare im Beitrag verwendet werden sollen. Ansonsten vergisst man das gerne mal und wundert sich dann, warum nichts geht.
Dazu bemüht man wieder das Menü im Backend und klickt auf "Erweiterungen -> Plugins".
Um das Plugin schnell zu finden, kann jetzt einer der Filter verwendet oder mehrere miteinander kombiniert werden. Zum Beispiel kann der Name "chronoforms" direkt eingetragen werden und auf den Such-Button geklickt werden. Oder wie hier im Beispiel beim Filter "Art wählen" die Bezeichnung "content" selektieren.
In jedem Fall erscheint dann das Plugin in der Liste und man sieht in der Spalte "Aktiviert", dass es eben nicht aktiviert ist.
Unter der Spalte "Aktiviert" klickt man dann einfach auf den kleinen Kreis. Damit ändert sich das Symbol zu einem grünen Kreis mit Häkchen und das Plugin ist aktiviert.
Zum selben Ergebnis kommt man mit einem Klick auf den Namen des Plugins. Dann geht ein Fenster mit noch mehr Einstellungsmöglichkeiten auf. Hier kann auf der linken Seite bei den "Details" zusätzlich noch die Zugriffsebene eingestellt werden und in welcher Reihenfolge das Plugin geladen werden soll. Normalerweise muss hier nichts geändert werden.
Formular unterhalb!
Interessant ist die rechte Seite mit den "Basisoptionen". Es ist nur eine einzige Option mit der Bezeichnung "After Text Forms".
In das Textfeld kann der Name eines erstellten Formulars eingetragen werden. Zusätzlich werden die Idendifikationsnummern der Kategorien, also die ID´s angegeben.
Damit erscheint dann ein Formular unterhalb eines Beitrages nur für die angegebenen Kategorien, welche mit Kommata getrennt werden. Das könnte zum Beispiel so aussehen:
form_name=1,5,7
Die ID einer Kategorie findet man im Backend unter Inhalt -> Kategorien. Hier werden alle Kategorien aufgelistet und ganz rechts in der Spalte ID sind die relevanten Zahlen zu finden.
Formular innerhalb!
Um ein erstelltes Formular innerhalb eines Beitrages anzeigen zu können, muss folgendes in den Beitrag geschrieben werden:
{chronoforms}Formularname{/chronoforms}
Also immer chronoforms mit den geschweiften Klammern und dazwischen der Name des Formulars. Damit wäre auch schon die Funktion des Plugins erklärt. Im Prinzip funktionieren alle Joomla-Plugins auf sehr ähnliche Weise. Zum Abschluss muss natürlich noch auf den Button "Speichern & Schließen" geklickt werden.
Modul!
Soll ein Formular an einer Modulposition angezeigt werden, muss natürlich das Chronoforms-Modul konfiguriert und aktiviert werden. Das geht wieder über das Menü im Backend. Dazu ein Klick auf Erweiterungen -> Module.
Auch hier können wieder die Filter für ein schnelles Auffinden sehr hilfreich sein. Wenn das Modul "ChronoForms" gefunden ist, reicht auch hier wieder ein Klick auf den Namen und das Editierfenster öffnet sich.
Auf der rechten Seite befinden sich die üblichen Einstellungen wie bei jedem Modul. Also Titel vergeben, Modulposition wählen, den Status auf "Freigegeben" setzen, die Zugriffsebene festlegen und die Reihenfolge für die Anzeige des Moduls einstellen.
Schließlich können dem Modul noch einzelne oder alle Seiten über die Menüzuweisung zugeordnet werden. Das Modul erscheint dann nur auf den gewählten Seiten.
Auf der rechten Seite bei den Basisoptionen können Optionen für den Zwischenspeicher gewählt werden. In dem hier getesteten Release Candidate lässt sich allerdings nichts einstellen. Hier steht immer Never, also keine Zwischenspeicherung. Das wird sich sicher in der finalen stabilen Version ändern.
Bei Form Name kann natürlich der Name des anzuzeigenden Formulars eingetragen werden. Mit einem Module Class Suffix könnte man mit eigenem CSS das Aussehen des Moduls verändern.
Dazu muss man sich aber etwas mit Cascading Stylesheets auskennen. Meist ist hier gar keine Änderung erwünscht, weil das Modul ohnehin die Vorgaben des Templates nutzen soll.
Damit ist das Modul auch schon fertig konfiguriert und kann mit dem Button "Speichern & Schließen" verlassen werden.
Damit sind also Modul und Plugin erklärt und das funktioniert im Grunde bei allen Erweiterungen immer auf die gleiche Weise.
Eigene Formularseite!
Das Formular kann natürlich auch alleine auf einer eigenen Seite stehen, was ja häufig gewünscht wird. Dazu definiert man für das Formular einen Menüeintrag. Also unter Menüs -> Hauptmenü zum Beispiel. Es kann aber natürlich auch jedes andere Menü sein.
Ganz oben bei Menütyp wird auf den Auswählen-Button geklickt.
Jetzt erscheint die in Joomla 1.6 übliche Lightbox für die diversen Menütypen. Hier ist dann auch Chronoforms Display Form zu finden. Ein Klick darauf und es ist ausgewählt.
Dann kommen die üblichen Einstellungen für das Menü wie Titel, wo es angezeigt werden soll und vieles mehr. Darauf muss an dieser Stelle sicher nicht extra eingegangen werden.
Wichtig ist nur, den Status auf "Freigegeben" zu setzen, was man im Eifer des Gefechts schon mal vergessen kann. Und ganz wichtig ist es, auf der rechten Seite bei den Basisoptionen den Namen des Formulars einzutragen. Ansonsten erscheint auf der Frontpage eine Fehlermeldung.
Darunter kann noch das Ereignis bzw. Event angegeben werden, welches geladen und ausgeführt werden soll. Wenn hier nichts eingetragen wird, dann wird das Load-Event des Formulars ausgeführt, was meistens auch richtig so ist.
Es ist also in den meisten Fällen so, dass dies bei der Erstellung des Formulars definiert wird. Wird doch ein Event eingetragen, muss das On am Anfang der Bezeichnung weggelassen werden. Also zb. nicht OnSubmit sondern nur submit.
Die restlichen Optionen sind dann wieder die Gleichen wie bei allen anderen Menüpunkten auch. Mit Klick auf den Button Speichern & Schließen ist der Menüpunkt dann im Frontend sichtbar.
Die Komponente!
Damit der Menüeintrag, ein Modul oder ein Plugin einen Sinn machen, muss natürlich erst mal ein Formular erstellt werden und dafür ist die Komponente verantwortlich.
Diese ist auch wieder über das Menü erreichbar. Unter Komponenten sind alle installierten Komponenten und darunter auch ChronoForms aufgelistet. Entweder klickt man direkt auf Chronoforms, oder wählt einen der Unterpunkte an, um ohne Umwege zu dem gewünschten Bereich zu gelangen.
Beim ersten Aufruf ist es vielleicht sinnvoll, direkt auf Chronoforms zu klicken und gelangt dann zum Forms Manager. Ein Klick auf den Unterpunkt Forms Manager führt übrigens zum selben Ergebnis.
Den Warnhinweis dass Chronoforms nicht validiert ist, braucht man nicht zu fürchten. Damit bringt der Entwickler nur seinen Wunsch nach einer kleinen finanziellen Aufmerksamkeit zum Ausdruck, die er für eine solch hervorragende Erweiterung sicher auch verdient hat. Aber auch ohne Zahlung läuft Chronoforms ganz ohne Einschränkungen.
Wie man sieht, sind bisher noch keine Formulare vorhanden. Das kann leicht mit einem Klick auf den Button "Neu" geändert werden, wodurch sich ein Fenster für die grundsätzliche Konfiguration des Formulars öffnet. Mit dem Form Wizard geht es dann weiter, aber dazu weiter unten mehr.
Oft können die Einstellungen im Forms Manager auf den vorgegebenen Werten belassen werden und direkt mit dem Wizard losgelegt werden. Aber es kann nicht schaden, wenn man die hier möglichen Einstellungen gleich von Anfang an kennt.
Unter der Überschrift "New Form..." befinden sich drei Tabs zur Auswahl.
General!
Der erste Tab "General" ist aktiv und als erstes wird hier ein eindeutiger Name für das Formular eingetragen. Der Name darf keine Leerzeichen, keine deutschen Umlaute wie ä, ö, ü, keine Sonderzeichen und keine Unterstriche oder Bindestriche enthalten. Wie gesagt, das und vieles mehr kann man auch mit dem Wizard machen.
Published sollte auf Yes eingestellt sein, sonst ist das Formular schlichtweg nicht veröffentlicht. Als nächstes kommt der Form Wizard Mode welcher beim Erstellen eines Formulars unterstützt und auf Advanced oder Easy bzw. Erweitert oder Einfach eingestellt werden kann.
Voreingestellt ist der erweiterte Modus. Damit sind alle Werkzeuge für den Wizard aktiviert. Im Easy-Modus ist der Wizard nicht so umfangreich und damit eventuell auch leichter zu bedienen, was aber durchaus bezweifelt werden darf.
Der nächste wichtige Punkt ist die Form Methode. Hier kann Post, Get oder File gewählt werden. Falls im Formular die Möglichkeit von Datei-Uploads gegeben sein soll, muss hier File eingestellt werden.
Enthält das Formular zb. ein Passwortfeld oder ein Feld mit anderen sensiblen Daten, sollte POST verwendet werden. Denn bei GET werden die Daten an die Browseradresse angehängt, sind somit für alle sichtbar und könnten im schlimmsten Fall auch manipuliert werden.
GET ist außerdem auf die mögliche Zeichenlänge des Browsers bzw. auf 255 Zeichen beschränkt. Das könnte zb. für ein Textarea-Feld wie es für Kommentare oder Gästebücher Verwendung findet, viel zu wenig sein.
Aber auch GET hat seine Vorteile und viele sehen es als besser an. Damit lässt sich zb. leichter debuggen und ein Formular lässt sich mit allen Parametern in den Favoriten ablegen.
Wer sich hier nicht sicher ist und das Thema vertiefen möchte, dem sei die Praxisbuchseite von Selfphp empfohlen. Natürlich gibt es noch sehr viele weitere Informationen zu diesem Thema in den Weiten des Web.
Auto Detect Settings bietet die Möglichkeit, Einstellungen wie Überprüfung und hochgeladene Dateien basierend auf dem Formularcode automatisch zu erfassen. Das dürfte in den meisten Fällen auch sinnvoll sein.
Auch bei Load Chronoforms files ist die Standard-Einstellung sinnvoll. Mit Load necessary files werden nur die benötigten Dateien geladen.
Wird bei Submit URL ein Link eingetragen, deaktiviert das alle "on submit event" Funktionen eines Formulars. Gemeint ist hier der onSubmit Event Handler, welcher normalerweise beim Betätigen des Absende-Buttons ausgeführt wird.
Eine onSubmit-Funktion kann zum Beispiel die Überprüfung eines Formulars sein. Fehlt zum Beispiel eine gültige Email-Adresse, wird das Formular nicht gesendet usw. Eine Submit URL kann zb. zu einer Datei führen, welche weiteren Code ausführt.
Bei Form tag attachment kann zb. eine Funktion dem Form-Tag hinzugefügt werden. Das könnte sein "onsubmit="meineJSFunktion" oder ähnliches.
Die Option "Submit action" erlaubt es, für die Übertragung die Attribute des onSubmit Event zu nutzen oder das Formular kann sich selbst Daten zusenden. Die Option Self könnte bei einer Eingabemaske für eine Datenbank sinnvoll sein.
Der vom Benutzer eingetragene Datensatz wird dann an die Datenbank gesendet. Nach dem Absenden wird das gleiche und mit der Antwort aktualisierte Formular wieder aufgerufen. Jetzt könnte der nächste Datensatz eingetragen werden.
Die nächste Option "Add form tags" erlaubt das Weglassen der Form-Tags, was eigentlich nicht sinnvoll ist. Ohne diese Tags können keine Werte aus dem Formular versendet werden. Hier sollte also meistens "Yes" eingestellt sein.
Relative URL auf Yes zu setzen ist sinnvoll, wenn die Formulardaten innerhalb einer Contentseite oder eines Moduls an die gerade geladene Seite gesendet werden sollen.
Es können auch Joomla Plugins innerhalb eines Formulars verwendet werden. Dies kann aber manchmal zu unerwarteten Ergebnissen führen. Die Option "Enable Joomla plugins" ist wohl aus gutem Grund auf "No" voreingestellt.
Formularfehler können mit der Option "Show Top Errors" oberhalb des Formulars gelistet werden. Auch hier ist die Voreinstellung "Yes" sicher in Ordnung.
Der DateTimePicker zeigt ein Kalenderfeld für die Auswahl von Datum und Uhrzeit an. Beim DateTime Picker selector kann ein Klassenname wie zb. dateTimePicker angegeben werden, welcher den Feldern des Kalenders zugewiesen wird.
Code!
Im nächsten Tab mit der Bezeichnung Code gibt es nicht viel einzustellen. Bei Form type wird natürlich der Typ des Formulars bestimmt und unten kommt eigener Code rein bzw. steht bereits vom Form Wizard generierter Code drin, wenn schon ein Formular erstellt wurde. Im Codefenster können dann auch Klassennamen, ID´s usw. in Erfahrung gebracht werden, die mit dem Wizard vergeben wurden. Diese braucht man eventuell für JavaScript oder CSS.
Wird für den Typ "Custom" eingestellt, wird vorhandener Code der mit dem Wizard generiert wurde, vom eigenen Code, also vom hier eingetragenen Custom Code überschrieben. Wird also Custom genutzt, funktioniert die Preview im Wizard nicht mehr. Es ist auf jeden Fall einfacher, wenn der Typ auf Wizard eingestellt ist. Hier könnte man zb. ID´s ändern oder manuell Überschriften hinzufügen und ähnliches.
JS Validation!
Formulare können mit JavaScript überprüft werden. Genau das lässt sich mit der Option "Enable JS Validation" erreichen. Validation Errors zeigt Fehlermeldungen an. Für die Meldungen können die Feld Titel verwendet werden. Mit der Einstellung "Default" werden die Titel ignoriert und die Fehlermeldungen aus den Sprachdateien ausgegeben.
Eine Fehlermeldung wird zb. angezeigt, wenn im Email-Feld ein falsches Format verwendet wird.
Es werden diverse Themes wie Classic, Blue, Green, Red, Grey und White für die Überprüfung angeboten. Zum Beispiel erscheint dann ein Tooltip in roter Farbe mit dem Text "Please enter a valid email:" Außerdem kann die Sprache, darunter auch Deutsch gewählt werden. Dann könnte es mit dem blauen Theme so aussehen:
Damit das angezeigt wird, muss aber auch im Wizard für das entsprechende Feld im Tab Validation die entsprechende Option aktiviert worden sein. Also für die Mail-Adresse müssen die Optionen Required und Email ausgewählt worden sein.
Leider erkennt man hier kaum, dass überhaupt eine Option zum anklicken vorhanden ist. Das liegt sicher an der hier getesteten Version von Chronoforms. Es handelt sich noch um einen Release Candidate. Es wird sich also sicher noch was ändern an dieser Situation.
Die Möglichkeit dieser Validierung sollte man auf jeden Fall nutzen, weil sonst bei einer Falscheingabe auch eine Fehlermeldung erscheint, welche aber ungleich hässlicher rüberkommt.
Soweit zum Forms Manager und den hier möglichen Einstellungen. Richtig losgelegt wird dann mit dem Form Wizard.
Form Wizard!
Es gibt den Form Wizard und den Easy Form Wizard. Nicht nur für den Einstieg ist die Easy Variante sicher erstmal besser geeignet. Es kann zwischen beiden Varianten gewechselt werden. Wurde ein Formular mit dem Easy Form Wizard erzeugt, kann aus diesem Fenster heraus in den Advanced Mode und damit in den Form Wizard gewechselt werden.
Im Form Wizard sind Preview und Form Settings absolut gleich. Allerdings werden im Tab Events die Ereignisse übersichtlich angezeigt und können dort auch editiert werden. Auch neue Events lassen sich hier leicht hinzufügen.
Jede Menge Events können hier wieder per Drag & Drop aus dem Elements-Tab in den Events-Bereich des Drop-Feldes gezogen werden.
Wählen wir für ein kleines Beispiel hier also gleich den Easy Form Wizard mit einem Klick auf den gleichnamigen Tab oben. Wurde bereits ein Formular angelegt, muss erst auf den Tab "Forms Manager" geklickt werden. Dann kann aus der Spalte "Wizard" der Link "Wizard edit" angeklickt werden. So wird das vorhandene Formular bearbeitet. Ansonsten wird über den Tab "Easy Form Wizard" ein neues Formular angelegt.
Hier sind linke und rechte Seite in Drag und Drop aufgeteilt. Ein Element aus dem Drag-Feld kann also einfach mit der Maus in das Preview-Fenster des Drop-Feldes gezogen und abgelegt werden.
Formular Layout erstellen!
Als erstes sollte man sich Gedanken darüber machen, wie das Formular am Ende aussehen soll. Hier hilft es auch, sich das erst mal aufzumalen.
Für dieses Beispiel soll es nur eine Überschrift, zwei Felder und einen Button zum Absenden geben. In das obere Feld soll der Name eingetragen werden können und im unteren Feld die Email-Adresse.
Allerdings sollte jetzt erst mal der Name für das Formular vergeben und gespeichert werden. Also geht man zum Tab "Form Settings" und vergibt einen Namen. Hier im Beispiel einfach "test". Den Namen sollte man immer gleich zu Anfang vergeben.
Published wird auf "Yes" gesetzt und mit Klick auf den Button oben rechts gespeichert, damit das Formular auch auf der Frontpage angezeigt wird.
Ein Klick auf den Tab "Forms Manager" und nun ist das erste Formular gelistet. Soll das Formular weiter editiert werden, klickt man in der Spalte Wizard einfach auf Wizard edit. Auch kann es hier ganz rechts veröffentlicht und wieder deaktiviert werden.
Wir befinden uns wieder im Tab Preview von wo aus es weitergeht.
Formular-Überschrift!
Für die Überschrift kann das Custom Element verwendet werden, wenn man das nicht wie weiter oben beschrieben, selbst im Tab "Forms Manager" in den Code schreiben will, was eigentlich besser sein dürfte. Das Custom Element wird aus dem Drag-Feld heraus in das Drop-Feld mit dem aktiven Tab Preview hineingezogen und fallen gelassen.
Das sieht dann so aus:
Mit den drei Icons auf der rechten Seite lässt sich das Element löschen, editieren oder verschieben. So lässt sich die Reihenfolge der einmal erstellten Felder zum Glück jederzeit verändern. Jetzt folgt logischerweise ein Klick auf das mittlere Icon.
Für die Überschrift reicht es, hier den Label Text zu ändern. Hier sollten aber nicht die Tags für eine Überschrift wie hier h1 eingetragen werden, denn die Überschrift steht dann in einem Label-Tag und das ist ein Inline-Element. H1 ist aber ein Block-Element. Blockelemente dürfen aber meist nicht in Inline-Elementen stehen, wenn der Code nach den Regeln des World Wide Web Konsortiums valide sein soll. Und das soll er.
Der bessere Weg für die Überschrift über den Forms Manager!
Soll also ein Überschriften-Tag verwendet werden, könnte es vor das Label-Tag im Code eingetragen werden. Hier ist jetzt das Codefenster aus dem Forms Manager hilfreich. Also ein Klick auf den Tab "Forms Manager" und dann in der Spalte "Name" auf den Namen des Formulars klicken. Hier "test".
Dann auf den Tab "Code" klicken und das H1-Tag vor dem Label-Tag einfügen wie hier im Bild gezeigt. Zur besseren Orientierung sind die Tags und der Text der Überschrift gelb eingefärbt.
Für die weiteren Beispiele löschen wir die Überschrift aber jetzt wieder. Also einfach wieder aus dem Code entfernen und natürlich immer auf Speichern klicken danach.
Jetzt also auf den Speichern & Schließen - Button oben klicken und dann wieder zum Wizard wechseln. Soll jetzt vielleicht noch ein anderer Hintergrund für die mit dem Custom Element erstellte Überschrift verwendet werden, so geht das sehr gut mit Cascading Stylesheets.
Dazu kann diesmal im Wizard der Tab "Code" verwendet werden. Dort kann mit Klick auf "Load CSS" eigener CSS-Code eingetragen werden.
Um nur das Feld für die Überschrift anzusprechen, empfiehlt sich die Verwendung der entsprechenden ID dieses Feldes. Es wäre aber in diesem Falle falsch, im Tab Preview das Überschriftenfeld mit Klick auf den Edit-Button zu öffnen und die hier stehende Field ID zu verwenden.
Stattdessen muss wieder in den Forms Manager gewechselt und auf den Namen des Formulars geklickt werden. Hier kann dann wieder der Tab "Code" gewählt werden. Das oberste Div-Element ist der Container für die Überschrift. Hier kann also die Klasse oder ID verwendet werden. Im Beispiel ist es die ID "formular_berschrift_container_div".
Am besten kopiert man sich das mit markieren und der Tastenkombination STRG+C in die Zwischenablage und wechselt wieder zum Wizard und dort in das besagte Codefenster für die CSS-Anweisungen. Also wieder auf Load CSS klicken und zum Beispiel folgendes eintragen:
Hier ist es ein Blau. Natürlich kann jeder beliebige Wert und auch ganz andere oder mehrere CSS-Anweisungen verwendet werden. Es könnte auch einfach eine Farbe zb. für "label" ganz ohne ID definiert werden. Das würde dann aber alle Labels des verwendeten Joomla-Templates ebenso betreffen und das ist nicht unbedingt erwünscht.
Danach kann die Änderung mit dem Apply-Button auf der rechten Seite bestätigt werden. Dieser zeigt dann Save für gespeichert an. Mit Klick auf das kleine X wird die Lightbox geschlossen.
Jetzt kann ganz oben auf Speichern geklickt werden und die Änderung wird normalerweise sichtbar. Im Preview-Tab im Wizard sieht man jetzt natürlich keine andere Hintergrundfarbe, die ist logischerweise nur auf der Frontpage zu sehen.
Eine CSS-Anweisung ist aber nicht unbedingt nötig bzw. oft gar nicht gewollt. Hier sollte nur demonstriert werden, wie das mit Chronoforms geht. Die Überschrift mit dem Custom Element zu machen ist eigentlich keine optimale Lösung, wie man hier gesehen hat. Früher gab es dafür extra ein Überschriften-Element, welches man in der Version für Joomla 1.6 leider vergeblich sucht. Aber vielleicht tut sich noch was in der finalen Version.
Textbox!
Als nächstes wird also aus dem Drag-Feld eine Textbox herausgezogen und in das Drop-Feld bei aktivem Tab Preview abgelegt.
Auch hier wird wieder auf das mittlere Icon für Editieren geklickt. Und auch hier müsste nur der Label Text geändert werden. Wir schreiben hier "Name". Optional können noch Instruktionen für den Formularnutzer und Hinweise welche als Tooltip beim Maus überfahren eingeblendet werden hier eingetragen werden.
Dann wird wieder mit Klick auf den Apply-Button gespeichert und die Lightbox geschlossen. Sollen die Änderungen im Dropfeld gleich sichtbar sein, muss wieder oben auf den Speichern-Button geklickt werden.
Das Gleiche wird jetzt nochmal gemacht für das Textfeld Email. Also wieder eine Textbox rüberziehen und entsprechend editieren und speichern.
Wichtig beim editieren sind die Optionen für Field Max Length für die Länge des Textfeldes und Field Size für die Breite. Wobei Field Size also die Breite des Feldes angibt und Field Max Length die maximal möglichen Zeichen, welche im Feld eintragbar sind.
Die Abmessungen sind besonders wichtig, wenn das Formular in einer Modulposition verwendet werden soll. Oft ist da nicht so viel Platz vorhanden.
Gerade bei dem Feld für die Email sollte man im Editierfenster auch dem Tab "Validation" etwas Aufmerksamkeit schenken. Wie bereits weiter oben erwähnt, sollte hier eine Überprüfung stattfinden. Dazu wird die Option Required und Email abgehakt. Die Checkbox zum aktivieren ist hier nicht wirklich sichtbar. Aber einfach rein klicken führt hier auch zum Erfolg. Wie gesagt, wird das für die stabile Version sicher noch verbessert.
Jetzt wird bei jedem Absenden des Formulars mit der Option "Required" geprüft, ob überhaupt eine Adresse eingetragen wurde. Mit der Option "Email" wird das Format geprüft, welches ja immer ein @-Zeichen und einen Punkt haben muss. Diese Prüf-Optionen sind natürlich auch für andere Elemente vorhanden, nicht nur für Email-Felder.
Zum Schluss fehlt noch ein Absende-Button. Dazu wird das Element Submit Button aus dem Drag-Feld rüber gezogen und editiert. Hier kann die Button-Beschreibung mit Änderung der Option Text angepasst werden. Zum Beispiel schreibt man hier Absenden rein. Jetzt sieht es so aus:
Um das bisherige Aussehen jetzt schnell zu überprüfen, empfiehlt sich wieder ein Klick auf den Tab Forms Manager oben links. Man könnte aber auch gleich auf den Button Speichern & Schließen klicken, was zur selben Seite führt.
Aber veröffentlicht wurde es ja bereits. Ein Klick in der Spalte "Link" auf "Frontend view" führt schließlich auf die Joomla-Seite mit dem neuen Formular.
Wie man sieht, werden die "Instructions for users" unter den Feldern angezeigt. Der Tooltip kommt zum Vorschein, wenn mit der Maus über die Fragezeichen gefahren wird.
Ganz unten wird der Copyright/Backlink-Hinweis des Entwicklers angezeigt. Dieser darf nur gegen eine kleine finanzielle Aufmerksamkeit entfernt werden. Genau dafür ist auch der Tab Validate Installation im Forms Manager gedacht.
Hier kann ein erworbener Schlüssel eingetragen werden und der Link verschwindet. Vorgegeben sind hier Lizenzen für 3 Domains, für 5 Domains und unlimitiert. Mehr dazu ist auf der Seite des Entwicklers zu erfahren.
Damit ist das Layout für das erste einfache Formular abgeschlossen, aber es bringt so natürlich noch nichts. Also auf zu den nächsten Schritten.
Formular funktionsfähig machen!
Wird ein Formular genutzt, müssen die Werte irgendwo abgespeichert werden. Das kann in eine Datenbank, aber auch gleich in eine Email oder auch beides sein.
Fangen wir mit der Email an. Dazu kann im Easy Form Wizard auf den Tab Email geklickt werden.
Hier stehen drei Email-Container zur Konfiguration bereit. Logischerweise wird auf den ersten geklickt und die übliche Lightbox öffnet sich.
Oben sind vier Tabs vorhanden. Im ersten Tab "General" wird Enabled auf "Yes" gesetzt. Dann kann bei Action Label eine Bezeichnung für die Aktion im Wizard vergeben werden. Hier muss erstmal nichts geändert werden.
Soll die Mail im HTML-, Text-Format oder beides versendet werden? Im Beispiel bleibt mal HTML stehen. Dann kann noch bestimmt werden, welche Dateifelder der Email zugewiesen werden sollen, falls man das benötigt. Mehrere Felder werden hier durch Kommata getrennt aufgeführt. Also zb. field1, field2 usw.
Es müssen Felder für Dateien sein. Damit können also Dateianhänge über das Formular mit verschickt werden. Textfelder gehen da nicht und das würde ja auch keinen Sinn machen. Das ist im Beispiel aber auch nicht relevant. Außerdem kann mit Get Submitter´s IP "Yes" noch die IP-Adresse des Absenders in der Email gespeichert werden und wird im Beispiel genutzt.
Im Reiter Template kann mit Add/Remove ein Editor an- und abgeschaltet werden. Neben eigenem Text können hier auch Daten aus dem Form Data Array mit geschweiften Klammern angegeben werden. Also zb. {field_name}. Somit können alle aus dem Drag-Feld in das Drop-Feld gezogenen Elemente über den jeweiligen Feld Namen welcher im Editierfenster des jeweiligen Elements im Preview-Tab zu finden ist, hier angesprochen und deren Daten in der ankommenden Mail ausgegeben werden. Zum Beispiel der Name und die Email des Absenders. Oft macht es Sinn, hier alle Felder aus dem Formular einzutragen.
Auch PHP-Code könnte eingetragen werden. Dann sollte aber nicht der Editor genutzt werden, das zerhaut den Code. Alles was hier eingetragen wird, erscheint dann in der Antwort-Mail nach dem Absenden des Formulars.
Im Reiter Static kann oben bei To (Required) die Email-Adresse des oder der Empfänger eingetragen werden. Mehrere Adressen werden wieder mit Kommata getrennt. Der Empfänger sollen wir in diesem Beispiel selber sein. Also kommt eine eigene Adresse wie vielleicht webmaster @ meineDomain.tld da rein.
Danach folgt mit Subject der Betreff. Hier schreiben wir "Der Email Betreff". Auch hier könnte man das leer lassen und stattdessen die dynamische Variante wählen, wenn man vorher ein entsprechendes Feld für das Formular angelegt hat.
From name ist der Name des Absenders, also des Seitenbesuchers, welcher das Formular ausgefüllt hat. Hier empfiehlt sich die dynamische Variante, also bleibt das leer. Das Gleiche gilt auch für die Email-Adresse im Feld From name. Die Felder für Cc und Bcc können für das Beispiel leer bleiben.
Cc bedeuted Carbon Copy, also auf Deutsch Durchschlag. An die in Cc eingetragene Adresse wird eine Kopie der Mail geschickt. Ähnlich ist Bcc was Blind Carbon Copy heißt und ein Blinddurchschlag ist. Auch hier wird eine Kopie der Mail verschickt, welche dann aber für andere Empfänger nicht mehr sichtbar ist. Aber das kennt ja jeder von seinem Mail-Programm.
Reply to name gestattet die Angabe des Namens für eine Rückantwort, wenn im Mailprogramm der Antworten-Button geklickt wird und Reply to email ist dann logischerweise die Mail-Adresse für diese Rückantwort. Das bleibt auch leer für das Beispiel.
Diese statischen Angaben sind aber in diesem Beispiel noch nicht ausreichend.
Oft benötigt man die dynamischen Angaben im Reiter Dynamic. From name und From email müssen zwingend angegeben werden. Weil das im Tab Static nicht gemacht wurde, muss es jetzt nachgeholt werden.
Unter Dynamic to wird also keine Mailadresse eingetragen, sondern der Name des Feldes, welches die vom Seitenbesucher eingetragene Empfänger-Adresse im Formular aufnimmt. Diese Feld-Namen findet man im Reiter Preview mit Klick auf den Edit-Button des jeweiligen Feldes.
Im Beispiel wurde aber schon eine statische Adresse eingetragen und das Feld bleibt hier leer. Es kann also immer entweder statisch oder dynamisch eine Eintragung vorgenommen werden.
Hier im Beispiel steht da zb. für die Überschrift bei Field Name "input_custom_0. Für das Feld "Name" ist es "input_text_1" und für das Feld "Email" ist es "input_text_2". Der Absendebutton hat die Bezeichnung "input_submit_3".
Im Beispiel wird also im Reiter Dynamic für das Feld Dynamic From name "input_text_1" eingetragen und für das Feld Dynamic From email "input_text_2. Für die Antwortfunktion also Dynamic Reply kann für Name und Mail das Gleiche eingetragen werden. Der Betreff wurde bereits statisch definiert.
Jetzt wird wieder rechts auf den Apply-Button geklickt und die Box mit Klick auf das Kreuzchen verlassen. Danach muss auch oben wieder auf den Speichern-Button geklickt werden. Nun kann das Formular auf der Frontpage getestet werden.
Falls hier eine Fehlermeldung kommt wie "Die Mailfunktion konnte nicht initialisiert werden", dann muss unter Site -> Konfiguration im Bereich Mailing eventuell der richtige Mailer, die SMTP-Authentifizierung usw. eingestellt werden.
Im Mailprogramm werden dann im Kopf der Mail der Betreff und darunter der Name und auch die Email-Adresse des Absenders angezeigt. In der Mail selber wird der Inhalt aus dem Tab "Template" und darunter die IP-Adresse des Versenders angezeigt, weil das ja so definiert wurde.
Es ist auf jeden Fall nicht falsch, im Tab "Template" auch die Feldnamen für Name und Email-Adresse mit den geschweiften Klammern einzutragen, weil das dann informativ innerhalb der Mail angezeigt wird. Also zb. {input_text_2}.
Es ist immer schön, wenn nach dem Absenden des Formulars eine Bestätigung oder ein Danke erscheint. Das lässt sich leicht im Drop-Feld mit Klick auf den Tab "Thanks Message" erledigen.
Einmal auf Click to configure klicken und folgendes Fenster öffnet sich:
Auch hier könnte wieder der Editor verwendet werden. Oder man schreibt wie im Beispiel selber drauf los. Damit die richtige Person angesprochen wird, kann einfach das entsprechende Feld aus dem Form Data Array verwendet werden. Hier also das Feld mit dem Namen, welcher vom Anwender eingetragen wurde und zwar wieder in geschweiften Klammern. Über das Codefenster lässt sich also je nach Formular alles mögliche anstellen.
Damit funktioniert dann auch schon das erste einfache mit Chronoforms erstellte Formular.
Daten in Datenbank speichern!
Bisher wurden die Daten einfach per Email übermittelt, was häufig auch völlig ausreichend ist. Die im Formular eingegebenen Daten können aber auch in einer Datenbank gespeichert und von dort weiter verarbeitet werden. Das eröffnet vielfältige Möglichkeiten.
Am besten startet man im Forms Manager. Hier im Beispiel wird wieder das Formular "test" verwendet. Als Erstes muss das Formular mit einem Häkchen markiert werden.
Jetzt kann auf den Button Create table oben rechts geklickt werden und damit wird eine neue Datenbank-Tabelle erstellt.
Die Tabelle erhält den Namen chronoforms und angehängt den Namen des Formulars. Das wird dann auch im Feld "Table Name" angezeigt.
Hier sind noch diverse weitere Felder vorhanden, welche alle auch editiert werden können. Hier sollte man sich aber schon richtig auskennen, bevor man was ändert. Ansonsten besser Finger davon lassen. Es würde leider auch viel zu umfangreich werden, wenn das alles hier erklärt werden würde. Aber im WWW gibt es natürlich auch zu Datenbanken zahlreiche Informationen.
Falls für das Formular "textareas" also zum Beispiel größere Felder für mehrzeiligen Text, verwendet werden, dann muss für den Spalten Typ also in der Spalte "Type" die Option "TEXT" für das entsprechende Feld gewählt werden. Bei VARCHAR ist die Länge des möglichen Textes begrenzt.
Für das Beispiel muss hier auch nichts geändert werden. Wichtig ist jetzt nur, in der Spalte Enabled ganz oben ein Häkchen zu setzen. Damit sind dann alle Felder ausgewählt und die Tabelle kann mit einem Klick auf den Button "Save" ganz oben rechts abgespeichert werden.
Nach dem Speichern erscheint dann hoffentlich die Erfolgsmeldung "Table successfully created". Die Tabelle ist nun erstellt und wie geht es jetzt weiter?
Die Tabelle ist zwar erstellt, aber noch nicht verbunden. Das kann jetzt wieder mit dem Easy Form Wizard erledigt werden. Dazu wird wieder auf den Link "Wizard edit" geklickt. Im Drop-Feld gibt es den Tab "Store Data" worauf nun geklickt wird.
Noch ein Klick auf DB Save öffnet folgendes Fenster:
Natürlich wird hier die Option Enabled auf Yes gesetzt. Table listet alle Tabellen auf. Hier sind auch alle anderen Joomla-Tabellen zu finden. Deshalb ist hier Vorsicht geboten. Zum Einen lässt sich damit sehr viel anstellen, weil Chronoforms auch mit anderen Joomla-Erweiterungen interagieren könnte. Zum Anderen kann man sich hier aber auch die ganze Datenbank versauen und dann gute Nacht.
Es empfiehlt sich also unbedingt eine Sicherung der Datenbank zu machen, bevor hier überhaupt irgendwas gespeichert wird. Aber eine solche Sicherung sollte man ohnehin regelmäßig durchführen. Wie das geht, ist auch hier in den Tutorials zu Joomla zu finden.
Hier wird jetzt natürlich die eben erstellte Tabelle benötigt. Das ist in diesem Fall jos_chronoforms_data_test. Sonst muss nichts verändert werden und die Lightbox wird mit Apply gespeichert und dann verlassen. Dann wieder ein Klick auf den Button Speichern & Schließen.
Im Forms Manager ist jetzt in der Spalte "Tables Connected" die Tabelle auswählbar. Leider muss die Tabelle nach jedem Fensterwechsel wieder neu gewählt werden. Sicher wird diese Darstellung in einer kommenden stabilen Version von Chronoforms noch verbessert.
Jetzt soll das Formular noch getestet werden. Dazu reicht wieder ein Klick in die Spalte Link auf Frontend view. Jetzt wird ein Name und eine Mail-Adresse eingetragen und das Formular abgesendet.
Zurück im Backend kann jetzt wieder ein Häkchen für das Formular gesetzt und die Tabelle nochmals ausgewählt werden. Um die Aufzeichnungen zu sehen, wird nun oben auf das Icon "Show Data" geklickt.
Das nun geöffnete Fenster zeigt die Records an. Normalerweise ist es hier nur ein Record.
Die Records können hier mit einem Häkchen markiert und über den Delete-Button oben rechts gelöscht werden. Ein Klick auf den Namen eines Records, zeigt die übermittelten Daten aus dem Formular an.
input_text_1 ist logischerweise der eingetragene Name. Darunter die Email-Adresse und input_submit_3 ist der Absende-Button des Formulars, welchem ja auch Werte übergeben werden könnten.
Ganz oben werden eindeutige ID´s angezeigt, wann der Eintrag erstellt wurde und die IP-Adresse des Versenders. Es wird also alles automatisch erzeugt, bis auf das Feld für den Namen und die Email, welche eben der Formular-Absender eingetragen hat. Bei größeren Formularen sind hier natürlich auch viel mehr Spalten vorhanden.
Ein Klick auf den Cancel-Button oben rechts führt wieder zurück und der nächste Record könnte angesehen werden, sofern vorhanden.
Wird das Formular mit Häkchen markiert, kann mit Klick auf den Button "Backup Forms" das Formular auf der Festplatte gesichert werden. Analog dazu führt ein Klick auf Restore Forms zu einem Auswahlfeld in dem die gesicherte Formular-Datei zugewiesen werden und mit Klick auf "submit file" wiederhergestellt werden kann.
Die Buttons Neu, Copy form, Bearbeiten und Löschen müssen sicher nicht erklärt werden.
Dateien hochladen über das Formular!
Dem Formularnutzer soll nun auch noch die Möglichkeit gegeben werden, Dateien hochzuladen. Das geht auch wieder wunderbar mit dem Form Wizard.
Zuerst muss mal ein File Upload Element in das Preview-Fenster gezogen werden. Alles was rüber gezogen wird, fügt sich immer ganz unten an. Unten soll aber der Absende-Button sein. Also wird dieses Element mit Klick auf das dritte Icon über das Button-Element verschoben.
Dann werden wieder die üblichen Einstellungen gemacht und gespeichert. Für das Label wurde hier "Datei hochladen" eingetragen.
Neben der Thanks Message befindet sich der Tab "Files Upload", welcher nun zur Konfiguration des Upload-Elements führt. Natürlich wird Enabled erst einmal auf Yes gesetzt.
Das eben erstellte Upload-Element trägt den Field Name "input_file_4". Dieser Name wird nun unter "Files" eingetragen.
Zusätzlich können hier die erlaubten Dateiformate angegeben werden. Dazu wird nach dem Feldnamen ein Doppelpunkt gefolgt von den Endungen eingetragen. Danach könnte noch ein Komma kommen und ein oder mehrere weitere Felder eingetragen werden. Es sieht im Beispiel also so aus:
Neben den Bildformaten geht natürlich auch zip, rar, doc, docx und pdf. Die Formate sollten immer in Kleinschreibung sein. Wird zb. versucht, ein Bild mit der Bezeichnung bild.PNG hochzuladen, schlägt das fehl.
Im nächsten Feld "Upload Path" kann ein Pfad eingetragen werden, wohin dann der Upload erfolgt. Das kann aber wie hier im Beispiel auch leer gelassen werden. Dann wird immer der Pfad /components/com_chronoforms/uploads/formularname im Joomla-Verzeichnis verwendet. Hochgeladene Dateien sind also dort zu finden.
Damit nicht der ganze Server lahmgelegt wird, kann hier noch eine maximale Dateigröße in Kilobyte angegeben werden. Diese Größe ist aber sowieso auch vom Server her normalerweise beschränkt. Und auch eine minimale Größe kann angegeben werden.
Die Serverbeschränkungen können im Backend über Site -> Systeminformationen -> PHP-Informationen festgestellt werden. Dort sollte auf jeden Fall die Option "File Uploads" auf "On" eingestellt sein. Bei der Option "upload_max_filesize" ist der Wert für die maximale Dateigröße angegeben. Passen die Einstellungen hier nicht, bleibt meist nur der Weg zum Webhoster. Wer einen Server oder VServer betreibt, kann das meist selber einstellen.
Dann folgen die Error Meldungen für das Überschreiten bzw. Unterschreiten der vorgegebenen Größen und wenn der Dateityp nicht stimmt. Am besten übersetzt man einfach alles so einigermaßen ins Deutsche was hier steht. Zum Beispiel so:
Dann wieder wie üblich alles abspeichern. Im Forms Manager kann jetzt wieder auf den Link "Frontend view" geklickt und die Seite ausprobiert werden. Ein Klick im Formular auf den Button "Auswählen" öffnet den Dateibrowser und in diesem Fall kann jetzt eine Bilddatei ausgewählt werden.
Das hochgeladene Bild ist nach dem Absenden in diesem Fall im Ordner /components/com_chronoforms/uploads/test zu finden.
Schlusswort!
Wie bereits zu Anfang erklärt, sind diese Erläuterungen bei Weitem nicht erschöpfend. Es gäbe noch jede Menge zum neuen Chronoforms zu sagen. Allerdings ist die Version für Joomla 1.6 bisher nur als Release Candidate erhältlich.
In diesem Stadium sollte die Komponente schon alleine aus Sicherheitsgründen natürlich noch nicht für eine produktive Seite verwendet werden. Auch fehlen noch diverse Sachen bzw. funktionieren noch nicht wirklich.
Je nach Entwicklungsfortschritt der Komponente wird die Anleitung aber fortgesetzt. Ein guter Einstieg dürfte mit den bisherigen Ausführungen aber gelingen.
