xtcDynSpryForm 0.9.2

Die Grundlage dieses Anmelde- Buchungs- oder Kontaktformulars, wie es auch auf unserer Kontaktseite und unseren Moduldownloadseiten Anwendung findet, ist das kostenlose Adobe Spry Framework für Ajax.

Voraussetzungen:
Contendio ab V.4.6.23

Getestet unter:
Contenido V.4.6.23 bis 4.8.6

Hintergrund:
Unsere Kunden haben nicht immer Ahnung von HTML-Programmierung. Um ein vorhandenes Standartkontaktformular zu erweitern ist dies aber nun leider eine kleine Voraussetzung. Mann muss die Templates und eventuell auch den Modul-PHP-Code anpassen. Das war uns zu umständlich und Kundenunfreundlich.

Idee:
Eine dynamisches Formular das der Kunde mit ein paar Mausklicks über die Templatekonfiguration selbst, ohne HTML oder PHP-Kennmisse, anpassen, erweitern, verändern kann.

Ergebnis:
Unser dynamisches xtcDynSpryForm.

Funktion:
Nach der Installation steht im Template folgende Ansicht zur Verfügung:



Die oberen Felder sind in der Funktion mit dem Standart-Kontaktformular identisch. Im unteren Bereich kann man nun erst einmal die Anzahl der benötigten Felder eingeben. Dan geht es durch druch auf den blauen Pfeil nach rechts weiter.



Links gibt man nun die Feldnamen ein die später als Label vor den Eingabefeldern erscheinen sollen.



Dann noch ein Klick auf den blauen Pfeil und das Formular ist erst einmal Grundsätzlich erstellt. Das Ergebnis sieht nun wie folgt aus:



In den Selectfeldern in der Spalte Type hat man verschiedene Einstellmöglichkeiten zum Type dieses Eingabefeldes. Wird beispielweise bei Feld 5 (Text) Textarea anstatt Textfeld gewählt.



siehst dann das Kontaktformular folgendermaßen aus:



Die nächste Möglichkeit währe zum Beispiel ein Selectfeld (Pulldown). Dazu wählt man als erstes bei dem Type Selectfeld und klickt danach auf den blauen Pfeil nach rechts. Unter dem gewählten Feld geht ein neues Eingabefeld auf. Hier wird die Anzahl der benötigten Pulldownfelder eingegeben und wieder auf den blauen Pfeil drücken.



In den folgenden Feldern dann die einzelnen Namen eingeben und wieder auf den blauen Pfeil drücken.



Das Ergebnis sieht dann folgendermaßen aus:



In der Spalte Pflichfeld kann man für jedes Element auswählen ob es ein FormularPflichfeld ist. Diese Überprüfung findet dann direkt über das Adobe Spry Framework für Ajax statt und siehst folgendermaßen aus:



Gelb ist die aktuelle Eingabe, Rot ein Fehler, Grün alles Ok. Bei allen Namen wird automatisch ein  Doppelpunkt und bei Pflichfeldern ein * hinzugefügt.

Zusätzliche Funktionen

• Captcha zuschaltbar
• Auswahl idcat oder idart
• IE6-PNGFIX zuschaltbar
• Überschrift- und Textbereiche innerhalb des Formulars definierbar

Verfügbare Formularfelder ohne Überrüfung:

• Textfeld
• Textarea
• Selectfeld
• Radio einzeln
• Radio Gruppe, Spaltenanzahl einstellbar
• Checkbox einzeln
• Checkbox Gruppe, Spaltenanzahl einstellbar
• Hidden-Felder

Verfügbare Formularfelder mit Überprüfungen

• Textfeld mit min. und max. Zeichenanzahl
• Textfeld URL Schreibweise
• Textfeld Email Schreibweise, als Absender- und/oder Bestätigungsemail einstellbar
• Textfeld Integer mit min. und max. Zeichenanzahl
• Textfeld PLZ-5stellig nur Zahlen
• Textfeld Datum, Format einstellbar
• Textfeld Uhrzeit, Format einstellba
• Textarea mit min. und max. Zeichenanzahl
• Selectfeld, Auswahl überprüfen
• Radio einzeln, Auswahl überprüfen
• Radio Gruppe, Auswahl überprüfen, Spaltenanzahl einstellbar
• Checkbox einzeln, Auswahl überprüfen
• Checkbox Gruppe, Auswahl überprüfen, Spaltenanzahl, min. Check und max. Check einstellbar

