🧩 Bedingte Felder in Contact Form 7: eine schritt-für-schritt-anleitung
Sie benötigen ein Kontaktformular, das sich den Entscheidungen des Nutzers anpasst: Der technische Support zeigt einen Satz Felder, der Vertrieb einen völlig anderen. Das Standard-Plugin Contact Form 7 kann das nicht. Ohne bedingte Logik zeigt die Seite eine Wand aus allen Feldern auf einmal, von denen der Besucher die Hälfte nicht benötigt. Das wirkt unaufgeräumt und stiftet Verwirrung.
Das Plugin Conditional Fields** for Contact Form 7** löst dieses Problem: Felder erscheinen und verschwinden abhängig von der Auswahl des Nutzers. Nachfolgend eine Schritt-für-Schritt-Anleitung zum Aufbau eines echten Support-Formulars, von der Plugin-Installation bis hin zu personalisierten E-Mail-Antworten. Derselbe Ansatz lässt sich auf Rechner, Umfragen und mehrstufige Bewerbungsformulare übertragen.
💡 Kurzer Überblick:
- Installieren Sie CF7 und Conditional Fields, erstellen Sie ein Grundformular mit einer Anfragetyp-Auswahl
- Umschließen Sie Feldgruppen mit
[group]…[/group], konfigurieren Sie die Anzeigebedingungen über den Tab „Conditional fields" - Bauen Sie das finale Formular mit verschachtelten Gruppen, dynamischen Beschriftungen und einem eigenen „Sonstiges"-Zweig
- Richten Sie personalisierte E-Mails ein: unterschiedliche Texte und unterschiedliche Feldsätze für technischen Support und Vertrieb
Was bedingte Felder leisten
Contact Form 7 ist der meistgenutzte Formular-Builder für WordPress: über 10 Millionen aktive Installationen, minimaler Overhead. Von Haus aus ist es jedoch statisch: Alle Felder sind jederzeit sichtbar. Hat das Formular drei logische Zweige (technischer Support, Vertrieb, Partnerschaften), sieht der Besucher neun zusätzliche Felder, die mit seinem Anliegen nichts zu tun haben.
Conditional Fields for Contact Form 7 fügt dem Formular-Editor eine „Wenn-Dann"-Logik hinzu. Das Plugin ist kostenlos, hat eine Bewertung von 4,8 auf WordPress.org und über 100.000 aktive Installationen. Der Autor, Jules Colle, entwickelt auch die Pro-Version mit wiederholbaren Feldern, mehrstufigen Formularen und berechneten Werten.
Wichtig: Das Plugin entfernt ausgeblendete Felder nicht aus dem Markup, es blendet sie lediglich per JavaScript aus. Daher werden alle Felder innerhalb ausgeblendeter Gruppen weiterhin an den Server gesendet. Feldnamen müssen selbst über verschiedene Gruppen hinweg eindeutig sein, andernfalls werden Werte überschrieben. Das ist die oberste Regel, und in der Praxis der häufigste Stolperstein.
Installation und Grundformular
Installieren Sie beide Plugins über Plugins → Installieren:
- Contact Form 7, den Formular-Builder selbst
- Conditional Fields for Contact Form 7, die Engine für die bedingte Logik
Gehen Sie nach der Aktivierung zu Kontakt → Neu hinzufügen und fügen Sie die Formularvorlage ein. Noch ohne bedingte Gruppen, zunächst einfach alle Felder auf einmal:
1 Your name: [text your-name] 2 Your email address: [email your-email] 3 4 What kind of support do you want? 5 [select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"] 6 7 Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"] 8 9 In case you selected Technical support: 10 Please specify your OS version: [text version] 11 12 In case you selected Sales: 13 Where is your business located? [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"] 14 15 [textarea comments] 16 17 [submit "Send"]
So sieht das Formular ohne Logik aus: Die Betriebssystemauswahl und die Felder für den technischen Support sind immer sichtbar, selbst wenn der Besucher „Vertrieb" gewählt hat. Es gibt überhaupt keine „Sonstiges-Betriebssystem"-Option, und die Beschriftung des Versionsfelds ändert sich nicht abhängig vom gewählten System. Das beheben wir mit Gruppen.
Feldgruppen anlegen
Eine Gruppe ist ein Paar von Tags [group group-name] ... [/group]. Alles dazwischen ist standardmäßig ausgeblendet und erscheint nur, wenn eine Bedingung ausgelöst wird. Gruppen können ineinander verschachtelt werden, was bei kaskadierender Logik nützlich ist.
Klicken Sie im Formular-Editor auf die Schaltfläche Conditional group oberhalb des Textbereichs; sie fügt die Tags automatisch ein.
Legen Sie im erscheinenden Fenster den Gruppennamen und die Optionen fest:
- Clear on hide leert alle Felder innerhalb der Gruppe, wenn diese ausgeblendet wird. Sinnvoll, damit Werte aus unsichtbaren Feldern nicht in der E-Mail versendet werden.
- Inline zeigt die Gruppe als Inline-Element an. Hilfreich, wenn Sie ein Textstück direkt in einen Satz einbetten müssen (das zeige ich später).
Erstellen Sie die erste Gruppe technical-support-selected und verschieben Sie die Betriebssystem- und Versionsfelder hinein:
1 [group technical-support-selected] 2 Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"] 3 [group os-selected] 4 Please specify your OS version: [text version] 5 [/group] 6 [/group]
Hier gibt es bereits zwei Gruppen, eine innerhalb der anderen. Die äußere (technical-support-selected) bildet ab, dass technischer Support ausgewählt wurde. Die innere (os-selected) ist die Klärung der Betriebssystemversion, die NUR erscheint, wenn der Nutzer ein bestimmtes Betriebssystem auswählt. Ohne Bedingung bleiben beide Gruppen vorerst unsichtbar.
Dasselbe gilt für den Vertrieb:
1 [group sales-support-selected] 2 Where is your business located? 3 [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"] 4 [/group]
Speichern Sie das Formular, und die Gruppen verschwinden aus dem Frontend. Das ist normal: Es gibt noch keine Bedingungen.
Bedingungslogik einrichten
Wechseln Sie nach dem Speichern des Formulars zum Tab Bedingungsfelder. Es gibt zwei Modi: visuell (Dropdowns) und Text (Sie schreiben Regeln manuell). Der Textmodus ist bei komplexen Formularen schneller, daher verwenden wir diesen.
Klicken Sie auf Neue Bedingungsregel hinzufügen und geben Sie die erste Regel ein:
1 show [technical-support-selected] if [support-type] equals "Technical support"
Die Syntax ist einfach: show <group> if <field> equals "<value>". Nach dem Speichern der Regel wird die Gruppe technical-support-selected sichtbar, sobald der Nutzer „Technischer Support" aus dem Dropdown auswählt.
Fügen Sie die Regel für den Vertrieb hinzu:
1 show [sales-support-selected] if [support-type] equals "Sales"
Nun wechselt das Formular zwischen zwei Zweigen, aber innerhalb des technischen Supports wird das Versionsfeld weiterhin ständig angezeigt. Es soll erst erscheinen, nachdem ein bestimmtes Betriebssystem ausgewählt wurde:
1 show [os-selected] if [operating-system] not equals ""
Die Prüfung not equals "" funktioniert, weil wir first_as_label verwenden; der Wert -- Choose your operating system -- gilt nicht als ausgewählt. Das Feld operating-system ist leer, bis der Besucher tatsächlich auf eine Option klickt.
Weiter: Wir sollten eine Option „Sonstiges" zum Betriebssystem-Dropdown hinzufügen. Wenn der Nutzer „Sonstiges" auswählt, wissen wir nicht, welches Betriebssystem er hat, also geben wir ihm zwei Textfelder: den Systemnamen und die Version. Wir benötigen eine neue Gruppe os-other-selected und eine Regel mit dem UND-Operator:
1 show [os-selected] if [operating-system] not equals "" 2 and if [operating-system] not equals "Other" 3 show [os-other-selected] if [operating-system] equals "Other"
Zwei Regeln für eine Gruppe: Die erste zeigt os-selected für jedes Betriebssystem außer „Sonstiges", die zweite zeigt os-other-selected nur für „Sonstiges". Die Logik schließt sich gegenseitig aus, sodass es keine Konflikte gibt.
Finales Formular: dynamische Labels und der „Sonstiges"-Zweig
Nun fügen wir alles zusammen. Wir ergänzen Inline-Gruppen, die das Label des Versionsfelds je nach ausgewähltem Betriebssystem (Android, iOS, Linux oder Windows) ändern. Der Label-Text ist direkt in der Gruppe „eingebettet" und erscheint nur, wenn die Bedingung zutrifft:
1 Your name: [text your-name] 2 Your email address: [email your-email] 3 4 What kind of support do you want? 5 [select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"] 6 7 [group technical-support-selected] 8 Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows" "Other"] 9 10 [group os-selected] 11 Please specify your [group os-android inline]Android[/group][group os-ios inline]iOS[/group][group os-linux inline]Linux[/group][group os-windows inline]Windows[/group] version: 12 [text version] 13 [/group] 14 15 [group os-other-selected] 16 Please specify your OS and version. 17 [text other-os "Operating System"][text other-version "Version"] 18 [/group] 19 [/group] 20 21 [group sales-support-selected] 22 Where is your business located? 23 [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"] 24 [/group] 25 26 [textarea comments] 27 28 [submit "Send"]
Der entscheidende Punkt: Inline-Gruppen mit Betriebssystemnamen ([group os-android inline]Android[/group]). Das Attribut inline macht die Gruppe zu einem Inline-Element, sodass der Label-Text nicht in Absätze umbricht. Die Bedingungen für diese Gruppen auf dem Tab Bedingungsfelder:
1 show [technical-support-selected] if [support-type] equals "Technical support" 2 show [sales-support-selected] if [support-type] equals "Sales" 3 show [os-selected] if [operating-system] not equals "" 4 and if [operating-system] not equals "Other" 5 show [os-android] if [operating-system] equals "Android" 6 show [os-ios] if [operating-system] equals "iOS" 7 show [os-linux] if [operating-system] equals "Linux" 8 show [os-windows] if [operating-system] equals "Windows" 9 show [os-other-selected] if [operating-system] equals "Other"
Klicken Sie auf Bedingungen speichern und speichern Sie dann das Formular. Kopieren Sie den Shortcode [contact-form-7 id="..." title="..."] auf eine Seite und testen Sie ihn im Frontend. Der Wechsel zwischen den Zweigen sollte sofort und ohne Seitenneuladen funktionieren.
Personalisierung der E-Mail-Antwort
Bedingungsgruppen funktionieren nicht nur im Formular, sondern auch in der E-Mail-Vorlage. Das bedeutet, der Nutzer kann je nach Auswahl eine andere E-Mail erhalten.
Öffnen Sie den Tab E-Mail im Formular-Editor. Umschließen Sie im Feld Nachrichtentext den Text mit denselben Gruppen, die Sie im Formular verwendet haben:
1 [technical-support-selected] 2 Thank you for submitting your technical support question 3 [/technical-support-selected][sales-support-selected] 4 Thank you for your sales question 5 [/sales-support-selected]
Der schließende Tag [/technical-support-selected] und der öffnende Tag [sales-support-selected] stehen direkt nebeneinander, ohne Leerzeichen; andernfalls erscheint ein zusätzlicher Zeilenumbruch in der E-Mail.
Nun fügen wir eine Tabelle mit den ausgefüllten Feldern hinzu. Innerhalb jeder Gruppe listen wir NUR die relevanten Felder auf:
1 <table> 2 <tr><td>your-name</td><td>[your-name]</td></tr> 3 <tr><td>your-email</td><td>[your-email]</td></tr> 4 <tr><td>support-type</td><td>[support-type]</td></tr> 5 [technical-support-selected] 6 <tr><td>operating-system</td><td>[operating-system]</td></tr> 7 [os-selected] 8 <tr><td>version</td><td>[version]</td></tr> 9 [/os-selected] 10 [os-other-selected] 11 <tr><td>other-os</td><td>[other-os]</td></tr> 12 <tr><td>other-version</td><td>[other-version]</td></tr> 13 [/os-other-selected] 14 [/technical-support-selected] 15 [sales-support-selected] 16 <tr><td>continent</td><td>[continent]</td></tr> 17 [/sales-support-selected] 18 <tr><td>comments</td><td>[comments]</td></tr> 19 </table>
Wenn das Formular abgeschickt wird, entfernt das Plugin alles aus der E-Mail, was zu ausgeblendeten Gruppen gehört. Der technische Support erhält die Zeilen mit Betriebssystem und Version; der Vertrieb erhält nur den Kontinent. Sauber und übersichtlich.
Wenn Sie E-Mails manuell erstellen und das Markup bearbeiten müssen, hat der Plugin-Autor einen Web-Konverter für CF7-Code zu E-Mail-Text erstellt. Fügen Sie den Formularcode ein und erhalten Sie eine Tabellenvorlage für die E-Mail.
⁉️🤔 Häufig gestellte Fragen
Warum sind alle Gruppen sichtbar? Die Bedingungen funktionieren nicht.
Prüfen Sie zuerst die Browser-Konsole (F12) auf JavaScript-Fehler. Conditional Fields lädt sein Skript als letztes, und jeder JS-Fehler davor legt die gesamte Logik lahm. Zweitens muss Ihr Theme in der footer.php
wp_footer()aufrufen. Ohne diesen Hook wird das Skript nicht geladen. Meistens ist ein Plugin-Konflikt der Übeltäter: Deaktivieren Sie alles außer CF7 und Conditional Fields und testen Sie das Formular. Funktioniert es, aktivieren Sie die Plugins nacheinander, bis Sie den Verursacher gefunden haben.
Felder kommen in der E-Mail mit falschen oder leeren Werten an.
Die Namen ALLER Felder im Formular müssen eindeutig sein, auch wenn die Felder in unterschiedlichen Gruppen liegen und nie gleichzeitig sichtbar sind. Das Plugin entfernt beim Absenden KEINE versteckten Felder, es blendet sie nur visuell aus. Zwei Felder mit dem Namen
ain verschiedenen Gruppen bedeuten zwei Werte für denselben Schlüssel, und einer davon gewinnt. Stellen Sie sicher, dass jedes Feld einen eigenen Namen hat.
Wie erstelle ich ein Formular mit Schritten und wiederholbaren Feldern?
Die kostenlose Version kann das nicht; dafür benötigen Sie Conditional Fields Pro. Es bietet mehrstufige Formulare (Aufteilung in Schritte mit „Weiter"-Buttons), wiederholbare Feldblöcke (Repeater) und berechnete Felder. Die Kosten richten sich auf der Website des Entwicklers nach der Anzahl der Seiten. Wenn Ihr Formular einfach ist und keine Repeater hat, ist die kostenlose Version mehr als ausreichend.
Was tun, wenn das Plugin mit meinem Theme kollidiert?
Aktivieren Sie ein Standard-WordPress-Theme (Twenty Twenty-Five) und testen Sie das Formular damit. Funktioniert es, liegt das Problem an Ihrem Theme. Meist hilft es,
wp_footer()manuell aufzurufen oder das Formular auf eine andere Seite ohne schwere Theme-Skripte zu verschieben. Ist das Theme eine Eigenentwicklung, bitten Sie den Entwickler sicherzustellen, dass derwp_footer()-Hook auf allen Seiten mit Formularen aufgerufen wird.
Kann ich bedingte Felder für einen Preisrechner nutzen?
Ja, das ist eines der häufigsten Szenarien. Eine Reihe von Dropdowns (Leistungsart, Umfang, Dringlichkeit) mit bedingten Gruppen für jede Option. Die Pro-Version bietet vollwertige berechnete Felder; wenn Sie Werte direkt im Formular multiplizieren und summieren müssen, schauen Sie in diese Richtung.
Nächste Schritte: vom Prototyp zum produktiven Formular
Wir haben ein Support-Formular mit zwei Logikzweigen, verschachtelten Gruppen und personalisierter E-Mail gebaut. Derselbe Ansatz funktioniert für jedes Szenario mit Bedingungen: verzweigte Umfragen, Rechner, Registrierungen mit unterschiedlichen Rollen.
Worauf Sie vor dem Live-Gang achten sollten:
- Prüfen Sie die Eindeutigkeit ALLER Feldnamen; das ist, noch einmal, die oberste Regel.
- Testen Sie das Formular auf Mobilgeräten: lange Optionslisten und verschachtelte Gruppen können schwächere Geräte ausbremsen.
- Richten Sie einen Spamschutz ein; Contact Form 7 funktioniert gut mit reCAPTCHA v3, Akismet und Turnstile.
Wenn Ihre Formularlogik über „Einblenden/Ausblenden" hinausgeht und Sie Repeater, Berechnungen oder mehrere Schritte benötigen, werfen Sie einen Blick auf Conditional Fields Pro. Für die meisten Aufgaben reicht die kostenlose Version jedoch aus: Sie ist stabil, wird alle paar Wochen aktualisiert und arbeitet mit Contact Form 7 Version 6.1.6 und WordPress 7.0 zusammen.
Sehen Sie sich die Video-Demonstration des gesamten Prozesses von der Installation bis zum fertigen Formular an; sie festigt jeden Schritt mit einem Live-Beispiel:
Ein professionelles Team von Autoren und Redakteuren, das auf die Erstellung hochwertiger Inhalte spezialisiert ist.