Widget-Plugin: Google reCaptcha


Das Symbol für Widgets vom Typ Google reCaptcha im Xima® Formcycle-Designer.

7.0.13+ Dieses Plugin kann nur mit Xima® Formcycle Version 7.0.12 oder höher verwendet werden.

Plugin-Download (erfordert Anmeldung)

Funktionsbeschreibung

Beispiel für ein eingefügtes Google reCaptcha Widget in einem Formular.

Das Plugin stellt ein neues Widget im Designer zur Verfügung, welches es erlaubt, ein Google reCaptcha im Formular einzufügen, dass der Nutzer vor dem Absenden des Formulars richtig ausfüllen muss. Das Google reCaptcha Widget kann in beliebiger Anzahl an einer beliebigen Positionen im Formular platziert werden.

Installation

Das Plugin kann als Mandant-Plugin oder System-Plugin installiert werden. Eine Anleitung zur Installation von Plugins finden Sie hier.

Konfiguration

An Widgets dieses Typs können die folgenden Eigenschaften konfiguriert werden:

Grundeigenschaften

Basiseinstellungen für Grundeigenschaften

Die Grundeigenschaften Name, Breite und Versteckt stehen jedem Formularelement zur Verfügung.

In diesem Dialogfenster lassen sich grundlegende Eigenschaften wie Name oder Breite einstellen.

Elemente können wiederholt werden, sodass der Nutzer eine beliebige Anzahl an Daten anlegen kann.

Durch Auswahl eines Triggers für die Anzahl an Wiederholungen kann diese automatisch gesetzt werden. In diesem Beispiel wird das Fieldset für die Daten zum Kind wiederholt. Abhängig der gewählten Kinderzahl ist so immer die richtige Menge an Fieldsets sichtbar.
NameBeschreibung
ElementElementtyp des Formularelements. Der Elementtyp kann durch Auswahl eines anderen Elementtyps aus dem Dropdown-Menü geändert werden. Die Elementtypen, in die ein Element umgewandelt werden kann, hängen dabei vom ursprünglichen Typ ab. Container und Fieldsets können nur in den jeweils anderen Elementtyp transformiert werden. Alle anderen Elementtypen können in jeden anderen Typ transformiert werden, außer in Container und Fieldsets.
NameName des Elements. Es sind nur Buchstaben und Zahlen erlaubt. Um den Namen zu ändern und gleichzeitig die Referenzen auf dieses Formularelement zu aktualisieren sollte die Funktion zum Umbenennen von Formularelementen   verwendet werden.
AliasEin alternativer Name für das Formularelement, der alle Zeichen enthalten darf.
BreiteRelative Breite des Elements zu anderen Elementen in einer Formularzeile. Sind etwa drei Elemente nebeneinander platziert und haben für die Breite die Werte 10, 10 und 30 so nehmen sie in dieser Reihenfolge 20%, 20% und 60% der gesamten Breite der Formularzeile ein.
VerstecktIst hier ein Häkchen gesetzt, so wird das Element versteckt. Um es wieder anzuzeigen, kann die Eigenschaft sichtbar wenn oder eine entsprechende JavaScript-Funktion wie jQuery.fn.visible verwendet werden.
GesperrtDer Inhalt des Formularelementes kann nicht editiert werden. Der Inhalt wird auch beim Absenden nicht übertragen. Für Textfelder kann zudem ausgewählt werden, ob der Inhalt beim Absenden übertragen wird oder nicht.
WiederholenIst diese Option aktiviert, so kann der Nutzer eine beliebige Anzahl an Wiederholunge (Kopien) von diesem Formularelement erstellen. Damit ist es etwa möglich, eine oder mehrere E-Mail-Adressen anzugeben. Es ist nicht möglich, wiederholte Elemente zu verschachteln: Ist ein Fieldset oder Container wiederholt, so kann kein Element darin mehr wiederholt werden.
Min. wdh.Mindestzahl an Wiederholungen, die vorhanden sein müssen. Eine wiederholtes Formularelement ist nicht löschbar, wenn dadurch diese Mindestzahl unterschritten werden würde. Die hier eingestellte Anzahl ist zudem auch anfangs sichtbare Anzahl an Wiederholungen (beim Aufrufs des Formulars).
Max. wdh.Höchstzahl an Wiederholungen, die erlaubt ist. Es kann keine weitere Kopie von einem Formularelement erzeugt werden, wenn dadurch diese Höchstzahl überschritten werden würde.
Element wdh.Falls hier ein Element ausgewählt ist, bestimmt der Wert des ausgewählten Elements (Trigger-Element) die Anzahl an Wiederholungen. Beispiel: Es wird ein Auswahlelement oder Eingabefeld für die Anzahl der Kinder angelegt. Ein Fieldset, wo die Daten zu einem Kind eingegeben werden, wird wiederholt. Die Anzahl der Wiederholungen wird aus dem Auswahlelement bzw. Eingabefeld genommen. Damit ist immer für jedes Kind ein Fieldset vorhanden.
Knöpfe versteckenNur verfügbar, falls unter Element wdh. ein Element ausgewählt ist. Mit dieser Option können die Plus- und Minusknöpfe zum Hinzufügen und Entfernen von Elementwiederholungen ausgeblendet werden. Dies ist dann sinnvoll, wenn die Anzahl der Wiederholungen nur über das ausgewählte Trigger-Element festgelegt werden soll.

Alias

Jedes Formular sendet Daten nach dem Prinzip Elementname   Wert. Diese Elementnamen können über die Platzhalterersetzung in Aktionen und Templates verwendet werden. In einigen Fällen kann es vorkommen, dass diese Namen nicht für die Weiterverarbeitung verwendet werden können. Das kann z.B. auftreten, wenn für die Weiterverarbeitung spezielle Zeichen verwendet werden müssen, die im Formulardesigner nicht zulässig sind. Für diesen Fall besteht die Möglichkeit, einen Alias zu vergeben.

Wurde ein Alias vergeben, wird nun statt dem Namen des Formularelements der Alias für die Verarbeitung in den Aktionen und bei der Platzhalterersetzung verwendet.

Umbenennen von Formularelementen

Werden Formularelemente ganz einfach umbenannt, funktionieren möglicherweise Teile des JavaScript oder der Verarbeitung nicht mehr korrekt, da diese das Formularelement über dessen Namen referenzieren. Mit einem Klick auf das Stiftsymbol   neben dem Formularelementnamen kann das Formularelement umbenannt werden, wobei zugleich sämtliche Referenzen auf das Formularelement aktualisiert werden. Es kann ausgewählt werden, an welchen Stellen nach Referenzen auf das Formularelement gesucht werden soll:

  • im JavaScript-Bereich des Formulars
  • im CSS-Bereich des Formulars
  • in JavaScript-Formulardateien
  • in CSS-Formulardateien
  • in der Verarbeitung des Formulars
  • bei Elementen auf die Eigenschaft "Wert"
  • bei Elementen auf die Eigenschaft "Schaltflächen"
  • bei Elementen auf die Eigenschaft "Optionen"

Wird eine Referenz in den ausgewählten Bereichen gefunden, wird diese mit dem neuen Namen aktualisiert.

Im JavaScript-Bereich ist darauf zu achten, dass nur übliche Arten behandelt werden, auf ein Formularelement zu referenzieren. In Selektoren wie $('[name="tfEmail"]') wird der Name entsprechend angepasst. Unübliche Selektoren wie document.getElementByName("tfEmail") werden nicht angepasst. Weiterhin ist es prinzipiell unmöglich, alle in einer Programmiersprache möglichen Referenzen anzupassen, beispielsweise wenn der Name aus Variablen, Berechnungen oder externen Datenquellen bezogen wird: ["EMail", "Vorname", "Nachname"].forEach(name => $(`[name="tf${name}"]`).clear()) Daher sollte bei Formular mit komplexen JavaScript immer manuell geprüft werden, welche Auswirkungen eine Umbennenung eines Formularelements hat.

Dieses Element hat keine zusätzlichen Einstellungen im Bereich Grundeigenschaften.

Darstellung

Basiseinstellungen für Darstellung

Die in diesem Bereich vorhandenen Eigenschaften dienen dazu, die Sichtbarkeit des Formularelements zu konfigurieren. Die Grundeigenschaft Versteckt steht dabei jedem Formularelement zur Verfügung. Die Eigenschaften Gesperrt und Wiederholen sowie die davon abhängigen Eigenschaften sind nur bei Elemententypen verfügbar, bei denen dies sinnvoll ist.

In diesem Dialogfenster lassen sich grundlegende Eigenschaften wie Sichtbarkeit, Sperrstatus und Wiederholbarkeit einstellen.

Elemente können wiederholt werden, sodass der Nutzer eine beliebige Anzahl an Daten anlegen kann.

Durch Auswahl eines Triggers für die Anzahl an Wiederholungen kann diese automatisch gesetzt werden. In diesem Beispiel wird das Fieldset für die Daten zum Kind wiederholt. Abhängig der gewählten Kinderzahl ist so immer die richtige Menge an Fieldsets sichtbar.
NameBeschreibung
VerstecktIst hier ein Häkchen gesetzt, so wird das Element versteckt. Um es wieder anzuzeigen, kann die Eigenschaft sichtbar wenn oder eine entsprechende JavaScript-Funktion wie jQuery.fn.visible verwendet werden.
GesperrtDer Inhalt des Formularelementes kann nicht editiert werden. Der Inhalt wird auch beim Absenden nicht übertragen. Für Textfelder kann zudem ausgewählt werden, ob der Inhalt beim Absenden übertragen wird oder nicht.
WiederholenIst diese Option aktiviert, so kann der Nutzer eine beliebige Anzahl an Wiederholungen (Kopien) von diesem Formularelement erstellen. Damit ist es etwa möglich, eine oder mehrere E-Mail-Adressen anzugeben. Es ist nicht möglich, wiederholte Elemente zu verschachteln: Ist ein Fieldset oder Container wiederholt, so kann kein Element darin mehr wiederholt werden.
Min. wdh.Mindestzahl an Wiederholungen, die vorhanden sein müssen. Eine wiederholtes Formularelement ist nicht löschbar, wenn dadurch diese Mindestzahl unterschritten werden würde. Die hier eingestellte Anzahl ist zudem auch anfangs sichtbare Anzahl an Wiederholungen (beim Aufrufs des Formulars).
Max. wdh.Höchstzahl an Wiederholungen, die erlaubt ist. Es kann keine weitere Kopie von einem Formularelement erzeugt werden, wenn dadurch diese Höchstzahl überschritten werden würde.
Element wdh.Falls hier ein Element ausgewählt ist, bestimmt der Wert des ausgewählten Elements (Trigger-Element) die Anzahl an Wiederholungen. Beispiel: Es wird ein Auswahlelement oder Eingabefeld für die Anzahl der Kinder angelegt. Ein Fieldset, wo die Daten zu einem Kind eingegeben werden, wird wiederholt. Die Anzahl der Wiederholungen wird aus dem Auswahlelement bzw. Eingabefeld genommen. Damit ist immer für jedes Kind ein Fieldset vorhanden.
Knöpfe versteckenNur verfügbar, falls unter Element wdh. ein Element ausgewählt ist. Mit dieser Option können die Plus- und Minusknöpfe zum Hinzufügen und Entfernen von Elementwiederholungen ausgeblendet werden. Dies ist dann sinnvoll, wenn die Anzahl der Wiederholungen nur über das ausgewählte Trigger-Element festgelegt werden soll.

Dieses Element hat keine zusätzlichen Einstellungen im Bereich Darstellung.

Label

Basiseinstellungen für Label

Über diese Eigenschaft wird das Label eines Elements definiert. Ein Label ist der Text vor, hinter, über oder unter dem Element. Nicht jedes Element besitzt diese Eigenschaft.

Bei dem Label kann der Text verändert werden, der an einem Formularfeld erläuternd angezeigt wird.
NameBeschreibung
WertWert des Label. Dieser Text wird dann am Element angezeigt.
Ausrichtung Gibt die Position (link, rechts, oben, unten) des Labels an.
Breite (in px)Dies ist der Abstand zwischen Labeltext und Element und ist nur für die Ausrichtung "links" relevant.
PlatzhalterPlatzhaltertext für Eingabefelder. Dieser Text verschwindet wenn ein Wert in das Feld eingegeben wird.
Titel Wird beim überfahren des Elements mit der Maus als Tooltip angezeigt (HTML Attribut "title").
EinheitText der hinter einem Element angezeigt wird. Normalerweise wird dies für Einheiten (z.B. EURO) verwendet.
Breite (in px)Abstand (rechts) der Einheit vom Element

