Wir verwenden Cookies und Analysesoftware, um unsere Website möglichst benutzerfreundlich zu gestalten. Indem Sie fortfahren, stimmen Sie deren Verwendung zu.

DE EN

Anleitung: Online-Formular mit Pflichtfeldern, Hilfetexten und Fehlermeldungen erstellen

In diesem Tutorial erfahren Sie, wie einfach Sie Felder zu Pflichtfeldern machen, Hilfetexte setzen und mithilfe von Formularlogik festlegen, dass gewisse Auswahlmöglichkeiten nur zulässig sind wenn eine weitere Bedingung erfüllt wird. Im konkreten Fall wird die Angabe des Nachnamens in einem Anmeldeformular vorausgesetzt und ein vertiefender, optionaler Kurs ist nur in Kombination dem Basiskurs belegbar.

Das gezeigte Beispiel ist in zwei Teile gegliedert. Im ersten Teil erfahren Sie in sieben Schritten wie Sie ein Feld zum Pflichtfeld machen, es mit einem Hilfetext ergänzen und im zweiten Teil wie Sie Formularlogik mit einer Bedingung konfigurieren.

Live-Beispiel:

 

 

» Jetzt AFS Demo-Zugang erhalten «

Unverbindlich AFS-Zugangsdaten anfordern und selbst testen.

» Online Live-Demo «

Erfahren Sie mehr über AFS in einer Online-Kurzvorstellung.

 

Schritt für Schritt Anleitung:

Schritt 1: In AFS-Webadmin einloggen:

Falls Sie noch keine Zugangsdaten haben, können Sie diese unter folgendem Link anfordern.

Zugangsdaten anfordern »

Gerne präsentieren wir Ihnen die Funktionen unserer Formularlösung auch in einer persönlichen Online-Kurzvorstellung:

Online Live-Demo »

Abbildung 1: Loginfenster WebAdmin

Abbildung 1: Loginfenster WebAdmin

Schritt 2: Formular auswählen:

Im aktuellen Beispiel handelt es sich um die Formulare „Fehlermeldungen_Demo“ in welchem bereits alle Funktionen dieses Tutorials eingebaut wurden und „Fehlermeldungen_Demo _Leer“ in das Sie in diesem Tutorial eigenständig Pflichtfeld, Hilfetext und Logik einbauen können.

Sie gelangen über das Lupensymbol neben dem Formular „Fehlermeldungen_Demo“ in die Voransicht des fertigen Formulars. Wählen Sie anschließen die zu bearbeitende Version des Formular „Fehlermeldungen_Demo _leer“ an, in welches Sie in mithilfe dieses Tutorials Pflichtfeld, Hilfetext und Logik einfügen.

Abbildung 2: Formular auswählen

Abbildung 2: Formular auswählen

Schritt 3: Block wählen:

Klicken Sie nun unter dem Reiter „Blöcke“ auf den Block „D_FEHLER_Anmeldung_leer“ um diesen zu bearbeiten.

Abbildung 3: Block wählen

Abbildung 3: Block wählen

Sie befinden sich nun in der Ansicht „Blockdetails“. Klicken Sie nun in der Zeile „Felder“ auf „Bearbeiten“.

Abbildung 4: Felder bearbeiten

Abbildung 4: Felder bearbeiten

Schritt 4: Pflichtfeld setzen:

Hier wählen Sie links unten unter „Blockelemente“ das Feld „NACHNAME“ per Radiobutton (Auswahl) aus und setzen rechts unter „Element-Eigenschaften“ bei „Pflichtfeld“ ein Häkchen. Damit machen wir aus einem Feld, welches normalerweise kein Pflichtfeld wäre, in diesem speziellen Block zu einer verpflichtenden Eingabe. Klicken Sie auf „Anwenden“ um die Änderungen zu übernehmen.

Abbildung 5: Pflichtfeld setzen und anwenden

Abbildung 5: Pflichtfeld setzen und anwenden

Schritt 5: Hilfetext hinzufügen:

