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/

26 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

    1. Hallo,
      also eine einfache Möglichkeit ist die Verwendung des HTML Codes für ein Leerzeichen: &nbsp;

      Beispiel im Formular:

      [checkbox produktauswahl-001 use_label_element "&nbsp;Kugelschreiber" "&nbsp;Kalender"]
      
      [submit "Senden"]

      (Vorsicht beim Kopieren. Zur Sicherheit abtippen.)

  3. Huhu,

    lieben Dank für die Erklärung. Die hat mir gerade super weitergeholfen beim einrichten. Allerdings finde ich einfach keine Lösung, wie sich die Checkboxen untereinander anzeigen lassen.
    Hast Du dazu auch eine Lösung?

    Vielen lieben Dank und Grüße,
    Nadine

    1. Hallo Nadine,
      du kannst die Checkboxen untereinander anzeigen, indem du für jeden Wert ein eigenes Tag anlegst.

      Anstatt:
      [checkbox produktauswahl-001 „Kugelschreiber“ „Kalender“]

      Machst du
      [checkbox produktauswahl-001 „Kugelschreiber“]
      [checkbox produktauswahl-001 „Kalender“]

    1. Dafür wird JavaScript benötigt, da hier erweiterte Logik eingebaut werden muss. Es eignet sich das Plugin „Simple Custom CSS and JS“. Damit kann man dann eigenen JavaScript Code hinzufügen. Dieser kann dann so aussehen:

      jQuery(document).ready(function() {
      //Wie viele Checkboxen dürfen gleichzeitig aktiviert sein?
      var maxAllowedChecked = 6;
      //Beim anklicken einer Checkbox
      jQuery(":checkbox").change(function(){
      //Prüfen, ob die maximal erlaubte Anzahl an aktiven Checkboxen erreicht ist
      if(jQuery(":checkbox").filter(":checked").length >= maxAllowedChecked){
      //Wenn ja, alle anderen Checkboxen deaktivieren
      jQuery(":checkbox").filter(":not(:checked)").each(function(){
      jQuery(this).attr("disabled", true);
      });
      }else{
      //Wenn nicht, dürfen alle anderen Checkboxen aktiviert werden
      jQuery(":checkbox").filter(":not(:checked)").each(function(){
      jQuery(this).removeAttr("disabled", true);
      });
      }
      });
      });

      Dieser Code prüft, ob im Formular 6 Checkboxen oder mehr aktiviert wurden. Wenn ja, dann werden alle anderen Checkboxen deaktiviert und können somit nicht mehr angeklickt werden. Wird eine der 6 angehakten Checkboxen wieder abgehagt, so werden die übrigen Checkboxen wieder aktiviert.

  4. Hallo Mark,

    ich finde es super, dass du hier einfach verständlich Rede und Antwort hältst. Vielen Dank dafür!

    Ich frage mich derweil 3 Dinge:
    1. Wenn ich mit Elemtor „Label“ bearbeite, dann ist die Eingabezeile ebenso als ein Label codiert und die Hintergrundfarbe verändert sich mit. Allerdings finde ich darauf in der Formularerstellung keinen Hinweis darauf. Hast du hier eine Idee?
    2. Ist es unumgänglich ein weiteres Plugin zu installieren, um die Größe der Kästchen zu bearbeiten bzw. zu verkleinern?
    3. Ich möchte dem Kunden die Möglichkeit geben, einen Datumszeitraum von – bis zu wählen? Ist dies irgendwie möglich?

    Ich danke dir für deine Unterstützung.

    LG Ulf

    PS: Ich bin ein absoluter Technik Newbie und versuche mich hier grade erst einzufuchen 😉

    1. Hallo Ulf,
      vielen Dank für das Feedback! Es freut mich, wenn die Infos helfen die ersten Hürden zu meistern.

      1. Ich vermute du hast Elementor und das Plugin „Essential Addons for Elementor“ für WordPress installiert? Mit diesem Plugin kannst du aus der Elementor Objektauswahl auch ein Contact Form 7 Objekt auf deine Seite ziehen. Wenn ich hier allerdings „Label“ bearbeite, wird tatsächlich nur das Label zum Eingabefeld angepasst.
      Versuche einmal ein Standardformular als Test anzulegen:

      [submit "Senden"]

      Verhält es sich damit genauso? Wenn ja, welches Plugin hast du für Elementor installiert?

      2. Die Größe der Checkboxen ist leider nicht so einfach anzupassen. Das ist vielleicht schon etwas vorausgegriffen, du wirst aber irgendwann mit dem Thema „CSS“ vertraut werden. Das sind Styleangaben, über welche man sehr indivduell die einzelnen Elemente der Website anpassen kann.

      Da der Code etwas ausführlicher ist, verlinke ich einmal auf ein Beispiel: https://stackoverflow.com/questions/306924/can-i-change-the-checkbox-size-using-css#10415275

      Hier kann man sich das Ergebnis über den blauen „Run code snippet“ Button ansehen.

      Also leider noch nicht ganz komfortabel umzusetzen.

      3. Da sollten dir diese zwei Felder helfen:
      [date datum-von min:today]
      [date datum-bis min:today+1]

      Beim ersten Feld „datum-von“ kann man ein Datum nicht früher als den heutigen Tag auswählen. Beim zweiten Feld kann man dann erst ab übermorgen starten.

      Die Werte „min…“ kann man natürlich auch komplett weglassen.

  5. Hallo,

    ich beziehe mich auf den Eintrag von Nadine vom 4. Oktober 2019, wo es um die Anordnung der Checkboxen geht …

    Anstatt:
    [checkbox produktauswahl-001 „Kugelschreiber“ „Kalender“]

    Machst du
    [checkbox produktauswahl-001 „Kugelschreiber“]
    [checkbox produktauswahl-001 „Kalender“]

    Ich habe 6 Checkboxen die ‚exclusive‘ sind und wie bei Nadine untereinander angeordnet sind. Allerdings soll die Auswahl erforderlich sein.

    Wenn allerdings keine Checkbox beim senden ausgewählt wurde, bekomme ich unter jeder Checkbox eine Fehlermeldung. Lässt sich das irgedendwie gruppieren, so dass nur eine Fehlermeldung unter den 6 Checkboxen erscheint?

    Beste Grüße
    Sven

    1. Hallo Sven,
      das sollte über folgende Schreibweise umzusetzen sein:

      [checkbox* exclusive produktauswahl „Option 1“ „Option 2“ „Option 3“ „Option 4“ „Option 5“ „Option6“]

      Damit werden sechs Checkboxen in einer Reihe angezeigt. Damit diese untereinander dargestellt werden, muss noch dieser CSS Code eingefügt werden:
      span.wpcf7-list-item { display: block; }

      Viel Erfolg damit!

  6. Hallo, ich vermute das meine Nachricht untergegangen ist. Leider habe ich ein Problem 4 Checkboxen als Auswahl zu platzieren und es in der Email Benachrichtigung anzeigen zu lassen.
    Hier mein Code aus dem Formular:
    [checkbox Auswahl-status „Ambulante Pflege“]
    [checkbox Auswahl-status „Intensiv- und Beatmungspflege“]
    [checkbox Auswahl-status „Wohngemeinschaft“]
    [checkbox Auswahl-status „Allgemein“]

    wie muss das im Bereich Email aussehen?
    [checkbox* Auswahl „Ambulante Pflege“ „Intensiv- und Beatmungspflege“ „Wohngemeinschaft“ „Allgemein“]
    oder
    Ambulante Pflege Status: [Ambulante Pflege-status]
    checkbox-808 Status: [Intensiv- und Beatmungspflege-status]
    checkbox-325 Status: [Wohngemeinschaft-status]
    checkbox-325 Status: [Allgemein-status]
    Danke für die schnelle Hilfe!!

    1. Hallo,
      du hast das eigentlich schon richtig.
      Die folgenden Felder zeigen dir jeweils das ausgewählte Ergebnis an:

      Auswahl Status (Checkboxen untereinander): [Auswahl-status]
      Auswahl Status (Checkboxen in einer Reihe): [Auswahl]

      Du musst im E-Mail Bereich nicht für jede mögliche Checkbox ein Ausgabefeld anlegen, sondern nur für die Gruppe – also „Auswahl-status“ bzw. „Auswahl“.

      1. Hi Mark,
        danke für dein Feedback!
        Ich habe im E-Mail Feld auf folgendes geändert:
        [checkbox* Auswahl-status „Ambulante Pflege“ „Intensiv- und Beatmungspflege“ „Wohngemeinschaft“ „Allgemein“]
        wie wird mir die ausgewählte Auswahl den angezeigt in der Eingangsmail?

        1. Hi Ben,
          wenn du im E-Mail Reiter nun folgendes einträgst:

          Auswahl des Besuchers: [Auswahl-status]

          dann sieht die Eingangsmail z.B. so aus:

          Auswahl des Besuchers: Wohngemeinschaft

          das Feld [Auswahl-status] wird einfach durch den Wert ersetzt, den der Benutzer ausgewählt hat.

  7. ich meine ich wähle eins oder zwei von den vieren aus und müsste doch in der Antwortmail sehen welche Auswahl getroffen worden ist, in meiner Mail sehe ich nur:
    [checkbox* Auswahl-status „Ambulante Pflege“ „Intensiv- und Beatmungspflege“ „Wohngemeinschaft“ „Allgemein“]

    1. Das war dann eine Verwechslung:
      Im Reiter „Formular“ muss dieser Code rein:
      [checkbox* Auswahl-status „Ambulante Pflege“ „Intensiv- und Beatmungspflege“ „Wohngemeinschaft“ „Allgemein“]
      damit werden die Checkboxen überhaupt erst angezeigt.

      Damit die getroffenen Auswahl in der E-Mail angezeigt wird, muss dieser Code in den Reiter „E-Mail“ rein:
      Auswahl des Besuchers: [Auswahl-status]

  8. Hallo zusammen, ich werde aus den vielen tipps leider nicht schlau daher muss ich leider nochmal fragen…

    ich möchte das alle checkboxen (ca 10 stück)

    mit in der gesendeten email angezeigt werden egal ob aktiv oder nicht aktiv hab es mir allen codes hier versucht jedoch ohne erfolg

    1. Hallo,
      versuche einmal folgendes im Formular Tab:

      [checkbox checkbox-1 "Option 1"]
      [checkbox checkbox-2 "Option 2"]
      [checkbox checkbox-3 "Option 3"]
      [checkbox checkbox-4 "Option 4"]
      [checkbox checkbox-5 "Option 5"]

      [submit „Senden“]

      und folgendes im E-Mail Tab:

      Checkbox 1: [checkbox-1]
      Checkbox 2: [checkbox-2]
      Checkbox 3: [checkbox-3]
      Checkbox 4: [checkbox-4]
      Checkbox 5: [checkbox-5]

      Hier werden einfach alle Checkboxen in der E-Mail Aufgelistet. Und wenn nichts gewählt wurde, steht hinter dem Doppelplunkt kein Text.
      Das könntest du dann auf dein Szenario umbauen.

      Hilft dieses Beispiel?

  9. Sehr gut erklärt, jedoch habe ich leider das Problem, dass sämtliche Checkboxen, Dropdowns und Radios als Serialisiertes Array übergeben werden, was mir auf den ersten Blick völlig sinnfrei erscheint. Beim „auslesen“ macht es massive Probleme.

    Vielleicht hast du eine Idee, wie man das direkt bei der Übermittlung verhindern kann?
    Der pure eingegebene oder ausgewählte Wert soll letztendlich ohne Schnick Schnack in der DB zu finden sein.

    1. Hallo,
      hier konnte ich leider keine einfache Lösung (ohne Entwicklung) finden.
      Contact Form 7 speichert die übermittelten Nachrichten nicht ohne weiteres in der Datenbank. Dafür hilft ein Plugin https://de.wordpress.org/plugins/contact-form-cfdb7/

      Wo genau sollen die Werte denn ausgelesen werden? In der übermittelten Nachricht im E-Mail Programm oder bereits während dem Versand auf der WordPress Seite?

Schreibe einen Kommentar zu Ben Antworten abbrechen

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