Dieses Element hat keine zusätzlichen Einstellungen im Bereich Label.

Bedingungen

Basiseinstellungen für Bedingungen

Über die Bedingungen werden Validierungen und Sichtbarkeiten für die Formularelemente festgelegt. Einige Bedingungen sind nur für manche Formularelemente verfügbar, diese sind auch noch einmal in der Hilfe zu den einzelnen Elementen beschrieben.

Steuerbare Eigenschaften

In den Bedingungen können Elemente etwa versteckt oder als Mussfelder geschaltet werden, wenn bestimmte Bedingungen erfüllt sind. Zudem kann über den Elementwähler ein Formularelement direkt mit der Maus ausgewählt werden.
NameBeschreibung
Versteckt wennWenn die Bedingung erfüllt ist, wird das Formularelement versteckt.
Sichtbar wennWenn die Bedingung erfüllt ist, wird das Formularelement angezeigt. Diese Option erscheint, wenn das Formularfeld auf versteckt geschalten wurde.
Gesperrt wennWenn die Bedingung erfüllt ist, wird das Formularelement nicht-editierbar geschaltet.
Editierbar wennWenn die Bedingung erfüllt ist, wird das Formularelement wieder editierbar geschaltet. Diese Option erscheint, wenn das Formularfeld auf gesperrt geschalten wurde.
MussfeldIst diese Option aktiviert, muss das Formularfeld zwingend ausgefüllt werden. Wenn diese Option aktiviert ist, werden unter Mussfeld wenn konfigurierte Bedingung ignoriert.
Mussfeld wennWenn die Bedingung erfüllt ist, wird das Formularelement zu einem Mussfeld.
MussfeldgruppeNur verfügbar, wenn Mussfeld ausgewählt ist. Legt die Mussfeldgruppe fest, zu der das Element gehören soll. Wenn zwei oder mehr Elemente zu einer Mussfeldgruppe gehören, muss mindestens eines davon einen Wert haben, alle anderen müssen aber nicht ausgefüllt werden.
Prüfe serverseitigWenn diese Option aktiviert ist, werden die abgesendeten Daten auch auf dem Server geprüft. Die Daten werden im Browser geprüft, dennoch ist es technisch möglich, ungültige Formulare abzusenden. Schlägt die serverseitige Validierung fehl, erscheint im Formular die entsprechende Fehlermeldung.
 
7.2.0+  Bei der Verwendung einer benutzerdefinierten Formel als Bedingung ist diese Option funktionslos. Es kann in diesem Fall keine serverseitige Validierung durchgeführt werden.

Bedingungen

Bei Bedingungen, die auf den Wert eines Auswahlelements zugreifen, wird der Wert genommen, wie er in der Spalte Werte eingetragen ist.

Bei allen Eigenschaften kann für die Bedingung ein Formularelement ausgewählt werden, welches dann geprüft wird. In der Auswahlliste stehen alle Elemente Namen zur Verfügung.

