Ein- und Ausblenden von Formularfeldern

Bei einigen Webformularen sollen weitere Eingaben erst abgefragt werden, wenn eine Checkbox angehakt oder ein Wert eines Dropdown / Radiobuttons ausgewählt wurde. Die Abfrage von Begleitpersonen ist bereits im Fomulareditor hinterlegt. Für weitere Abfragen, wie beispielsweise eine optionale Rechnungsadresse oder andere Zusatzabfragen, bedarf es allerdings JavaScript Codes. Im Folgenden zeigen wir dies für den Einsatz einer Checkbox und für den Einsatz eines Radiobutton / einer Dropdown-Auswahl.

Felder mit einer Checkbox ein- und ausblenden

So greifen Sie auf den Javascript Editor im Template "Registrierungsformular" innerhalb des Webseiten Generators zu:

7.png

Folgende JavaScript Code Zeile muss nun im Webseiten Generator im Modul "Registrierungsformular" im Bereich JavaScript eingefügt werden, damit das Ein-und Ausblenden programmiert wird:

felderEinUndAusblenden('HTML ID Checkbox', ['HTML ID 1', 'HTML ID 2']);

Die roten Platzhalter HTML IDs müssen allerdings noch mit den richtigen Werten ersetzt werden.

Sobald der JavaScript Bereich ausgeklappt wird, wird die Spalte "HTML ID" der Formularfelder eingeblendet. Diese HTML ID muss im JavaScript Code zuerst für die Checkbox im ersten Platzhalter zwischen die einfachen Anführungszeichen eingetragen werden. Beachten Sie bitte die korrekte Schreibweise. Die HTML ID kann auch direkt im JavaScript Code eingefügt werden, indem man den Cursor im JavaScript Code an die richtige Stelle zwischen die einfachen Anführungszeichen bringt und dann auf die richtige Feldzeile in der Formularliste klickt. Als nächstes müssen die Formularfelder eingetragen werden, die ein- und ausgeklappt werden sollen. Dazu wird die HTML ID in einfachen Anführungszeichen im Bereich zwischen den eckigen Klammern eingefügt. Die Liste kann dabei beliebig durch Kommas erweitert werden.

Wo finden Sie die korrekte HTML ID-Bezeichnung? 

Die HTML ID-Bezeichnung entnehmen Sie bitte dem CMS Ihres Registrierungsformulars. Dabei handelt es sich immer um das Formularfeld (wie Checkbox oder Radiobutton), welches zunächst vom Gast ausgefüllt werden muss, bevor weitere Felder eingeblendet werden. Solange dieses Feld nicht ausgefüllt ist, werden auch die ausgeblendeten Formularfelder nicht angezeigt.

1.png

Wie Sie sehen, beginnt das HTML ID in der Regel mit "form_".

ACHTUNG: Bitte beachten Sie bei diesem Verfahren, dass ein- und ausklappbare Formularfelder keine Pflichtfelder sein dürfen.

Am Beispiel einer optionalen Firmenrechnung möchten wir dies einmal konkret aufzeigen. Dafür wird das Formular um eine Checkbox zur Abfrage nach einer Firmenrechnung und zwei Textfelder für die Abfrage der Firma und der Adresse erweitert. Dies sind alles keine Pflichtfelder. Daraufhin fügen wir den JavaScript Code ein und tragen die korrekten HTML IDs der Checkbox und der beiden Felder ein. Dies kann man in folgendem Ausschnitt des Webseiten Generators sehen:

Formulargenerator_Checkbox_einblenden.png

 

Das entsprechende Formular auf der Webseite sieht damit wie folgt aus. Nach Auswahl der Checkbox "Ich benötige eine Firmenrechnung." werden beide Felder für die Firma und die Adresse eingeblendet.

Formular_Checkbox_einblenden.png

 

Felder mit einem Radiobutton oder einem Dropdown ein- und ausblenden

Das Ein- und Ausblenden einer Auswahl nach einem Radiobutton oder Dropdown funktioniert ganz ähnlich wie bei einer Checkbox. Sie können dann auch verschiedene Sachen ein- und ausblenden, beispielsweise Textfelder und eine Checkbox. Wir schauen uns dies später im Beispiel genauer an. 

Folgende JavaScript Code Zeile muss im Webseiten Generator im Modul "Registrierungsformular" im Bereich JavaScript eingefügt werden. Die roten Platzhalter HTML IDs müssen allerdings noch mit den richtigen Werten ersetzt werden und die Wert Felder müssen Werte aus dem Radiobutton / Dropdown enthalten.

