Die Adventszeit geht los und die Kollegen von djumla haben einen tollen Adventskalender veröffentlicht, wo es jeden Tag interessante Themen zu entdecken gibt.

Im Türchen #5 von heute, wird eine Formularerweiterung vorgestellt mit dem Titel

Flexforms - Eine Formularerweiterung von Entwicklern für Entwickler

Dank der flexiblen Gestaltung des Markups sind Entwicklern bei der Verwendung von Flexforms kaum bis keine Grenzen gesetzt. Diese Flexibilität macht Flexforms gegenüber anderen Formularerweiterungen sehr besonders. Die Formulare werden über JForm XML angelegt und können über Template Overrides individuell gestaltet werden. Was sind Template Overrides? Dies haben wir in unserem Newsbeitrag Letti on Tour - j!-over ein wenig erklärt und weiterführende Informationen veröffentlicht.

Wie fängst du an?

Flexforms installierst du genau so einfach wie die anderen Komponenten in Joomla! auch. Im Adminbereich wechselst du auf "Erweiterungen / Verwalten / Installieren" und wählst den Reiter "Paketdatei hochladen" aus. Hier wählst du die erforderliche Paketdatei aus, die du hier herunterladen kannst: Flexforms-Download.

Erledigt, was nun?

Nun fängst du an dein Formular zu erstellen. Wie eingangs erwähnt weden die Formulare iin Flexforms als JForm XML angelegt. Das benötigte Verzeichnis findest du unter folgendem Pfad

/media/com_flexforms/forms/DEINFORMNAME.xml

Hier kannst du einen beliebigen Namen vergeben, DEINFORMNAME dient nur als Beispiel. In dieser Datei fügst du deine gewünschten Felder ein. Ein einfaches Kontaktformular könnte so aussehen und eingebunden werden:

<form>
  <fieldset>
    <field name="title" type="list" required="true" size="1" label="Anrede">
      <option value="">- Bitte auswählen -</option>
      <option value="Frau">Frau</option>
      <option value="Herr">Herr</option>
    </field>
    <field name="firstname" type="text" required="true" label="Vorname" />
    <field name="lastname" type="text" required="true" label="Zuname" />
    <field name="message" type="textarea" cols="50" rows="5" label="Deine Nachricht" />
  </fieldset>
</form>

Somit ist das Grundgerüst für dein Formular erstellt. Was hast du nun gemacht?

  1. Formulardatei erstellt
  2. Formularfelder eingefügt:
    1. Anrede (Auswahlliste (Type="list"), Pflichtfeld (required="true")
    2. Vorname (Textfeld (Type="text"), Pflichtfeld (required="true")
    3. Nachname (Textfeld (Type="text"), Pflichtfeld (required="true")
    4. Deine Nachricht (Textbox (Type="textarea"), Pflichtfeld (required="true")

Nun kannst du die Ausgabe über die Template Overrides an deine Wünsche anpassen.

Noch mehr Flexibilität durch Template Overrides!

Nun bist du an den Punkt angelangt, wo Flexforms seine volle Stärke zeigt. Du hast nicht nur die Möglichkeit das Standardlayout der Komponente zu benutzen, sondern kannst dir für jedes Formular ein eigenes Layout anlegen. Dank der Template Overrides sind hier keine Grenzen mehr gesetzt.

Um die Template Overrides nutzen zu können, musst du eine Kopie der Standarddatei aus folgendem Verzeichnis erstellen:

/components/com_flexforms/views/form/tmpl/default.php

und diese im selben Verzeichnis wie deine XML-Datei und unter dem selben Namen ablegen. Deine Verzeichnisstruktur müsste nun so aussehen:

/media/com_flexforms/forms/livedesign24_wartungsvertraege.xml

/media/com_flexforms/forms/livedesign24_wartungsvertraege.php

Nun kannst du die .php-Datei nach deinen Belieben  und an deine Anforderungen anpassen. Damit du aber nicht alle Vorbereitungen umsonst gemacht hast, ist es wichtig, dass du in den Formulareinstellungen den Wert "Media Directory" als Layout-Option auswählst.

Zusätzlich hast du die Möglichkeit auch formularunabhängige Layouts zu hinterlegen. Diese Layouts legst du in deinem Template als Override im folgenden Pfad ab:

/html/com_flexforms/form

Die ausführliche Dokumentation findest du auf GitHub unter folgendem Link: Flexforms Dokumentation.

Du benötigst Hilfe bei der Umsetzung? Oder du möchtest uns direkt damit beauftragen? Dann nutze unseren Kontakt & Support Bereich.

Quelle: