Berechneter Wert

Berechneter Wert ist ein Formularelement, das Ihnen ermöglicht, automatisch Werte zu generieren, die auf den Eingaben der Nutzerinnen und Nutzer basieren.

Ein Beispiel hierzu:

Ein Formular soll die Kosten für die Dachziegel einer Dacheindeckung berechnen.

Dabei stehen Dachziegel aus verschiedenen Materialien zur Auswahl, die sich im Preis unterscheiden. Der endgültige Preis hängt von der Größe der Dachfläche und dem gewählten Material ab.

Durch berechnete Werte wird zunächst die Dachfläche ermittelt. Nutzer:innen müssen dazu sowohl die Länge als auch die Breite des Dachs angeben. Diese Informationen werden genutzt, um die Dachfläche zu berechnen.

Im nächsten Schritt wählen die Nutzer:innen in einer Einfachauswahl das gewünschte Material aus. Hinter jeder Option ist der Preis pro Quadratmeter hinterlegt. Die Kombination der ersten berechneten Größe (Dachfläche) und der Materialwahl ergibt den zweiten berechneten Wert - den Preis für die Dachziegel.

Ändern Nutzer:innen die Größe der Dachfläche oder wählen ein anderes Material, werden die Werte sofort neu berechnet und der Preis wird entsprechend angepasst. Dies ermöglicht es den Nutzer:innen, verschiedene Szenarien zu durchspielen, wobei der aktualisierte Preis direkt angezeigt wird.

Berechneter Wert hinzufügen

Klicken Sie im Bereich Aufbau auf das grüne Hinzufügen-Symbol.
Gehen Sie zu Allgemein → Fortgeschritten und klicken Sie auf Berechneter Wert.
Im Formular-Baum können Sie das neu hinzugefügte Formularelement sehen.
Nehmen Sie rechts unter Berechneter Wert bearbeiten die gewünschten Einstellungen für das Formularelement vor.

Hinweis

Das neue Formularfeld wird direkt unter dem Formularelement eingefügt, das Sie im Bereich Aufbau ausgewählt haben. Wollen Sie die Postion des Formularfeldes ändern, dann verschieben Sie es per Drag-and-drop.

Eigenschaft Beschreibung
Beschriftung Geben Sie den Text für die Beschriftung ein, die beim Formularfeld angezeigt werden soll. Standardmäßig wird sie über dem Formularfeld angezeigt.
Technischer Name
Jedes Formularelement, das einem Formular hinzugefügt wird, bekommt von Formcentric automatisch eine eindeutige Bezeichnung, einen sogenannten technischen Namen. Dieser besteht aus der Nennung des Formularelements.

Alternativ können Sie den technischen Namen aus der Beschriftung generieren. Klicken Sie dazu auf Neu aus Beschriftung. Erfahren Sie mehr unter Technischer Name.

Eine gelbe Glocke als Icon.

Hinweis

Technischer Name ist ein Pflichtfeld. Der technische Name muss mit einem Buchstaben beginnen und darf keine Sonderzeichen enthalten. Innerhalb des Formulars darf ein technischer Name nur einmal verwendet werden.

JavaScript Geben Sie in die Klammer der JavaScript-Funktion calculate() die JavaScript-Logik für die Berechnung des Wertes ein. Jedes Mal, wenn Nutzer:innen die Seite im Formular wechseln oder auf den Absenden-Button klicken, wird die JavaScript-Funktion calculate() ausgeführt.
Anzeigevariante Hier können Sie eine CSS-Klasse aus der Website einfügen, in die Sie das Formular einbetten werden. Die CSS-Klasse wird dann auf dieses Formularelement angewandt.
Oder wählen Sie hier eine oder mehrere Anzeigevarianten, um sie auf das Formularelement anzuwenden.

Eine orangefarbene Glocke als Icon.

Hinweis

In der Anwendung können Sie keine eigenen Anzeigevarianten anlegen. Wenn Sie über den Standard hinaus weitere Anzeigevarianten benötigen, können diese implementiert werden. Anschließend können Sie die neuen Anzeigevarianten in der Anwendung auswählen.
Kontaktieren Sie bei Fragen den Support.

Wert im Formular anzeigen Aktivieren Sie Wert im Formular anzeigen, wird das Ergebnis der JavaScript-Logik, der berechnete Wert, im Formular angezeigt.
Wert direkt im Browser neu berechnen Aktivieren Sie Wert direkt im Browser neu berechnen, wird der Wert direkt berechnet, sobald Nutzer:innen alle für die Berechnung der JavaScript-Logik relevanten Eingaben in das Formular vorgenommen haben.

Aktivieren Sie dieses Feld nicht, wird der Wert erst berechnet, wenn Nutzer:innen im Formular zur nächsten Seite gehen oder es absenden.

Eine orangefarbene Glocke als Icon.

Hinweis

Aktivieren Sie Wert direkt im Browser neu berechnen, wenn Sie den Wert an eine Bedingung knüpfen. Nur so kann die Bedingung einwandfrei funktionieren.

Berechnete Werte zur Kostenkalkulation bei Dachziegeln nutzen

