Mit dem $wsForm Modul können Sie Formulardaten dynamisch im Frontend verwenden, Formularfelder laden und abgesendete Formulardaten lesen.Es werden die verfügbaren Variablen und Tags beschrieben, mit denen Sie die Formulare dynamisch im Frontend anzeigen können.

Inhaltsverzeichnis

1 Modulübersicht
2 Templates
3 Variablen
- 3.1 $wsForm.inquiryId
4 Methoden
- 4.1 $wsForm.loadType()
  - 4.1.1 Variablen der Feld-Objekte
- 4.2 $wsForm.loadAllTypes()
- 4.3 $wsForm.load()
  - 4.3.1 Variablen der Inquiry-Daten
  - 4.3.2 $myInquiry.id
  - 4.3.3 $myInquiry.formId
  - 4.3.4 $myInquiry.createdAt
  - 4.3.5 $myInquiry.submitter
    - 4.3.5.1 $myInquiry.submitter.email
    - 4.3.5.2 $myInquiry.submitter.sessionId
    - 4.3.5.3 $myInquiry.submitter.ipAddress
  - 4.3.6 $myInquiry.form
    - 4.3.6.1 $myInquiry.form.<fieldName>.label
    - 4.3.6.2 $myInquiry.form.<fieldName>.value
5 Aktionen
6 Beispiel für die Anzeige von Formularfelder
- 6.1 Funktion - loadType
- 6.2 Funktion - load
- 6.3 Beispiel: Daten im Frontend anzeigen
7 Weiterführende Links

Modulübersicht

Beispiel / schnitt über $wsForm

{{= $wsForm | json }}

JSON-gabe

{
  "inquiryId": "...",
  "load": "ƒ()",
  "loadAllTypes": "ƒ()",
  "loadType": "ƒ()"
}

Anmerkung: ƒ() kennzeichnet eine Funktion.

Variablen in der Übersicht

Name	Rückgabe-Typ	Beschreibung

Name	Rückgabe-Typ	Beschreibung
`inquiryId`	string	Enthält die ID nach dem Abschicken eines Formulars.
`loadType()`	map	Lädt die Struktur eines Formulars anhand des Formularnamens.
`loadAllTypes()`	array	Lädt alle verfügbaren Formulartypen des Shops.
`load()`	map	Lädt die übermittelten Daten eines abgeschickten Formulars.

Templates

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

Kontaktformular
Widerrufsformular
Frage zum Produkt
Passwort aussetzen

Variablen

$wsForm.inquiryId

Enthält die eindeutige ID einer Formularanfrage nach dem erfolgreichen Absenden. Mit dieser ID können die Formulardaten über load() abgerufen werden.

Anfrage-ID: {{= $wsForm.inquiryId }}

Methoden

$wsForm.loadType()

Lädt die Struktur eines Formulars (Felder, Labels, Validierungen) anhand der Formular-ID.

Signatur
$wsForm.loadType(inquiryId)

Rückgabe
map - Map mit den Formular-Eigenschaften und Feldern.

Parameter

Name	Typ	Pflicht	Beschreibung

Name	Typ	Pflicht	Beschreibung
`inquiryId`	string	ja	ID des Formulars (z.B. “`contact`”).

Beispiel, das alle Eigenschaften jedes Formularfeldes ausgibt:

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

Variablen der Feld-Objekte

Die Methode $wsForm.loadtype() gibt pro Feld (in diesem Beispiel $myField) ein Objekt mit folgenden Eigenschaften zurück. Ist dem Formular ein RuleSet (inquiry - Formulare | 4. inquiry.ruleSet Regelbasierte Feldsteuerung ) zugewiesen, werden die Attribute required und label automatisch durch die dort definierten Regeln angepasst.

Variable	Rückgabe-Typ	Beschreibung

Variable	Rückgabe-Typ	Beschreibung
`$myField.name`	string	Technischer Feldname.
`$myField.label`	string	Anzeigename des Feldes. Wird automatisch durch `customLabelDefinition` im RuleSet aktualisiert, sofern ein RuleSet verknüpft ist.
`$myField.required`	bool	Pflichtfeldkennzeichen (`true` / `false`). Wird automatisch durch `requiredDefinition` im RuleSet aktualisiert.
`$myField.validations`	array	Liste der Validierungsregeln für das Feld.
`$myField.defaultValue`	string	Standardwert des Feldes (gesetzt durch `defaultValuesDefinition` im RuleSet). Kann im Template verwendet werden, um den Feldwert vorzublegen, wenn dieser leer ist.
`$myField.value`	string	Aktueller Wert des Feldes. Wird bei der Aktion `inquiryCheck` befüllt (siehe actions - Formulare \| 2. actions.inquiryCheck Formular prüfen).
`$myField.visible`	bool	Gibt an, ob das Feld angezeigt werden soll (`true` / `false`). Wird automatisch durch `inputVisibilityDefinition` im RuleSet gesteuert.