Das ganze kann man dann beliebig kombinieren und sich daduch ein Individuelles Kontaktformular erstellen.

Das Formuar hat zusätzlich einen zuschaltbaren Spamschutz (CAPTCHA) und einen IE6-PNGFix da wir selbst transparente PNG im Formular einsetzen.

Installation:

1. Entpacken der Datei
2. Sie legen in Contenido ein neues leeres Modul an und importieren dann das Modul xtcSprxFormular0.9.0.xml  in das neue Modul
3. Sie binden das neue Modul in das Template ein 
4. Sie kopieren den Ordner xtcDynForm in das Mandantenverzeichnis

Update von der Version 0.8.0 auf 0.9.0

1. Download der Datei xtcDSPpatch0.8.0to0.9.0.zip
2. Im vorhandenen Modul per Import from file das neue Modul xtcSprxFormular0.9.0.xml importieren
3. Sie kopieren den Ordner xtcDynForm über den vorhandenen Ordner im Mandantenverzeichnis, es werden nur neue Dateien eingefügt und keine älteren überschrieben

Update von der Version 0.9.0 auf 0.9.2

1. Download der Datei xtcDSPpatch0.9.0to0.9.2.zip
2. Im vorhandenen Modul per Import from file das neue Modul xtcSprxFormular0.9.2.xml importieren
3. Sie kopieren den Ordner xtcDynForm über den vorhandenen Ordner im Mandantenverzeichnis, es wird nur die neue Dateien example.css hinzugefügt da ab dieser Version das Beispiel-CSS nicht mehr im Modul selbst ist.

CSS-Einstellungen

Folgende CSS ist hinterlegt:

• #SpryContactForm
• li.oneradio
• li.onecheckbox
• li.select
• li.grpradio
  • span.grpradio
• li.grpcheckbox
  • span.grpcheckbox
• li.headline
• li.text
• span.SprySicherheitscode
• span.contactFormSubmit
• input.resetbutton
• input.submitbutton

Da die externen Dateien ebenfalls im Modul geaden werden und daher nicht in das Layout integriert werden müssen, finden alle Anpassungen der CSS finden in entweder im Modul selbst oder in den dementsprechenden CSS-Dateien im Verzeichnis xtcDynForm/css statt.

Die Spaltenbreite Checkbox- und Radiobutton-Gruppen wird per CSS definiert.

Beispiel:


Eine Demo finden Sie hier.
Nur bei dieser Demo wird das Formular NICHT versand, sondern der Inhalt der EMail direkt auf der Folgeseite angezeigt.

Changelog:


Version 0.9.2

• Neu: Emailfeld als Absenderemail einstellbar
• Neu: Emailfeld mit Bestätigungsemail senden
  (mehrfach benutzbar wenn mehrere Email-Felder
• Neu: Überschriftfelder innerhal des Formulars einfügbar (CMS_HTMLHEAD)
• Neu: Textfelder innerhalb des Formulars einfügbar (CMS_HTML)
• Beispiel-CSS nun extern im Verzeichnis xtcDynForm/css

Version 0.9.0

• Neu: Radio einzeln
• Neu: Radio Gruppe, Spaltenanzahl einstellbar
• Neu: Checkbox einzeln
• Neu: Checkbox Gruppe, Spaltenanzahl einstellbar
• Neu: Hidden-Felder
• Neu: Textfeld Datum, Format einstellbar
• Neu: Textfeld Uhrzeit, Format einstellbar
• Neu: Radio einzeln, Auswahl überprüfen
• Neu: Radio Gruppe, Auswahl überprüfen, Spaltenanzahl einstellbar
• Neu: Checkbox einzeln, Auswahl überprüfen
• Neu: Checkbox Gruppe, Auswahl überprüfen, Spaltenanzahl, min. Check und max. Check einstellbar

Version 0.8.0

• Captcha zuschaltbar
• Auswahl idcat oder idart
• IE6-PNGFIX zuschaltbar
• Textfeld
• Textarea
• Selectfeld
• Textfeld mit min. und max. Zeichenanzahl
• Textfeld URL Schreibweise
• Textfeld Email Schreibweise
• Textfeld Integer mit min. und max. Zeichenanzahl
• Textfeld PLZ-5stellig nur Zahlen
• Textarea mit min. und max. Zeichenanzahl
• Selectfeld, Auswahl überprüfen