Nun bekommt der Antragsteller bzw. die Antragstellerin wenn das Feld Nachname leergelassen wird eine Fehlermeldung, dass das Feld verpflichtend zu befüllen ist. Um bei der Eingabe zu unterstützen, setzen Sie nun einen Hilfetext, welcher über ein „Info-I“ neben dem zu befüllenden Feld erscheint und bei Klick darauf, den Hilfetext anzeigt.
Klicken Sie dazu auf den Button „Hilfe ändern“ und füllen Sie die Felder „Fenstertitel“ und „Hilfetext“ aus. In diesem Fall schreiben Sie z. B. den Satz „Bitte geben Sie ihren bürgerlichen Nachnamen an.“ Ein und klicken danach auf „Übernehmen“. Und danach wieder auf „Anwenden“ wie bei den Pflichtfelder.

Durch die Eingabe eines Hilfetextes, erscheint neben den Feldern automatisch ein „Info-I“ über das der Hinweis eingeblendet werden kann.

Abbildung 6: Hilfetext ändern

Abbildung 6: Hilfetext ändern

Schritt 6: Änderungen speichern und Formular mit Server abgleichen:

Klicken Sie nun auf „Zurück“ um wieder in die „Blockdetails“ und auf „Speichern“ um in die „Liste der Blöcke“ zu gelangen. Klicken Sie nun auf den Reiter „Formulare“ um wieder in die „Liste der Formulare zu gelangen“ Sie können die Änderungen nun mittels des Buttons „Voll-Abgleich“ mit dem Server synchronisieren und danach mittels „Voransicht“ ausprobieren. Klicken Sie dazu auf das Lupensymbol neben dem Formular „Fehlermeldung_Demo_leer“ 

Abbildung 7: Server abgleichen und Voransicht öffnen

Abbildung 7: Server abgleichen und Voransicht öffnen

Schritt 7: Fertiges Formular mit Pflichtfeld und Fehlermeldung:

Abbildung 8: Fertiges Formular inklusive Pflichtfeld & „Info-I“ mit Hinweistext

Abbildung 8: Fertiges Formular inklusive Pflichtfeld & „Info-I“ mit Hinweistext

Schritt 8: Formularlogik hinzufügen:

Nachdem Sie vom Antragsteller bzw. der Antragsteller einen verpflichtenden Nachnamen verlangen, sollen Sie auch sicherstellen, dass auch mindestens ein Kurs gewählt wird, wobei der vertiefende Kurs nur in Kombination mit dem entsprechenden Basis-Kurs gewählt werden kann.

Abbildung 9: Voransicht des Formulars „Fehlermeldung_Demo_leer“ ohne Logik
Abbildung 9: Voransicht des Formulars „Fehlermeldung_Demo_leer“ ohne Logik

Klicken Sie hierzu wie zuvor in Schritt 3 auf den Reiter „Blöcke“ und wählen dort den Block “F_FEHLER_Anmeldung_leer“ aus. Der Extender soll die Eingabe nur in diesem Block prüfen. Klicken Sie in den „Blockdetails“ nun in der Zeile „Extender“ auf „Hinzufügen“ um einen neuen Extender zu erstellen. 

Abbildung 10: Neuen Extender hinzufügen

Abbildung 10: Neuen Extender hinzufügen

Schritt 9: Extender 1: Vollständige Eingabepflicht:

Wählen Sie nun in der Extender Dropdown Liste „Felder: Vollständige Eingabepflicht festlegen“. Dieser Extender soll sicherstellen, dass zumindest einer der drei Kurse gewählt wird. Konfigurieren Sie den Extender nun wie folgt. Zur besseren Übersicht, können Sie den Extender über das Feld „Verwendungszweck“ selbst benennen. In unserem Fall nennen wir Ihn „Ein Kurs muss ausgewählt werden“ und setzen darunter das Häkchen bei „Selbsterstellter Verwendungszweck“

Abbildung 11: Konfiguration Extender 1

Abbildung 11: Konfiguration Extender 1

Als nächstes geben Sie im Feld „Anzahl der Pflichtfelder“ den Wert „1“ ein. Dieser stellt fest, dass mindestens eine Auswahl getroffen werden muss.

