Joomla!® User Group Fulda

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.

 

ChronoForms - Form Wizard starten

 

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.

 

ChronoForms - Form Wizard

 

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.

 

ChronoForms - Einfügen eines Text Elementes

 

Ziehen Sie das Element Text aus der Toolbox in den Formularentwurf. Anschließend klicken Sie einmal auf das gerade eingefügt Feld.

 

ChronoForms - Einfachen Text einfügen

 

Die Eigenschaften (Properties) des Feldes erscheinen unter der Toolbox.

Tragen Sie bei Text z. B. "Test" ein und klicken Sie dann auf "Apply".

 

ChronoForms - Element Löschen

 

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.

 

ChronoForms - Vorschau auf das Formular

 

Ein Klick auf das Symbol "Form Preview" in der linken oberen Ecke ...

 

ChronoForms - Vorschau auf das Formular

 

... 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.

ChronoForms - Das Element Heading

 

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.

ChronoForms - TextBox einfügen

 

Klicke Sie einmal auf die TextBox drauf, ...

 

ChronoForms - Eigenschaften der TextBox

 

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.

 

ChronoForms - PasswordBox

 

Die Vorschau zeigt, wie sich die PasswordBox später verhält.

 

ChronoForms - PasswordBox Vorschau

 

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.

ChronoForms - TextArea für viel Informationen

 

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.

 

Chronoforms - Vorschau eines Textbereiches

 

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.

ChronoForms - DropDown Felder oder Kombinationsfelder

 

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.

 

ChronoForms - DropDown Feld

 

Die restlichen Optionen werden weiter unten erläutert.

CheckBox
Mit Hilfe von Checkboxen werden keine, eine oder mehrere Optionen auswählbar.

ChronoForms - Checkboxen

 

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.

ChronoForms - Radio Buttons als Option

 

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.

 

ChronoForms - DateTimePicker zur Datumsauswahl

 

In der Vorschau sieht das wie folgt aus:

 

ChronoForms - DateTimePicker zur Datumsauswahl

 

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.

ChronoForms - Dateien hochladen mit dem FileUpload Element

 

Ü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.

 

ChronoForms - Hidden Fields bzw. verstecke Felder

 

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.

 

ChronoForms - Captcha - Sicherheit vor Spambots

 

In der Vorschau sieht das dann wie folgt aus:

 

ChronoForms - Captcha im Einsatz

 

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.

ChronoForms - MultiHolder - Platzhalter die für Ordnung sorgen

 

Das Ergebnis sieht dann so auf:

 

ChronoForms - MultiHolder in der Vorschau

 

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.

 

ChronoForms - Schaltfläche oder auch 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:

  • 12
  • 12.44
  • 1234
  • 13334.83
Beachtet, dass hier der Punkt als Dezimaltrennzeichen eingegeben werden muss. Das Komma als Tausendertrennzeichen wird nicht akzeptiert.
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:

  • 12
  • 12.44
  • 1234
  • 13334.83
Beachtet, dass hier der Punkt als Dezimaltrennzeichen eingegeben werden muss. Das Komma als Tausendertrennzeichen wird nicht akzeptiert.
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:
  • yyyy-mm-dd (2010-10-31)
  • yyyy/mm/dd (2010/10/31)

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.

E-Mail 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:
  • dd.mm.yyyy (31.10.2010)
  • dd/mm/yyyy (31/10/2010)
Genau wie bei Date ist auch hier der 29.02.2010 oder auch ein 31.02.2010 möglich. Daher solltet Ihr selbst die Formulardaten später auf Ihre Gültigkeit hin prüfen.
Currency-Dollars
Währung (in US-Dollar) sind erlaubt. Gültig sind:
  • 10
  • $10
  • 10.78
  • 10.78
  • $10.78
Beachtet hier den Punkt als Dezimaltrennzeichen. Euro-Beträge sind nicht zulässig.
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.

JUG Fulda

Anmeldung

Wer mitmachen möchte schickt uns bitte über das Kontaktformular eine kurze Info mit Eurer E-mail-Adresse und eurem Wunschnamen.

Copyright © 2011 Joomla!® User Group Fulda. Alle Rechte vorbehalten.
Joomla! ist freie, unter der GNU/GPL-Lizenz veröffentlichte Software.