$wsForm.loadAllTypes()

Lädt alle verfügbaren Formulartypen des Shops

Signatur
$wsForm.loadAllTypes()

Rückgabe
array - Liste aller verfügbaren Formulartypen.

Beispiel, das alle verfügbaren Formulartypen durchläuft.

{{ foreach $formType in $wsForm.loadAllTypes() }}
  Formular: {{= $formType.name }}
{{ /foreach }}

$wsForm.load()

Lädt die übermittelten Daten eines abgeschickten Formulars.

Signatur
$wsForm.load(inquiryId)

Rückgabe
map - Map mit den Anfragedaten.

Parameter

Name	Typ	Pflicht	Beschreibung

Name	Typ	Pflicht	Beschreibung
`inquiryId`	string	ja	ID des abgeschickten Formulars.

Beispiel, das prüft, ob das Formular erfolgreich abgesendet wurde und die Daten lädt.

{{ var $myAction = $wsActions.create('InquirySend') }}
{{ if $myAction.success }}
    {{ var $myInquiry = $wsForm.load($myAction.successInfo.inquiryId) }}
{{ /if }}

Vorgehen:

Action “InquirySend" erstellen
Prüfen, ob das Absenden erfolgreich war
Formulardaten über die Inquiry-ID laden

Die folgenden Variablen sind verfügbar, nachdem die Inquiry-Daten mit load()geladen wurden:

Variable	Rückgabe-Typ	Beschreibung

Variable	Rückgabe-Typ	Beschreibung
`id`	string	Eindeutige ID der Formularanfrage.
`formId`	string	ID des Formulars, das benutzt wurde.
`createdAt`	string	Zeitpunkt des Abschickens.
`submitter`	map	Daten des Absenders.
`email`	string	E-Mail-Adresse des Absenders.
`sessionId`	string	Session-ID, während der das Formular abgeschickt wurde.
`ipAddress`	string	IP-Adresse des Absenders.
`form`	map	Daten des Formulars, die der Kunde im Shop eingegeben hat.
`<fieldName>.label`	string	Sprechender Name des Feldes.
`<fieldName>.value`	string	Eingetragener Wert des Feldes.

Variablen der Inquiry-Daten

$myInquiry.id

Gibt die eindeutige ID der Formularanfrage aus.

ID der Formularanfrage: {{= $myInquiry.id }}

$myInquiry.formId

Gibt die ID des Formulars aus, das benutzt wurde.

Formular-ID: {{= $myInquiry.formId }}

$myInquiry.createdAt

Gibt den Zeitpunkt des Abschickens aus.

Formular versendet: {{= $myInquiry.createdAt }}

$myInquiry.submitter

Gibt eine Map mit Daten über den Absender aus.

$myInquiry.submitter.email

Gibt die E-Mail-Adresse des Absenders aus.

E-Mail-Adresse: {{= $myInquiry.submitter.email }}

$myInquiry.submitter.sessionId

Gibt die Session-ID aus, während der das Formular abgeschickt wurde.

Session-ID: {{= $myInquiry.submitter.sessionId }}

$myInquiry.submitter.ipAddress

Gibt die IP-Adresse des Absenders aus.

IP-Adresse: {{= $myInquiry.submitter.ipAddress }}

$myInquiry.form

Gibt die Daten der Formularanfrage, die der Kunde im Shop eingegeben hat, als Map aus.

$myInquiry.form.<fieldName>.label

Gibt den sprechenden Namen des Feldes aus.

Vorname-Label: {{= $myInquiry.form.firstName.label }}

$myInquiry.form.<fieldName>.value

Gibt den eingetragenen Wert des Feldes aus.

Vorname-Wert: {{= $myInquiry.form.firstName.value }}

Aktionen

Aktionen zu diesem Modul, die Änderungen auslösen, sind separat im Kapitel “Aktionen” dokumentiert: Inquiry

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 gelesen werden.

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

Die gabe könnte dann wie folgt sehen:

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

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 (kommentiert, damit die gabe nicht direkt im Frontend angezeigt wird):

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

Die gabe in der Developer-Konsole des Browsers könnte dann wie folgt sehen:

{
  "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 }}

Weitere Beispiele für das Anzeigen und Laden von Formulardaten finden Sie hier:
→ Praxisbeispiele Formulare

$wsForm