7.2.0+  Neben existierenden Formularelementen kann auch Formel ausgewählt werden. Es kann dann eine benutzerdefinierte Formel eingegeben werden, um beliebige Logik zu implementieren. Folgendes ist dabei zu beachten:

  • Es muss sich um einen gültigen JavaScript-Ausdruck (expression) handeln, etwa $("[name='tfVorname']").val() === "Max".
    • JavaScript-Anweisungen (statements) sind nicht möglich, beispielsweise darf var x = $("[name='tfVorname']").val() ; x === "Max" nicht verwendet werden.
    • Falls doch einmal erforderlich, sind Anweisungen durch Kapselung in einer IIFE (immediately invoked function expression) möglich: (function(){var x = $("[name='tfVorname']").val() ; return x === "Max"})()
  • Formular-Platzhalter können verwendet werden, um einfacher auf den Wert von Formularelementen zuzugreifen. Der Platzhalter wird durch den Wert des jeweiligen Formularelements ersetzt. Beispiel: [%tfVorname%]==="Max"
    • Repräsentiert der Wert eines Formularelements eine Gleitkommazahl, wird der Platzhalter durch eine JavaScript-Zahl ersetzt. Beispiel: [%tf1%]+[%tf2%] < 10 (Summe beider Felder < 10). Andernfalls wird der Wert durch einen JavaScript-String ersetzt. Beispiel: [%tf1%].toUpperCase() === "MAX" (Feldwert gleich "Max", ohne Berücksichtigung von Groß- und Kleinschreibung).
    • Der Wert, durch den der Platzhalter ersetzt wird, hängt von der Art des Elements ab:
      • Bei Checkboxen wird der Wert genommen, welcher im Formulardesigner unter Wert bei angehakt hinterlegt ist.
      • Bei Eingabefeldern und Textarea wird der vom Nutzer eingegebene Text als Wert genommen.
      • Bei Auswahlelementen mit Darstellung Combobox wird der technische Wert der ausgewählten Option als Wert genommen.
      • Bei Auswahlelementen mit Darstellung Checkbox und Radio-Button wird die Summe aller technischen Werte der ausgewählten Optionen als Wert genommen. Dies gilt auch für die Darstellung als Frage.
      • Bei Upload-Elementen wird der Dateiname der ausgewählten Datei als Wert genommen.
      • Bei Terminwähler wird das angezeigte Datum mit Uhrzeit als Wert genommen.
  • Andere Platzhalter wie System-Platzhalter können ebenfalls verwendet werden: [%$PROJECT_TITLE%] === "Mein Formular".
  • Es wird KEINE serverseitige Validierung von Formeln durchgeführt, auch wenn diese Option aktiviert ist.

Nach der Auswahl eines Elements öffnet sich eine weitere Auswahlliste mit folgenden Optionen:

  • einen Wert hat
  • keinen Wert hat
  • gleich
  • ungleich
  • kleiner
  • kleiner gleich
  • größer
  • größer gleich
  • zwischen
  • regulärer Ausdruck

Durch Klick auf das Auswahlsymbol rechts neben der Auswahlleiste kann mit der Maus direkt ein Formularelement ausgewählt werden. Bei großen Formularen kann die Auswahlliste sehr lang werden und man findet das gesuchte Elemente nur langsam.

Wird der Wert eines Auswahlelements (Checkbox, Radiobutton oder Liste) geprüft, wird von der ausgewählten Option der Wert für die Prüfung verwendet, der am Formularelement in den Eigenschaften unter Werte in der Spalte Wert eingestellt ist. 

BedingungBeschreibung
einen Wert hat / keinen Wert hat 

Das Element wird versteckt, wenn das ausgewählte Element einen (keinen) Wert hat.

Einen Wert haben bedeutet dabei folgendes.

  • Bei einer Checkbox wird das Element versteckt, wenn sie aktiviert wurde.
  • Bei einem Auswahlelement wird das Element versteckt, wenn ein anderer Wert als Bitte auswählen gewählt wurde. Ist eine als Drop-Down-Auswahlliste dargestellte Auswahl kein Mussfeld, ist standardmäßig immer die erste Option ausgewählt. Handelt es sich bei der Drop-Down-Auswahlliste um ein Mussfeld, ist standardmäßig keine Option ausgewählt und es erscheint der Text Bitte auswählen.
  • Bei einem Textfeld wird das Element versteckt, wenn das Eingabefeld nicht leer ist.
gleichEs erscheint ein weiteres Eingabefeld zur Eingabe des zu prüfenden Wertes. Das Element wird nur versteckt, wenn der Wert des ausgewählten Elements den gleichen Wert hat.
ungleichEs erscheint ein weiteres Eingabefeld zur Eingabe des zu prüfenden Wertes. Das Element wird nur versteckt, wenn der Wert des ausgewählten Elements nicht den gleichen Wert hat.
kleiner / kleiner gleichEs erscheint ein weiteres Eingabefeld zur Eingabe des zu prüfenden Wertes. Das Element wird nur versteckt, wenn der Wert des ausgewählten Elements kleiner bzw. kleiner gleich dem eingegebenen Wert ist.
größer / größer gleichEs erscheint ein weiteres Eingabefeld zur Eingabe des zu prüfenden Wertes. Das Element wird nur versteckt, wenn der Wert des ausgewählten Elements größer bzw. größer gleich dem eingegebenen Wert ist.
zwischenEs erscheint ein weiteres Eingabefeld zur Eingabe des zu prüfenden Wertes. Das Element wird nur versteckt, wenn der Wert des ausgewählten Elements zwischen dem eingegebenen Wert ist. Das Interval wird als zwei mit einem Strich (-) getrennte Zahlen eingegeben, z.B. 2-10. Negative Zahlen müssen in Klammern gesetzt werden, z.B. (-10)-(-5).
RegExpEs erscheint ein weiteres Eingabefeld zur Eingabe des regulären Ausdruck. Das Element wird nur versteckt, wenn der Wert des ausgewählten Elements auf den regulären Ausdruck passt.

