Menüpunkte einbinden / erstellen
ChronoForms - Neues Formular, Formularelemente und deren Eigenschaften
Mit Hilfe von ChronoForms lassen sich individuelle Formulare erstellen, die alle Möglichkeiten von Formularen auch denjenigen zur Verfügung stellen, die kein HTML, CSS, JavaScript und PHP beherrschen.
Erstellt wird in diesem Beispiel das folgende Kontaktformular.
Voraussetzung ist, dass die ChronoForms bereits installiert sind. Wenn das noch nicht der Fall sein sollte, lesen Sie vorbereitend den Artikel "ChronoForms herunterladen und installieren".
Beachtet bitte, dass es sich bei diesem Beitrag um die Chronoforms für Joomla! 1.5 handelt. Wer die Chronoforms unter Joomla! 1.6 betreiben will, findet den Einstieg ab dem Beitrag "Chronoform unter Joomla! 1.6 installieren"!
Neues Formular
Starten wir damit, dass Sie sich am Backend anmelden und über Erweiterungen > ChronoForms in das Forms Management wechseln.
Das ist die Zentrale für alle Formulare, die Sie später entwickeln, anpassen und auswerten wollen. Um ein neues Formular zu erstellen, nutzen Sie den "Form Wizard".
Wir hätten auch gleich über Erweiterungen > Chrono Forms > Form Wizard starten können.
Der Form Wizard führt sich durch die vier Schritte (Step 1 bis Step 4), die das Formular gestalten und die Rückmeldungen und E-Mails einstellen.
Die Elemente der Toolbox
Im Step 1 - Design your form haben Sie einen leeren Formularbereich vor sich. Rechts daneben ist die Toolbox mit den Elementen, aus denen ein Formular bestehen kann. Hierzu zählen:
| Text |
Das Elemente "Text" stellt einen ganz normalen Text dar. Hier könnte man eine Einleitung schreiben oder bei komplexen Formularen Hinweise geben, wie man das Formular ausfüllen muss.
Ziehen Sie das Element Text aus der Toolbox in den Formularentwurf. Anschließend klicken Sie einmal auf das gerade eingefügt Feld.
Die Eigenschaften (Properties) des Feldes erscheinen unter der Toolbox. Tragen Sie bei Text z. B. "Test" ein und klicken Sie dann auf "Apply".
Nach dem Klick auf "Apply" werden die Eigenschaften durchgesetzt und angezeigt. Hier kann man einiges an Text eintragen, z. B. eine Erläuterung für die folgenden Fragen. Wenn Sie das Text-Elemente anklicken, erscheint in der oberen rechten Ecke z. B. ein rotes Kreuz (siehe roter Pfeil). Darüber können Elemente aus dem Formular wieder entfernt werden.
Ein Klick auf das Symbol "Form Preview" in der linken oberen Ecke ...
... und man kann einen ersten Eindruck vom Ergebnis bekomen. Der Click auf "close" oben rechts schließt die Ansicht wieder. Damit sind die ersten Schritte getan. Schauen wir uns die anderen Elemente an. |
|
Heading
|
Überschriften können über das "Heading" Element positioniert werden. Hier können Sie auch schon erkennen, dass mit ChronoForms auch sehr komplexe Formulare, auch Umfragen, entwickelt werden können.
Ziehen Sie das Element einfach in den Entwurfsbereich. In den Eigenschaften (Properties) können Sie den "Text" beliebig wählen. Überr die "Size" können Sie die Überschriftenebene (H1 bis H6) wählen. Zum Schluss mit Apply bestätigen. |
|
TextBox
|
Das Element, dass in Formularen wahrscheinlich am häufigsten eingesetzt wird, ist die TextBox. Vor dem Eingabefeld befindet sich das Bezeichnungsfeld, dahinter das Eingabefeld. Ziehen Sie die TextBox in den Formularentwurf.
Klicke Sie einmal auf die TextBox drauf, ...
Die Texbox hat schon ein paar mehr Eingenschaften, die weiter unten beschrieben werden. Hier nur der Hinweis, dass vorn das "Label" steht und dahinter das Eingabefeld ist. Typische TextBoxen: Vorname, Nachname, E-Mail, usw. |
| PasswordBox |
Die PasswordBox ist genau wie die TextBox, doch werden die Inhalte im Eingabebereich nur als Sternchen dargestellt, so wie man es von Kennworteingaben gewohnt ist.
Die Vorschau zeigt, wie sich die PasswordBox später verhält.
Sternchen (hier im Firefox 3.x Punkte) statt der eingetippten Zeichen. |
| TextArea |
Bemerkungen, Erklärungen oder Mengentexte kann man über TextAreas einholen. Fügen Sie ein TextArea-Element in den Entwurfsbereich.
Der Textbereich kann mit der Eigenschaft "Rows" in der Anzahl der Zeilen bestimmen. Geben Sie unter "Label" das ein, was vor dem Textbereich stehen soll und klicken Sie auf "Apply". Die Vorschau zeigt die folgende Abbildung.
Wenn mehr als 3 Zeilen beschrieben wird, erschein automatisch die vertikale Bildlaufleiste. Die Anzahl der Zeichen ist hier nicht begrenzt. |
| DropDown |
Die DropDown- oder Kombinationsfelder geben dem Besucher die Möglichkeit eine von mehreren Optionen zu wählen.
Unter den Options werden untereinander die einzelnen Optionen angegeben. Über "Choose Option" kann man den Text eingeben, der beim Aufruf des Formulares erscheinen soll, z. B. "Bitte wählen Sie einen Option". Lässt man den Haken in der Eigenschaft "Add Choose Option" weg, so wird der erste Eintrag aus der Liste der "Options" als Standardeintrag in dem DropDown Feld stehen.
Die restlichen Optionen werden weiter unten erläutert. |
| CheckBox |
Mit Hilfe von Checkboxen werden keine, eine oder mehrere Optionen auswählbar.
In den Optionen werden die Auswahlmöglichkeiten einfach untereinander geschrieben. |
| RadioButton |
Die RadioButton Elemente erlauben eine von vielen Optione auszuwählen. Auch diese Elemente sind den Besuchern durchaus bekannt. Jeder kann sofort damit umgehen.
Die Optionen werden wieder untereinander geschrieben. |
| DateTimePicker |
Mit Hilfe des DateTimePickers können Sie das Datum aus einem Kalender auswählen. Das Format für das Datum ist dd/mm/yyyy.
In der Vorschau sieht das wie folgt aus:
Wie man beim "DateTimePicker" die Uhrzeit herausholen kann, kann ich leider nicht sagen. Ggf. habt Ihr die Lösung, dann einfach einen Kommentar hier zurücklassen. |
| FileUpload |
Mit dem Element FileUpload werden die Besucher in die Lage versetzt Dateien hochzuladen.
Über "Allowed Extensions" können Sie angeben, welche Dateinamenerweiterungen zugelassen sind (z. B. txt|doc|xls|docx, usw.). Das Trennzeichen ist das Pipe-Symbol ("|" ... ALT Gr + <). Bei der "Maximum File Size in KB" können Sie die Dateigröße begrenzen (z. B. 1024 für 1024 Kilobyte, sprich 1 MB). Die Datei wird in das Verzeichnis /components/com_chronocontact/uplaods/<formularname>/ geladen. Der Dateiname könnte wie folgt aussehen: "20100414222057_dateiname.jpg", wobei die 20100414 das Datum, die 222057 die Uhrzeit und _dateiname.jpg der Dateiname ist. <formularname> ist der Namen, unter dem das Formular gespeichert wird. |
| HiddenField |
Die verstecken Felder haben für den Besucher keinerlei Bedeutung. Doch werden die Informationen, die in diesen versteckten Feldern stehen, mit der E-Mail zu ihnen gesandt und auch in der Datenbank gespeichert.
Gerade wenn Sie sehr viele Formulare haben, könnte über ein verstecktes Feld eine Information übermittelt werden, von welchem Formular die Nachricht gesendet wurde.
In der E-Mail würde dann die Information "hide_von_wo: domain.de" stehen. Besser wäre wahrscheinlich, wenn wir das "Hidden field" mit "Absendeformular" und den Value mit "Kontaktformular auf www.xyz.de" setzen. |
| Captcha |
Die Abfrage einer schwer lesbaren Zeichenkette ist mittlerweile zum Standard geworden. Die sogenannten Captchas dienen der Spam-Abwehr. Um Spam zu versenden gehen manche den Weg, Formulare automatisiert auszufüllen und zu versenden. Ein Sicherheitsabfrage mit so einen Captcha erschwert den automatischen Spambots das versenden solcher Spams über Ihr Formular.
In der Vorschau sieht das dann wie folgt aus:
Sie sollten in Ihren Formularen immer so ein Captcha haben, sonst bekommen Sie früher oder später haufenweise Spams über Ihr Formular zugesandt. |
| MultiHolder |
MultiHolder sind Platzhalter, in denen mehrere der Elemente gesetzt werden können.
Das Ergebnis sieht dann so auf:
Beachten Sie, dass das 1. und 2. Feld (hier der Vor- und Nachname) in eine Zeile geschrieben werden. |
| Button |
Alle Formulare haben irgendwo eine Schaltfläche, um die Formularinhalte zu versenden. Diese Aufgabe erfüllt hier auch der Button.
Ein Klick auf senden und das Formular wird verarbeitet. |
Das sind erst mal alle Elemente, die Ihr über die Toolbox in den Formularentwurf ziehen könnt.
Die Eigenschaften der Elemente
Nun hat jedes dieser einzelnen Elemente noch spezielle Eigenschaften. So haben die meisten der Elemente z. B. ein "Label", also das was vor dem Element steht.
Schaut euch die übrigen Optionen der Elemente mal an. Mit manchen kann man sofort was anfangen, bei anderen sollte man doch mal die Hilfe lesen. Auf der Herstellerseite sind hierfür einige Tutorials im PDF-Format bereitgestellt.
| Label | Bezeichnung für das Textfeld. Hier kommt das rein, was später vor dem leeren Textfeld stehen soll. | |
| Small Label | ??? Kann ich nicht sage. Bin mir bis heute nicht bewusst, wo das genau eingesetzt wird. Eine Frage im Forum des Herstellers soll das klären. | |
| Size | Wie breit soll die Textbox sein (30 Zeichen sind Standard) | |
| Max Size | Anzahl der Zeichen, die maximal in das Textfeld geschrieben werden können. | |
| Validation | In diesem Bereich prüft er die Eingaben auf bestimmte Gültigkeiten | |
| Required | Erforderlich. Bedeutet, dass in dieses Textfeld etwas eingegeben werden muss, sonst kann das Formular nicht abgeschickt werden. Der Benutzer wird damit zur Eingabe von Daten gezwungen. Das Feld wird zum Pflichtfeld. |
|
| Numbers Only |
Nur Zahlen sind zulässig. Beispiel: 123
Zulässig sind:
|
|
| Digits Only |
Zur einzelne Ziffern sind zulässig: 1 ... so dachte ich. Doch man kann trotzdem Zahlen wie "123" eintippen und es folgt keine Fehlermeldung. Also wieder ans das Herstellefourm wenden.
Zulässig sind:
|
|
| Alphas only | Nur Buchstaben sind erlaubt. Beispiel: abc | |
| Alphas/Nums only | Buchstaben und Zahlen mit und ohne Leerzeichen dazwischen sind erlaubt. Beispiel: asf123 ... aber auch "asdf 234" ... oder "222" ... oder "asd". |
|
| Date |
Gültiges Datum ist erlaubt. Beispiele:
Mit den Schaltjahren nimmt er es nicht so genau, so kann man z. B. durchaus den 2010-02-29 eintippen. Auch ein 31.02.2010 ist möglich. |
|
| Gültige E-Mail-Adresse ist erlaubt | ||
| URL | Gültige Internet-Adresse, z. B. "http://www.joomla-fulda.de". Nicht das "http://" vergessen! | |
| Date (AU) |
Gülties Datum ist erlaubt. Beispiel:
|
|
| Currency-Dollars |
Währung (in US-Dollar) sind erlaubt. Gültig sind:
|
|
| Tooltipp | Neben dem Textfeld wird ein Fragezeichen angezeigt, dass den Hinweistext als "Tooltipp" darstellt. Dies ist Sinnvoll, wenn nicht ganz klar ist, was in das Feld eingeragen werden soll. | |
| Hide Label | Beschreibung verstecken. Damit wird das Textfeld ganz nach Links gesetzt. Die führende Beschreibung fehlt dann einfach. | |
| Label Width | Breite der Beschreibung in Pixel. | |
| Field Name | Der Name des Textfeldes. Ggf. zur späteren Weiterverarbeitung und zur Speicherung in der Datenbank. Achtet darauf auch Datenbankkonforme Namen zu nutzen (z. B. txt_name, VorName, text_1 usw). |
Damit sind die Elemente der Toolbox und auch die Eigenschaften, die die Elemente haben kurz durchgesprochen. Im nächsten Artikel "ChronoForms - Kontaktformular erstellen" gehe ich darauf ein, wie man mit Hilfe von ChronoForms ein Kontaktformular unter Joomla! erstellt.