Wählen Sie nun nacheinander die Felder aus, auf die die Regel zutreffen soll. Über das Dropdown Menü wählen Sie neben „Feld“ die Auswahlmöglichkeiten aus und klicken danach rechts auf das grüne Plussymbol um weitere Felder hinzuzufügen. Machen Sie das bis die Felder „HTML-Workshop: Erstellen von Webseiten – Basis““, „Adobe Premiere – Einführung in die Videobearbeitung - Basis“ und „Security – Wie sicher sind meine Daten -Basis“ wie auf dem Screenshot gezeigt, ausgewählt wurden.

Als nächstes definieren Sie, welche Fehlermeldung angezeigt werden soll, wenn keine Auswahl getroffen wird. Geben Sie dazu im Feld „Fehlermeldung“ einen Text wie z. B. „Sie müssen einen Basis Kurs auswählen“ ein. Und setzen das Häkchen bei „Nur angegebene Fehlermeldungen“ direkt darunter.

Nun ist der erste Extender fertig konfiguriert. Klicken Sie anschließen auf übernehmen um zu speichern und in die Blockdetails zurückzukehren.

Schritt 10: Extender 2: Fehlermeldung setzen:

Fügen Sie nun wie im vorherigen Schritte einen weiteren Extender hinzu. Dieser soll sicherstellen, dass der optionale, vertiefende Kurs „Security: Wie sicher sind meine Daten? – Vertiefend“ nur gewählt werden kann, wenn auch der zugehörige Basiskurs gewählt wird.

Wählen Sie den Extender „Formular: Fehlermeldung setzen“ aus der Dropdownliste aus und konfigurieren ihn wie folgt.

Abbildung 12: Konfiguration Extender 2

Abbildung 12: Konfiguration Extender 2

Geben Sie nun wieder zur besseren Übersicht einen „Verwendungszweck“ im dementsprechenden Feld an uns setzen das Häkchen bei „Selbsterstellter Verwendungszweck“

Wählen Sie nun die beiden Variablen an, die für die Regel relevant sind. In diesem Fall wählen Sie als Variable 1 „Security: Wie sicher sind meine Daten? – Basis“, klicken rechts auf das Plussymbol um eine weiter Variable hinzuzufügen und wählen bei Variable 2 „Security: Wie sicher sind meine Daten? – Vertiefend (optional)“.

Als nächstes geben Sie im Feld „Bedingung“ folgendes ein“ „{2} UND (NICHT({1}))“. Damit legen wir fest, dass der Extender dann eine Fehlermeldung ausgibt, wenn Variable 2 ohne Variable 1 gewählt wird.

Zuletzt geben Sie noch eine Fehlermeldung im entsprechenden Feld ein, die angezeigt wird, wenn die Bedingung erfüllt wird. In diesem Fall geben Sie etwas wie „Sie können den vertiefenden Kurs nur in Kombination mit dem Basiskurs belegen.“ ein und klicken anschließen auf Übernehmen.

Schritt 11: Änderungen speichern und Formular mit Server abgleichen:

Klicken Sie nun auf „Speichern“ um in die „Liste der Blöcke“ zu gelangen. Klicken Sie nun auf den Reiter „Formulare“ um wieder in die „Liste der Formulare zu gelangen“ Sie können die Änderungen nun mittels des Buttons „Voll-Abgleich“ mit dem Server synchronisieren und danach mittels „Voransicht“ ausprobieren. Klicken Sie dazu auf das Lupensymbol neben dem Formular „Fehlermeldung_Demo_leer“  

Abbildung 13: Server abgleichen und Voransicht öffnen

Abbildung 13: Server abgleichen und Voransicht öffnen

Schritt 12: Fertiges Formular mit Formularlogik und Fehlermeldung

Die von Ihnen hinzugefügte Formularlogik stellt nun sicher, dass der vertiefende Kurs nur mit dem Basiskurs belegt werden kann. Wenn dies nicht der Fall ist, wird die von Ihnen eingegebene Fehlermeldung angezeigt und die betroffenen Felder der Variablen optisch hervorgehoben.