Automatisch leeren oder zurücksetzen

Bei den Eigenschaften Versteckt wenn und Gesperrt wenn kann zusätzlich noch ausgewählt werden, ob das Formularelement geleert oder zurückgesetzt (reset) werden soll, wenn es durch die Bedingung versteckt beziehungsweise gesperrt wird. Leeren bezieht sich dabei auf das Löschen des Werts. Beim Zurücksetzen wird der Wert des Formularelements auf den ursprünglichen Wert zurückgesetzt, den es beim Öffnen des Formulars hatte. Wird das Formular neu geöffnet, ist das der Wert, wie er im Xima® Formcycle-Designer eingestellt ist. Wird ein abgesendetes Formular im Posteingang geöffnet, ist der Initialwert der zuletzt abgesendete Wert.

Dies kann zum Beispiel für die Eingabe einer Adresse verwendet werden, wo zwischen einer Adresse und einem Postfach ausgewählt werden kann. Ist Postfach ausgewählt, dann ist das Eingabefeld für die Adresse nicht sichtbar und wird geleert. Beim Absenden des Formulars werden so nur die Postfachdaten und nicht die Adressdaten mitgesendet.

Beim Leeren oder Zurücksetzen von Formularelementen, die andere Formularelemente enthalten, werden alle Unterelemente geleert oder zurückgesetzt. Dies betrifft die Elemente Seite, Container, und Fieldset.

Dieses Element hat keine zusätzlichen Einstellungen im Bereich Bedingungen.

Hilfe

Basiseinstellungen für Hilfe

Hier kann der Hilfetext geändert werden, der als Tooltip am Formularfeld erscheint.

Der Hilfetext wird angezeigt, wenn die Maus sich über dem   Icon Bereich befindet.

Diese Eigenschaft ermöglicht es, einen Hilfetextes zu einem Formularelement hinzuzufügen. Der Hilfetext erscheint, wenn mit der Maus über das Hilfe-Icons   gefahren wird. Wenn unter Hilfe ein Text eingetragen ist, wird das Hilfe-Icon neben dem Element angezeigt. Wird Hilfetext wieder gelöscht, wird auch das Hilfe-Icon an dem Element wieder entfernt.

Um das Design des Hilfesymbols oder der Overlay-Blase zu ändern, erstellen Sie Ihr eigenes CSS.

Dieses Element hat keine zusätzlichen Einstellungen im Bereich Hilfe.

Optionen

Konfiguration der reCaptcha Schlüssel über den Designer

Die erzeugten Schlüssel des reCaptcha von Google

Im Bereich Optionen muss zur korrekten Nutzung des Google reCaptcha Widget, der Website-Schlüssel und der Geheimschlüssel  konfiguriert werden.
Dafür gibt es folgende Vorraussetzungen:

  • registierter Google-Account (Anmeldung)
  • Erstellung des reCaptcha über Google (siehe)
  • Beim erstellten Google-reCaptcha unter Einstellungen gehen und die erzeugten Schlüssel kopieren
  • Einfügen der erstellten Schlüssel in die Konfigurationsfelder des Designers

Versionshistorie

2.0.3

  • Fix: Captcha wird nicht mehr validiert, wenn der Typ der Übermittlungsschaltfläche keine Validierung erfordert
  • Erfordert Xima® Formcycle Version 7.0.11 oder höher

2.0.2

  • Feature: Neues Attribut data-name für die versteckte Textarea
  • Feature: Widget in Bedingungseigenschaften im Formulardesigner verwendbar

2.0.1

  • Fix: Anpassung an der Validierung
  • Feature: Hinzufügen des Attributs validate-blur

2.0.0

  • Feature: Apassungen für Xima® Formcycle Version 7.