Checkbox Header

Checkboxen im Kontaktformular

Neben aufklappbaren Auswahlfeldern bietet Contact Form 7 auch die Darstellung der Auswahlmöglichkeiten als Checkbox. Dabei werden die Werte in einer Zeile angezeigt und können durch einen Haken ausgewählt werden.

Das dazugehörige Tag, welches im Contact Form 7 Tag Editor für eine Checkbox vorgesehen ist, nennt sich „Kontrollkästchen“. Mit diesem Tag kann man sehr einfach eine Liste von auswählbaren Boxen erstellen.

Checkbox im Tag Editor
Der Tag Editor Button für das Erstellen von Kontrollkästchen.

Alles was hier für Contact Form 7 angegeben werden muss, sind die Beschriftungen der Checkboxen. Diese werden auch gleichzeitig als Werte genommen.

Um eine einfache Auswahl aus Checkboxen zu erzeugen, kann folgendes Beispiel verwendet werden:

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

Dies erzeugt folgende Ausgabe für den Besucher:

Checkboxen Contact Form 7
Die einfachste Anzeige von Checkboxen.

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

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

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

Beschriftung vor der Checkbox

Normalerweise wird die Checkbox vor der dazugehörigen Beschriftung angezeigt. Möchte man dies umkehren, so verwendet man die Option „label_first“:

[checkbox produktauswahl-001 label_first "Kugelschreiber" "Kalender"]

Ergebnis:

Checkbox Beschriftung umkehren
Die Anzeige der Beschriftung kann umgekehrt werden.

Auswahl der Checkbox über die Beschriftung

Das Auswählen beziehungsweise Anhaken einer Checkbox wird deutlich erleichtert, wenn die Beschriftung der Checkbox ebenfalls anwählbar ist. Dafür wird jede einzelne Checkbox mit dem HTML Element „<label>“ umgeben.

[checkbox produktauswahl-001 use_label_element "Kugelschreiber" "Kalender"]

Ergebnis:

Checkbox Use Label Element
Einfaches auswählen durch die Option „use_label_element“.

Nur eine Checkbox soll auswählbar sein

Werden mehrere Checkboxen zur Auswahl angeboten, so können mehrere Werte ausgewählt werden. Soll nur ein Wert ausgewählt werden können, muss dies als Option angegeben werden.

Mit der  Option „exclusive“ wird nur das auswählen maximal einer Checkbox erlaubt. Bei allen anderen Checkboxen wird die Auswahl aufgehoben.

[checkbox produktauswahl-001 exclusive "Kugelschreiber" "Kalender"]

Ergebnis:

Checkbox Exklusiv
Soll nur eine Checkbox ausgewählt werden können, wird „exclusive“ verwendet.

Freie Eingabe eines Werts erlauben

Sollen die Besucher alternativ zu den vorgegebenen Werten einen eigenen Wert eingeben könne, so bietet sich die Option „free_text“ an. Damit wird der letzte Wert als Beschriftung für ein Eingabefeld verwendet.

So kann der Besucher auch einen freien Wert eingeben.

[checkbox produktauswahl-001 free_text "Kugelschreiber" "Kalender" "Andere:"]

Ergebnis:

Eingabe freier Wert
Auch die Eingabe eines freien Werts ist möglich.

Werte vorbelegen

Checkboxen könenn bereits ausgewählt vorbelegt werden. Diese Möglichkeit bietet die Option „default“. Hier muss die Nummer des Eintrags oder der Einträge angegeben werden, welche beim Aufruf des Formulars vorbelegt sein sollen:

Das Vorbelegen mehrere Werte wird durch das Verbindungszeigen „_“ erreicht.

[checkbox produktauswahl-001 default:1_2 "Kugelschreiber" "Kalender"]

Ergebnis:

Checkbox Vorauswahl
Einzelne oder alle Checkboxen können bereits vorbelegt werden.

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

4 Gedanken zu „Checkboxen im Kontaktformular“

  1. Hallo,
    Bitte nur eine Disziplin wählen:
    [checkbox produktauswahl-001 exclusive „Massenstart“ „Massenstart+Verfolgung“]

    Diesen Eintrag habe ich in meinem Formular. Die Funktion der Auswahl durch exclusive funktioniert, aber ich habe eine Fehlermeldung:
    „!Es wurde ein Konfigurationsfehler in diesem Reiter gefunden“
    Wie bekomme ich den Fehler weg?

    Danke im Voraus

    1. Hallo,
      die Fehlermeldung wird in diesem Fall vermutlich unter dem Reiter „E-Mail“ zu sehen sein?
      Wenn ja, dann einfach einmal die einzelnen Eingabefelder genauer ansehen.
      Es sollte ein markiertes Feld geben und ein Ausrufezeichen Symbol – damit markiert Contact Form 7 dann den Fehler.

      Häufig wird einfach ein Feld verwendet, welches im vorderen „Formular“ Reiter gar nicht angelegt ist.

      Ansonsten bitte einmal den kompletten Code vom Formular hier zeigen. Danke!

  2. Frage: Wie zeigt es mir dann die Checkbox in der E-mail an damit ich sehen kann was der kunde ausgewählt hat? ich kann das nicht einstellen.

    1. Hierfür eignet sich folgender Code im Reiter „Formular“ (Im WordPress Dashboard angemeldet und das gewünschte Formular bearbeiten):

      Newsletter
      [checkbox* newsletter-status exclusive "Anmeldung" "Abmeldung"]

      Dann im Reiter „E-Mail“ diese Zeile im Feld „Nachrichtenkörper“ einfügen:
      Newsletter Status: [newsletter-staus]

      Damit wird in der abgesendeten Mail dann z.B. folgendes stehen:

      Newsletter Status: Anmeldung

Schreibe einen Kommentar

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