Formulare mit jFormer
- 13.09.2016
Nach der Abarbeitung eines großen Berges voller Arbeit, kann ich mich endlich wieder dem bloggen widmen.
Dieser Beitrag handelt vom erstellen von Web-Formularen mit der php/jQuery API jFormer.
Vielen (Backend)Programmierern ist es ein Graus wenn sie (doch einmal) Formulare in HTML/CSS/Javacript erstellen sollen, die das besondere Etwas haben müssen. Mit diesem Artikel möchte ich etwas Abhilfe schaffen!
Das besondere Etwas – Zitat der jFormer Homepage:
- Painless form validation
- Easily customizable using CSS
- User controlled field duplication
- Bot prevention (no need for CAPTCHAs)
- Users can save and resume forms
- Form triggers lock or unlock form fields
- One file for form generation and processing
- Templates for common forms
Ich bin durch und durch ein Backend-Entwickler… und genau dieser Gruppe von Entwicklern wird es gefallen, dass das Formular mit all seinen Features (z.B. mehrseitiger Formularablauf ohne Seitenwechsel – AJAX, Benutzerhinweise – welche bei Bedarf jedoch ins Deutsche übersetzt werden müssten) in reinem PHP erstellt werden kann.
Erst wenn es stark individualisiert werden soll, muss man sich dann doch über das CSS und HTML hermachen.
Einige Beispiele und Democode bekommt man direkt auf der Seite von jFormer. Mittlerweile ist auch die Dokumentation des recht neuen Frameworks für den Einstieg ganz gut geeignet. Mit diesen Informationen kann man dann recht schnell ganz ansehnliche Formulare erstellen. Im Folgenden gehe ich auf ein paar speziellere Punkte ein.
Anpassung der Formularhöhe
Wenn man z.B. mit der PHP-Klasse jFormComponentHtml HTML-Tags mit eigenen CSS Klassen für Text und/oder Bilder in das Formular einfügen möchte, passt sich die Höhe des Formulars leider nicht automatisch an. Um nun keinen Scrollbalken neben dem Formular zu erhalten, muss man der jFormer PageSection ID in der CSS der gleichnamigen Id die benötigte Höhe des Formulars mitgeben. Den Rest übernimmt das Javascript von jFromer und reicht diesen Wert an die im DOM höher liegenden HTML Klassen bzw. Ids weiter.
Abhängigkeiten einer CheckBox einblenden – dependencyOptions
Es kann vorkommen, dass in Abhängigkeit einer CheckBox weitere Formularelemente eingeblendet werden sollen. Z.B. findet dies Verwendung bei Warenkörben und der abweichenden Lieferadresse. Sobald die CheckBox angeklickt wird, werden die neuen Formularfelder eingeblendet. Dies ist auch mit weiteren Pflichtfeldern möglich. Diese Thematik ist mit jFormer sehr schnell und einfach umgesetzt.
Bei der Instanzierung des einzublendenden Elements (jFormer php Objekt), gibt man dem Konfigurationsarray den Schlüssel “dependencyOptions” mit, welches als Wert wieder ein Array beinhaltet und die Funktionalität enthält.
//checkbox for other shipping address new JFormComponentMultipleChoice('billing_shipping', '', array( array('value' => '1', 'label' => 'My Shipping Address is different than my billing address'), ), array() ), //dependent element new JFormComponentAddress('shipping', 'Shipping Address:', array( 'dependencyOptions' => array( 'dependentOn' => 'billing_shipping', 'display' => 'hide', 'jsFunction' => '$("#billing_shipping-choice1").is(":checked");' ), 'validationOptions' => array('required'), ) ), |
Optionale Felder hinzufügen (ein- bzw. ausblenden) – instanceOptions
Wenn man den Benutzer die Möglichkeit bieten will, optional mehrere Felder zu einer bestimmten Bedeutung zur Verfügung zu stellen, wie z.B. Eingabe mehrerer E-Mail Adressen, so hat auch hier jFormer ein nette Gimmick parat -> instanceOptions heißt der Zauberschlüssel!
new JFormComponentSingleLineText('email', 'E-Mail Adresse:', array( 'validationOptions' => array('required', 'email'), 'instanceOptions' => array( 'max' => 3, 'addButtonText' => 'weitere E-Mail Adresse', 'removeButtonText' => 'E-Mail Adresse entfernen', ) ) ), |
Ich wünsche euch viel Spaß bei der coderfreundlichen Formularerstellung!
Hi, ich bin Matthias,
eingefleischter ITholiker und Mitgründer der ITholics GmbH.