Erstellen eines Formulares
Zum Erstellen eines neuen Formulares bitte in den jeweiligen Mandanten wecheln und unter Plugin den Formular Assistent aufrufen. Auf der linken Seite werden Ihnen alle bereits für den aktuellen Mandanten angelegten Formulare angezeigt. Zum Erstellen eines neuen Formulares klicken Sie auf "Formular erzeugen" und tragen die folgenden Pflichtwerte ein:
Formular
Formularname: Eindeutiger Name des Formulares. Die Angabe eines Formularnamens ist zwingend. Für den Formularnamen sind alle Zeichen erlaubt. Dieser wird zur Anzeige innerhalb des Formularassistenten und für die Auswahl des Formulares im Formulareditor verwendet.
Datentabelle: Eindeutiger Name der Datenbanktabelle. Die Angabe eines Datentabellennamen ist zwingend. Namen von Datentabellen dürfen nur aus Ziffern, kleinen Buchstaben (a bis z) oder Unterstrichen bestehen. Großbuchstaben werden in Kleinbuchstaben umgewandelt und andere Zeichen in Unterstriche umgewandelt. Systemweit kann ein Datenbanktabellename nur einmal vergeben werden. Als Standard haben wir uns auf den Beginn des Tabellennamens mit con_pifa_XXX geeinigt. XXX kann dabei frei gewählt werden. Als Beispiel haben wir im DE-Mandanten noch das Mandantenkürzel angehängt, z.B. con_pifa_contacts_de und für AE con_pifa_contacts_ae. Der Name der Datenbanktabelle kann im Nachhinein geändert werden.
Methode: Hier kann die Übertragungsmethode für die Formulardaten ausgewählt werden. Die Angabe einer Methode ist zwingend. In der Regel bietet sich hier aber die Nethode POST an. Nur für Formulare mit wenigen Daten ist die Methode GET sinnvoll.
mit Zeitstempel: Um allen Datensätzen der Datentabelle einen Zeitstempel hinzuzufügen kann dies hier für das Formular definiert werden. Diese Eigenschaft ist nachträglich hinzugefügt worden und deshalb auf dem Screenshot noch nicht zu sehen.
Formularfelder
Zum Anlegen der jeweiligen Formularfelder wechseln Sie in den Abschnitt "Formularfelder" innerhalb des PIFAs.
Folgende Feldtypen stehen Ihnen für Ihr Formular zur Verfügung:
Icon | Feldtyp | Beschreibung |
---|---|---|
Einzeiliges Eingabefeld | Das Einzeilige Eingabefeld dient als reguläres Eingabefeld für beispielsweise Vorname, Nachname, etc., Zeichenbegrenzung auf 255 Zeichen. | |
Mehrzeiliges Eingabefeld | Das Mehrzeilige Eingabefeld ermöglicht eine Eingabe von längeren Texten, wie beispielsweise eine Anfrage. | |
Passwortfeld | Das Passwortfeld ähnelt dem Einzeiligen Eingabefeld, stellt die Eingabe aber verschlüsselt dar. | |
Radiobuttons | Eine Gruppe von meist runden Auswahlflächen von der nur ein Wert auswählbar ist. Dieser Formularfeldtyp dient z.B. der Auswahl einer Anrede (Herr oder Frau). | |
Checkboxen | Eine Gruppe von meist eckigen Auswahlflächen bei der im Gegensatz zu Radiobuttons aber mehrere Werte auswählbar sind. Dieser Formularfeldtyp dient z.B. der Auswahl von Kontaktwegen. | |
Auswahlliste | Eine Auswahlliste, auch Selectbox genannt, ist eine alternative Darstellung einer Gruppe von Radiobuttons und ermöglicht ebenfalls die Auswahl eines Wertes aus einer definierten Liste. | |
Auswahlliste mit Mehrfachauswahl | Eine Auswahlliste mit Mehrfachauswahl, auch Multi-Selectbox genannt, ist eine alternative Darstellung einer Gruppe von Checkboxen und ermöglicht ebenfalls die Auswahl mehrerer Werte aus einer definierten Liste. | |
Datum & Uhrzeit | Feld zur Eingabe eines Datums & Uhrzeit, z. B. der Eintrag eines Kaufdatums. Die Darstellung gleicht einem Einzeiligen Eingabefeld, allerdings wird beim Erhalt des Fokus neben dem Feld ein kleiner Kalender zur Auswahl eines Datums dargestellt. Wird dort eine Auswahl getroffen so wird das Datum in das Formularfeld eingetragen. Verhalten im Frontend Der Kalender wird im Frontend nur dann angezeigt, wenn in Ihrem Mandanten das Plugin jQuery eingebunden ist. Dies ist im Beispielmandanten von CONTENIDO bspw. nicht der Fall. Dieses Verhalten soll in einer späteren Version von CONTENIDO verbessert werden. | |
Dateiupload | Feld zum Upload von Dateien, z.B. innerhalb des Jobformulares zum Anhang der Bewerbung. | |
Fortschrittsbalken | Fortschrittbalken, zum Beispiel bei mehrseitigen Formularen | |
Slider | Slider zur Auswahl eines Wertes in Form eines Sliders | |
Captcha | Das Captcha wird mithilfe der Securimage-Bibliothek realisiert und besteht aus einer Graphik und einem Einzeiligen Eingabefeld. Damit das Formular verarbeitet wird muß der Benutzer die in der Graphik dargestellten Zeichen und Ziffern in das Eingabefeld eintragen. Auf diesem Wege werden sogenannte Bots abgefangen und verhindern das Spamming. | |
Send | Absenden-Button des Formulares. Jedes Formular sollte eine solche Schaltfläche besitzen. | |
Reset | Zurücksetzen-Button des Formulares. Damit werden die Werte aller Formularfelder auf den ursprünglichen Zustand zurückgesetzt. | |
Back | Zurück-Button des Formulares | |
Absatz | Absatz, zum Einfügen eines Absatzes in Form einer Trennlinie zwischen zwei Bereichen. Dieser kann z.B. zur Erläuterung von nachfolgenden Formularfeldern verwendet werden. | |
Verstecktes Eingabefeld | Eingabefeld wird nicht angezeigt, kann aber mit einem Wert vorbelegt und dann vom eingestellten Prozessor verarbeitet werden. | |
Anfang einer Formularfeldgruppe | Beginn einer Gruppe von Formularfeldern | |
Ende einer Formularfeldgruppe | Ende einer Gruppe von Formularfeldern. |
Einfügen eines Formularfeldes
Zum Einfügen eines Formularfeldes klicken Sie entweder mit einem Einfachklick auf das Formularfeld oder Ziehen es mittels Drag & Drop in den unteren Bereich (weiße Fläche)
Nach der Auswahl öffnet sich das Bearbeitungsfenster des jeweiligen Feldtypen. Die einzutragenden Werte können hierbei abweichen. Nehmen wir als Beispiel das "Einzeilige Eingabefeld". Das Pop-up ist gegliedert in drei Bereiche, den Bereich "Allgemein" für die Eingabe der allgemeinen Angaben des Formularfeldes, der Bereich "Datenbank" für den Eintrag des jeweiligen Spaltennamens und der Bereich "Formatierung" zur Hinterlegung einer css-Klasse für das jeweilige Feld.
Allgemein
Folgende Eingaben haben wir im Allgemeinen Bereich
Feldtyp: Dieser wird bestimmt durch die Auswahl des Formularfeldes
Beschriftung: Label für das jeweilige Feld im Frontend
Beschriftung darstellen: Checkbox - Soll der Wert im Frontend dargestellt werden.
Pflichtfeld: Ist das Feld ein Pflichfeld
Standardwert: Gibt es ein Standardwert für das Formularfeld - Eingabe des Standardwertes
Validierungsregel: Validierungsregel für die Eingabe im Frontend, Regulärer Ausdruck, z.B. Prüfung der Emailadresse
Feldermeldung: Auszugebende Fehldermeldung im Frontend
Hilfetext: Hilfetext zum Formularfeld
Datenbank
Innerhalb des Bereiches Datenbank haben wir für diesen Feldtyp nur eine Eingabe, nämlich der Spaltenname in der Tabelle auf der Datenbank, bitte auch an dieser Stelle keine Umlaute und Sonderzeichen verwenden.
Options (z.B. bei Radiobuttons, Auswahllisten, etc.)
Bei einigen Formularfeldtypen haben wir Options, um beispielsweise eine ext. Datenquelle einzubinden oder aber fixe Options hinzuzufügen.
Option hinzufügen: Um eine Option hinzuzufügen ist der KLick auf "+ Option hinzufügen" notwendig. Mit KLick auf diesen Button werden jeweils zwei neue Felder hinzugefügt. Zum Einen eine Beschriftung für das Label im Frontend und der Wert, welcher in der Datenbank abgelegt wird. Die Feldpaare werden durchnummeriert von 1 - n. Je nachdem wie viele Optionen hinzugefügt werden.
External_Options: Auswahl einer fest hinterlegten Datenquelle für den Mandanten. In unserem Falle sind es die Produktgruppen.
Formatierung
Im Bereich "Formatierung" können eine oder mehrere CSS-Klassen ausgewählt werden. Welche CSS-Klassen hier angeboten werden kann mit der System- oder Mandanteneinstellung pifa/field-css-classes
definiert werden. Diese enthält die Namen der CSS-Klassen in komma-separierter Form (CSV).
Zum Speichern Ihrer Eingaben klicken Sie auf "Save" oder zum Abbrechen auf "Cancel"
Die dazugehörigen Stylesheets können dann entweder in einem global geladenen Style-Sheet abgelegt werden, oder im Bereich Style ⇒ Module ⇒ eigenesModul ⇒ (Tab) CSS. Natürlich muss dann darauf geachtet werden, dass dieses Modul auch geladen wird.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.