felderEinUndAusblenden('HTML ID RADIOBUTTON', '', ['HTML ID 1', 'HTML ID 2']);

felderEinUndAusblenden('HTML ID RADIOBUTTON', '', ['HTML ID 1']);

felderEinUndAusblenden('HTML ID RADIOBUTTON', '', ['HTML ID 2', 'HTML ID 3', 'HTML ID 4']);

Dieser Code ist sehr ähnlich wie für die Checkbox. Zusätzlich muss immer noch der Wert der Auswahl des Radiobuttons / Dropdowns eingetragen werden. Für jeden Wert der Auswahl muss jeweils eine Codezeile angelegt werden. Nur die Felder die in den eckigen Klammern angeben werden, werden bei Auswahl durch den Nutzer auch angezeigt. Alle anderen Felder, die bei einem anderen Wert angegeben sind, werden ausgeblendet. Bitte beachten Sie, dass der Wert genau so eingetragen wird, wie er im Formular für den Radiobutton / das Dropdown notiert ist. Lediglich die Groß- und Kleinschreibung ist hier unerheblich.

ACHTUNG: Bitte beachten dass auch für die Radiobutton / Dropdown Auswahl gilt, dass ein- und ausklappbare Formularfelder keine Pflichtfelder sein dürfen.  

Bitte beachten dass auch für die Radiobutton / Dropdown Auswahl gilt, dass ein- und ausklappbare Formularfelder keine Pflichtfelder sein dürfen.  

Zusammenfassung

Vereinfacht kann man sagen, dass man die HTML ID mit der Bezeichnung des Radiobuttons oder Dropdowns ersetzt, welcher sozusagen als Signal für das Ein-oder Ausblenden von weiteren Feldern fungieren soll. Danach geben Sie die Bezeichnung der Werte an, welche im Radiobutton angeklickt werden müssen, damit weitere Felder eingeblendet werden. Alle Felder, welche dann eingeblendet werden sollen, müssen dann innerhalb der eckigen Klammern angegeben werden. 

Konkretes Beispiel

Ihre Veranstaltung besteht aus der eigentlichen Veranstaltung und einer Aftershow Party. Sie möchten nun Ihre Gäste in der Veranstaltung fragen, ob diese an der Veranstaltung und der Party oder nur an einem Teil teilnehmen. Dafür nutzen Sie eine Radiobutton-Auswahl:

2.png

Je nachdem, an welchen Veranstaltungsabschnitten der Gast teilnimmt, möchten Sie weitere Abfragen vornehmen. Bei der Veranstaltung ist ein Essen dabei. Also könnten Sie beispielsweise bei Teilnahme an "nur Veranstaltung" und an "Veranstaltung und Aftershow" nach den Essenswünschen fragen. Wir vergeben dafür die Werte "Fleisch", "Vegetarisch" und "Vegan".

Da Sie überzeugt sind, dass die Party bis in die späten Abendstunden gehen könnte, möchten Sie allen Teilnehmern der Aftershow Party einen kostenlosen Bus Shuttle anbieten und müssten somit die Abfrage nach dem Bus Shuttle per Checkbox inkludieren. 

Also fassen wir zusammen:

  • Variante 1: Gast kommt nur zu Veranstaltung. Es soll nur die Abfrage nach den Essenswünschen erscheinen (Dropdown-Auswahl zwischen Fleisch, vegetarisch und vegan)
  • Variante 2: Gast kommt zur Veranstaltung und zur Aftershow. Es soll deshalb die Dropdown Abfrage zum Essen sowie die Checkbox zum Bus Shuttle erscheinen.
  • Variante 3: Gast nimmt nur an der Aftershow teil. Somit soll nur die Abfrage nach dem Bus Shuttle abgefragt werden. 

Und so wird das Ganze dann im Javascript Editor umgesetzt:

9.png

Und so sieht das Ganze dann in Ihrem Registrierungsformular aus. Sie sehen nun 3 Screenshots mit den eingeblendeten Feldern, welche je nach Auswahl variieren:

Teilnahme nur an der Veranstaltung:

4.png

Teilnahme an Veranstaltung und Aftershow:

5.png

Teilnahme nur an der Aftershow:

6.png
HINWEIS: Achten Sie immer auf die richtige Schreibweise der einzelnen HTML IDs und Werte, welche Sie für den Javascript Code benötigen! Nutzen Sie immer die aktuellsten, von MATE bereitgestellten Webseiten Vorlagen, damit mögliche Bugs und Fehler vermieden werden können!


Wie haben wir uns geschlagen?


Powered by HelpDocs (opens in a new tab)