In diesem Abschnitt finden Sie alle Möglichkeiten, um auf die Daten von Formularen zuzugreifen. Es werden die verfügbaren Variablen und Tags beschrieben, mit denen Sie die Formulare dynamisch im Frontend anzeigen können.

Inhaltsübersicht

1 Templates
2 Datenübersicht
3 Beispiel für die Anzeige von Formularfelder
- 3.1 Funktion - loadType
- 3.2 Funktion - load
- 3.3 Beispiel: Daten im Frontend anzeigen
4 Referenz
5 Praxisbeispiele

Templates

Formulare werden überall im Shop und auf allen Templates verwendet. Diese Formulare sind beispielsweise:

Kontaktformular
Widerrufsformular
Frage zum Produkt
Passwort zurücksetzen

Datenübersicht

Um die verfügbaren Formdaten einzusehen, können Sie sich diese in einem JSON-ähnlichen Format ausgeben lassen. Dies ist hilfreich, um die Struktur und Inhalte der Formdaten zu verstehen oder auch Fehler zu debuggen.

Dies erfolgt folgendermaßen (auskommentiert, damit die Ausgabe nicht direkt im Frontend angezeigt wird):

<!--
    {{= $wsForm | json }}
-->

Die Ausgabe in der Developer-Konsole des Browsers könnte dann wie folgt aussehen:

{
    "inquiryId": "",
    "load": "(Function)",
    "loadType": "(Function)"
}

Beispiel für die Anzeige von Formularfelder

Funktion - loadType

Die Funktion $wsForm.loadType() nimmt den Namen des Formulars als Argument und wird verwendet um auf die Eigenschaften und Felder des Formulars zuzugreifen.

Die Felder und zugehörigen Eigenschaften des Kontaktformulars können dann folgendermaßen geladen und ausgelesen werden.

{{ foreach $field in $wsForm.loadType("contact").fields }}
   {{ foreach $key in sort(keys($field)) }}
      {{= $key }}: {{= $field[$key] }}<br>
   {{ /foreach }}
{{ /foreach }}

Die Ausgabe könnte dann wie folgt aussehen:

[
  {
    "label": "Vorname",
    "name": "firstName",
    "required": false,
    "validations": [
      { "type": "formCheck", "name": "minlen" },
      { "type": "formCheck", "name": "maxlen" }
    ]
  },
  {
    "label": "Nachname",
    "name": "lastName",
    "required": false,
    "validations": [
      { "type": "formCheck", "name": "minlen" },
      { "type": "formCheck", "name": "maxlen" }
    ]
  },
  {
    "label": "Betreff",
    "name": "subject",
    "required": true,
    "validations": [
      { "type": "formCheck", "name": "maxlen" }
    ]
  },
  {
    "label": "Kundennummer",
    "name": "customerNumber",
    "required": false,
    "validations": [
      { "type": "formCheck", "name": "maxlen" }
    ]
  },
  {
    "label": "Text",
    "name": "text",
    "required": true,
    "validations": [
      { "type": "formCheck", "name": "minlen" },
      { "type": "formCheck", "name": "maxlen" }
    ]
  }
]

Funktion - load

Die Funktion $wsForm.load() wird verwendet, um auf die übermittelten Daten eines abgeschickten Formulars zuzugreifen. Dies kann beispielsweise genutzt werden, um dem Nutzer die übermittelten Informationen im Frontend oder per E-Mail anzuzeigen.

In diesem Beispiel wird überprüft, ob das Formular erfolgreich abgesendet wurde und lädt die Daten des Inquirys. Dies erfolgt folgendermaßen (auskommentiert, damit die Ausgabe nicht direkt im Frontend angezeigt wird):

{{ var $action = $wsActions.create('InquirySend') }}

{{ if $action.success }}
    <!--
        {{=  $wsForm.load($action.successInfo.inquiryId)| json }}
    -->
{{ /if }}

Die Ausgabe in der Developer-Konsole des Browsers könnte dann wie folgt aussehen:

{
  "createdAt": "2025-04-14T06:43:57Z",
  "form": {
    "customerNumber": {
      "label": "Kundennummer",
      "value": "10011"
    },
    "firstName": {
      "label": "Vorname",
      "value": "VX"
    },
    "lastName": {
      "label": "Nachname",
      "value": "Käufer"
    },
    "subject": {
      "label": "Betreff",
      "value": "Test-Anfrage"
    },
    "text": {
      "label": "Text",
      "value": "Bitte um weitere Infos"
    }
  },
  "formId": "contact",
  "id": "52ad06427c68738c",
  "submitter": {
    "email": "vx-kauefer@beispiel.de",
    "ipAddress": "95.90.217.XXX",
    "sessionId": "c5a37018627bf18e2f0b151ee5fa19b77b1ed64794fa710b45e17613460ba60a"
  }
}

Beispiel: Daten im Frontend anzeigen

In diesem Beispiel werden die Daten eines abgesendeten Formulars mittels der Funktion $wsForm.load() geladen und angezeigt.

{{ var $action = $wsActions.create('InquirySend') }}

{{ if $action.success }}
   {{ var $inquiry = $wsForm.load($action.successInfo.inquiryId) }}
   Danke für Ihre Anfrage.
   Hier Ihre Daten:
   Ihre E-Mail Adresse:  {{= $inquiry.submitter.email }}
   Ihre IP Adresse:  {{= $inquiry.submitter.ipAddress }}
   Anfrage ID:  {{= $inquiry.id }}
   Anfragetyp: {{= $inquiry.formId }}
   Vorname:  {{= $inquiry.form.firstName.value }}
   Nachname:  {{= $inquiry.form.lastName.value }}
   Ihre Kundennummer:  {{= $inquiry.form.customerNumber.value }}
   Betreff:  {{= $inquiry.form.subject.value }}
   Ihre Nachricht:  {{= $inquiry.form.text.value }}
{{ /if }}

Referenz

In der Modul-Referenz für $wsForm finden Sie eine Übersicht aller verfügbaren Eigenschaften und Parameter.

Praxisbeispiele

Praxisbeispiele zu Umsetzungen von unterschiedlichen Formularen finden Sie hier:

→ Praxisbeispiele Formulare

$wsForm - Formulare