Kommen wir noch mal zurück auf das zu Beginn beschriebene Beispiel. Der Preis für Dachziegeln soll berechnet werden. Dieser hängt von der Größe der Dachfläche und dem ausgewählten Material ab. In unserem Beispiel handelt es sich um ein Pultdach und es werden ausschließlich die Dachflächenziegel berücksichtigt. Sonderziegel wie First- und Ortgangziegel fließen nicht in die Berechnung ein.

Im ersten Schritt soll die Dachfläche (Technischer Name: dachflache) berechnet werden. Dazu werden zwei Formularelemente benötigt, in die Nutzer:innen die Angaben zu Länge (Technischer Name: laenge) und Breite (Technischer Name: breite) machen. Hierfür eignet sich sowohl das Eingabefeld als auch das vordefinierte Formularelement Zahl.
Im zweiten Schritt wird das Formularelement Berechneter Wert hinzugefügt.
Mit folgender JavaScript-Logik wird die Dachflächengröße (dachflache) automatisch berechnet, sobald Nutzer:innen bei Länge und Breite ihre Eingaben vorgenommen haben:

function calculate() {if (laenge && breite) return parseInt(laenge) * parseInt(breite);else return ''}

Damit die Größe der Dachfläche immer direkt nach Eingabe von Länge und Höhe berechnet wird, ist Wert direkt im Browser neu berechnen aktiviert. Das Gleiche gilt für Wert im Formular anzeigen. Nur so bekommen Nutzer:innen direkt nach ihrer Eingabe die berechnete Größe der Dachfläche im Formular angezeigt.
Im nächsten Schritt wird eine Einfachauswahl (Technischer Name: material) benötigt. Die unterschiedlichen Preise sind bei den Optionen als Werte hinterlegt.
Folgende JavaScript-Logik gibt die Logik für den zweiten Wert, den Preis wieder:

function calculate() {if (!isEmptyList(material) && dachflache) return parseInt(dachflache) * parseInt(material[0]);else return ''}

Damit der Preis im Formular angezeigt wird und sich automatisch anpasst, sobald Nutzer:innen etwa ein anderes Material auswählen, sind Wert direkt im Browser neu berechnen und Wert im Formular anzeigen aktiviert.

Der Preis aktualisiert sich automatisch, sobald Nutzer:innen eine Angabe ändern oder ein anderes Material auswählen.
Es sind 2 Formulare mit unterschiedlichen Berechnungen zu sehen.

Eigenschaft	Beschreibung
Beschriftung	Geben Sie den Text für die Beschriftung ein, die beim Formularfeld angezeigt werden soll. Standardmäßig wird sie über dem Formularfeld angezeigt.
Technischer Name	Jedes Formularelement, das einem Formular hinzugefügt wird, bekommt von Formcentric automatisch eine eindeutige Bezeichnung, einen sogenannten technischen Namen. Dieser besteht aus der Nennung des Formularelements. Alternativ können Sie den technischen Namen aus der Beschriftung generieren. Klicken Sie dazu auf Neu aus Beschriftung. Erfahren Sie mehr unter Technischer Name. Hinweis Technischer Name ist ein Pflichtfeld. Der technische Name muss mit einem Buchstaben beginnen und darf keine Sonderzeichen enthalten. Innerhalb des Formulars darf ein technischer Name nur einmal verwendet werden.
JavaScript	Geben Sie in die Klammer der JavaScript-Funktion *calculate()* die JavaScript-Logik für die Berechnung des Wertes ein. Jedes Mal, wenn Nutzer:innen die Seite im Formular wechseln oder auf den Absenden-Button klicken, wird die JavaScript-Funktion *calculate()* ausgeführt.
Anzeigevariante	Hier können Sie eine CSS-Klasse aus der Website einfügen, in die Sie das Formular einbetten werden. Die CSS-Klasse wird dann auf dieses Formularelement angewandt. Oder wählen Sie hier eine oder mehrere Anzeigevarianten, um sie auf das Formularelement anzuwenden. Hinweis In der Anwendung können Sie keine eigenen Anzeigevarianten anlegen. Wenn Sie über den Standard hinaus weitere Anzeigevarianten benötigen, können diese implementiert werden. Anschließend können Sie die neuen Anzeigevarianten in der Anwendung auswählen. Kontaktieren Sie bei Fragen den Support.
Wert im Formular anzeigen	Aktivieren Sie Wert im Formular anzeigen, wird das Ergebnis der JavaScript-Logik, der berechnete Wert, im Formular angezeigt.
Wert direkt im Browser neu berechnen	Aktivieren Sie Wert direkt im Browser neu berechnen, wird der Wert direkt berechnet, sobald Nutzer:innen alle für die Berechnung der JavaScript-Logik relevanten Eingaben in das Formular vorgenommen haben. Aktivieren Sie dieses Feld nicht, wird der Wert erst berechnet, wenn Nutzer:innen im Formular zur nächsten Seite gehen oder es absenden. Hinweis Aktivieren Sie Wert direkt im Browser neu berechnen, wenn Sie den Wert an eine Bedingung knüpfen. Nur so kann die Bedingung einwandfrei funktionieren.