Dropdown Header

Auswahllisten in Contact Form 7 Formularen

Um seinen Besuchern mehrere Auswahlmöglichkeiten zu einer Option anzubieten, eignet sich das HTML Element „<select>“. Dadurch bietet Contact Form 7 das Anzeigen von Werten in einer sogenannten „Dropdown-Liste“.

Das dazugehörige Tag, welches im Contact Form 7 Tag Editor für eine Auswahlliste vorgesehen ist, nennt sich „Dropdown-Menü“. Mit diesem Tag kann man sehr einfach Auswahllisten erstellen.

Dropdown-Liste Tag
Dropdown-Listen mit dem Contact Form 7 Tag erstellen.

Die wichtigste Eigenschaft, die bei diesem Tag gesetzt werden muss, sind die auswählbaren Werte. Alle Werte werden wie angegeben untereinander als Liste angezeigt.

Dropdown Formular
Die Reihenfolge der angezeigten Werte bestimmt man selbst.

Erzeugt wird diese Auswahlliste mit folgendem Code:

[select produktauswahl-001 "Kugelschreiber" "Kalender"]

Der Aufbau entspricht dabei der üblichen Syntax von Contact Form 7 Tags:

[Typ (select) – Name (produktauswahl-001) – Optionen (leer) – Werte (Kugelschreiber und Kalender)]

Wie im oberen Beispiel gezeigt, müssen keine Optionen angegeben werden. Die Auswahllisten bieten aber folgende Optionen an:

Leere Zeile am Anfang

Damit der erste Eintrag der Liste nicht direkt vorbelegt wird, kann man einen leeren ersten Eintrag setzen.

[select produktauswahl-001 include_blank "Kugelschreiber" "Kalender"]

Ergebnis:

Dropdown leere Zeile
Eine leere Zeile im Auswahlfeld.

Erster Eintrag als Bezeichnung

Möchte man im Auswahlfeld eine Beschriftung als Eintrag anzeigen, so verwendet man die Option „first_as_label“. Dabei wird der erste Eintrag direkt angezeigt, hat allerdings keinen zugeordneten Wert.

[select produktauswahl-001 first_as_label "Produkt wählen" "Kugelschreiber" "Kalender"]

Ergebnis:

Dropdown Label
Eine Beschriftung im Auswahlfeld.
Dropdown mit Label geöffnet
Die geöffnete Auswahlliste mit Beschriftung.

Mehrauswahl anbieten

Mit der Option „multiple“ wird das Auswahlfeld vergrößert und es kann eine Mehrauswahl getroffen werden.

[select produktauswahl-001 multiple "Kugelschreiber" "Kalender"]

Ergebnis:

Auswahlfeld mit Mehrauswahl
Mehrere Einträge können mit dieser Option markiert werden.

Werte vorbelegen

Textfelder können mit Standardwerten vorbelegt werden, die der Besucher dann bei Bedarf überschreiben kann. Diese Möglichkeit bieten die Auswahllisten mit der Option „default“. Hier muss die Nummer des Eintrags oder der Einträge angegeben werden, welche beim Aufruf des Formulars vorbelegt sein sollen:

[select produktauswahl-001 default:2 "Kugelschreiber" "Kalender"]

Ergebnis:

Werte vorbelegen
Mit der „default“ Option Werte vorbelegen.

Sollen mehrere Werte vorbelegt werden, so werden die einzelnen Zahlen mit einem Unterstrich „_“ verbunden:

[select produktauswahl-001 multiple default:1_2 "Kugelschreiber" "Kalender"]
Mehrauswahl vorbelegen
Es können auch mehrere Einträge vorselektiert werden.

Diese Option ist allerdings nur sinnvoll, wenn die Auswahlliste eine Mehrauswahl (multiple) erlaubt.

Quellen:
https://contactform7.com/checkboxes-radio-buttons-and-menus/

2 Gedanken zu „Auswahllisten in Contact Form 7 Formularen“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.