💡 So richten Sie ein universelles CF7-Formular mit einem versteckten Feld ein

• Installieren Sie das Plugin Dynamic Text Extension und aktivieren Sie es im Bereich Plugins
• Fügen Sie Ihrem Formular einen dynamischen versteckten Tag mit der Kennung id:HIDDENINPUT hinzu, um den Blocktitel zu übergeben
• Erstellen Sie ein Popup in Popup Maker, fügen Sie den Formular-Shortcode ein und konfigurieren Sie den Auslöser „Click Open"
• Binden Sie ein jQuery-Skript ein, das den Blocktitel erfasst und in das versteckte Feld einfügt
• Fügen Sie [dynamichidden-120] in die E-Mail-Vorlage ein, damit Sie sehen, aus welchem Block die Einreichung stammt
• Testen Sie die Übermittlung: Fehler-Popup bei leerem Formular und Erfolgs-Popup nach erfolgreicher Übermittlung

Schritt 1: Plugin für versteckte Felder, Dynamic Text Extension

Das Basis-Plugin Contact Form 7 kann von Haus aus keine versteckten Felder hinzufügen. Bis vor Kurzem übernahm das Plugin Contact Form 7** Modules** diese Aufgabe, es wurde jedoch seit 2017 nicht mehr aktualisiert und nicht mit aktuellen WordPress-Versionen getestet.

Der aktuelle Ersatz ist Contact Form 7 - Dynamic Text Extension (DTX). Dieses Plugin wird aktiv gepflegt (letzte Aktualisierung Juni 2026), funktioniert mit WordPress 7.0 und kann deutlich mehr als nur versteckte Felder: dynamische Werte aus URLs, Cookies, Post-Meta-Feldern, aktuellen Benutzerdaten und benutzerdefinierten Shortcodes.

Installieren Sie das Plugin über Plugins → Neues Plugin installieren, suchen Sie nach „Dynamic Text Extension", klicken Sie auf „Jetzt installieren" und aktivieren Sie es. Im Tag-Generator-Dropdown des Contact-Form-7-Formulareditors erscheinen zwei neue Schaltflächen: dynamic text und dynamic hidden.

Für unser Szenario benötigen wir dynamic hidden. Erstellen Sie ein verstecktes Feld mit einer Kennung, über die das jQuery-Skript den Blocktitel übergibt:

1
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Falls DTX aus irgendeinem Grund nicht Ihren Anforderungen entspricht, können Sie weiterhin das alte Contact Form 7 Modules verwenden: Es ist für einfache versteckte Felder nach wie vor funktionsfähig, wurde jedoch nicht mit aktuellen WordPress-Versionen getestet und seit 2017 nicht mehr aktualisiert. Der Shortcode sähe so aus: [hidden hidden-120 id:HIDDENINPUT].

Schritt 2: Formular und E-Mail-Vorlage

Das Formular setzt sich aus den üblichen CF7-Feldern plus unserem versteckten Feld zusammen. Hier ist eine funktionierende Vorlage; kopieren Sie sie in den Formulareditor:

1
[text* text-59 placeholder "Your Name*"]
2
[tel* tel-116 placeholder "Phone*"]
3
[email Email placeholder "Email"]
4
[recaptcha]
5
[submit "Send"]
6
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Die Felder text-59, tel-116 und Email sind Pflichtfelder (Sternchen nach dem Typ). reCAPTCHA schützt vor Spam. Der Senden-Button und das versteckte Feld vervollständigen das Formular.

Konfigurieren Sie nun die E-Mail-Vorlage im Reiter „Mail" des Formulareditors. Entscheidend ist, dass Sie [dynamichidden-120] (bzw. [hidden-120] bei CF7-Modulen) in den E-Mail-Text einfügen, damit Sie sehen, aus welchem Block die Anfrage stammt:

An: moc.niamodruoy@liame-ruoy

Von: [Email]

Betreff: Website-Anfrage, [dynamichidden-120]

E-Mail-Text:

1
Selected product/service: [dynamichidden-120]
2
---
3
Name: [text-59]
4
Phone: [tel-116]
5
Email: [Email]
6
---
7
Message sent from page: [_url]

Aktivieren Sie unbedingt die Checkbox „HTML-Inhaltstyp verwenden", andernfalls geht die Formatierung verloren. Für eine zuverlässige E-Mail-Zustellung richten Sie SMTP ein (über ein beliebiges SMTP-Plugin: Post SMTP, WP Mail SMTP oder Google Gmail API); ohne diese Maßnahme landen E-Mails von CF7 häufig im Spam.

Schritt 3: Ein Popup in Popup Maker erstellen

Das alte Plugin Popups - WordPress Popup wurde im Juli 2022 aufgrund einer Sicherheitslücke geschlossen und steht nicht mehr zur Installation bereit. Der moderne Nachfolger ist Popup Maker: über 780.000 aktive Installationen, CF7-Integration ab Werk sowie Dutzende Auslöser und Targeting-Regeln.

Installieren Sie Popup Maker über Plugins → Neues Plugin hinzufügen und gehen Sie dann zu Popup Maker → Popup erstellen. Vergeben Sie einen Namen für das Popup und fügen Sie den Formular-Shortcode im Inhaltseditor ein:

1
[contact-form-7 id="123" title="Universal Form"]

Die Formular-ID finden Sie in der CF7-Formularliste (Spalte „Shortcode"). Wählen Sie in den Popup-Einstellungen rechts im Block Auslöser die Option Klick-Öffnen und geben Sie den CSS-Selektor des Buttons an, der das Popup öffnen soll (zum Beispiel .jet-button-order). Das entspricht der „Manuellen Auslösung" des alten Popups-Plugins.

Ermitteln Sie nun die ID des von Ihnen erstellten Popups. Öffnen Sie das Popup im Editor und sehen Sie sich die Browser-URL an: post.php?post=4197&action=edit; die Zahl nach post= ist die ID (in diesem Beispiel 4197). Sie benötigen diese für das Skript im nächsten Schritt.

Schritt 4: jQuery-Skript zum Erfassen des Blocktitels

Das Skript löst die Hauptaufgabe: Beim Klick auf einen Button innerhalb eines Blocks erfasst es den Text des Titels dieses Blocks und fügt ihn sowohl in den Popup-Titel als auch in das versteckte Feld des Formulars ein. Sehen wir uns das im Detail an.

Weisen Sie zunächst allen Blöcken, in denen Sie den Titel finden müssen, eine gemeinsame CSS-Klasse zu (zum Beispiel ForContactForm7HiddenInput). In Elementor geschieht das über „Erweitert → CSS-Klassen" für den umschließenden Abschnitt.

Das Skript selbst binden Sie über die functions.php des Child-Themes oder das Code Snippets-Plugin ein (sicherer, geht bei Theme-Updates nicht verloren):

1
add_action('wp_enqueue_scripts', function () {
2
    wp_enqueue_script(
3
        'cf7-universal-form',
4
        get_stylesheet_directory_uri() . '/cf7-universal-form.js',
5
        ['jquery'],
6
        '1.0',
7
        true
8
    );
9
});

Inhalt der Datei cf7-universal-form.js:

1
jQuery(document).ready(function ($) {
2
 
3
    // Variable for storing the block title
4
    var blockTitle = '';
5
 
6
    // Capture the title text on button click
7
    $('.ForContactForm7HiddenInput .jet-button-order').on('click', function () {
8
        blockTitle = $(this)
9
            .closest('.ForContactForm7HiddenInput')
10
            .find('h3.elementor-heading-title')
11
            .text()
12
            .trim();
13
    });
14
 
15
    // Wait for popup to open via MutationObserver
16
    var popupId = '4197'; // Your popup ID from Popup Maker
17
    var observer = new MutationObserver(function (mutations) {
18
        mutations.forEach(function (mutation) {
19
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
20
                var $popup = $('#popmake-' + popupId);
21
                if ($popup.hasClass('active') && blockTitle) {
22
                    // Insert the title into the popup
23
                    $popup.find('.popup-title').text(blockTitle);
24
                    // Insert the title into the form's hidden field
25
                    $('#HIDDENINPUT').val(blockTitle);
26
                }
27
            }
28
        });
29
    });
30
 
31
    // Start observing the popup
32
    var $popupContainer = $('#popmake-' + popupId);
33
    if ($popupContainer.length) {
34
        observer.observe($popupContainer[0], {
35
            attributes: true,
36
            attributeFilter: ['class']
37
        });
38
    }
39
 
40
});

Was hier geschieht:

• Erfassen des Titels: Beim Klick auf den Button mit der Klasse .jet-button-order traversiert das Skript im DOM nach oben zum übergeordneten Block .ForContactForm7HiddenInput, findet darin das h3.elementor-heading-title und speichert dessen Text in der Variable blockTitle.
• Überwachung des Popups: Anstelle des veralteten attrchange.js (dessen CDN rawgit.com abgeschaltet ist) verwendet das Skript den nativen MutationObserver, der auf Klassenänderungen am Popup-Maker-Container achtet. Sobald die Klasse active erscheint (Popup ist geöffnet), fügt das Skript den gespeicherten Titel in die Popup-Überschrift und in das versteckte Feld #HIDDENINPUT ein.
• Selektoren: .jet-button-order ist die Button-Klasse von Elementor JetElements; ersetzen Sie sie durch Ihre eigene Button-Klasse. Popup Maker rendert mit der ID #popmake-{ID}, daher verwendet der Code #popmake-4197; ersetzen Sie 4197 durch die ID Ihres Popups.

Unterhalb des jQuery-Blocks sehen Sie ein visuelles Beispiel, wie eine Seite mit mehreren Blöcken und „Jetzt bestellen"-Buttons aussieht:

Nach dem Klick auf den Button des ersten Blocks erfasst das Skript den Text „Roller Blinds", fügt ihn in den Popup-Titel und in das versteckte Feld des Formulars ein:

Dasselbe gilt für alle fünf Blöcke: Der Titel ändert sich dynamisch, während das Formular unverändert bleibt.

Schritt 5: Popups für erfolgreiche Übermittlung und Fehler

Popup Maker erlaubt es Ihnen, beliebig viele Popups zu erstellen. Für Statusmeldungen (Erfolg / Fehler) erstellen Sie zwei weitere Popups analog zu Schritt 3. Sie müssen diese nicht manuell mit Triggern verknüpfen; CF7 steuert sie über JavaScript-Ereignisse.

Fehler-Popup erscheint, wenn die Formularvalidierung fehlschlägt. Inhalt:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/flag.svg" alt="Error icon" width="177" height="161">
3
</p>
4
<p style="text-align: center;">
5
    The form has errors. Check the messages under the input fields and try again.
6
</p>

Erfolgs-Popup erscheint nach erfolgreicher Übermittlung. Inhalt:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/like.svg" alt="Successful submission icon" width="177" height="161">
3
</p>
4
<p style="text-align: center; padding-top: 15px;">
5
    Done! Your message has been sent successfully. We will contact you shortly.
6
</p>

Diese SVG-Icons wurden im alten Popup verwendet, um den Übermittlungsstatus anzuzeigen. Sie können sie durch eigene ersetzen oder unverändert lassen; sie sind neutral und an kein bestimmtes Plugin gebunden.

Binden Sie die Status-Popups über CF7-Ereignisse ein. Fügen Sie diesen Code in dieselbe JS-Datei cf7-universal-form.js nach dem Hauptskript ein:

1
// Show popup on CF7 validation error
2
document.addEventListener('wpcf7invalid', function () {
3
    $('#popmake-1065').popmake('open');
4
}, false);
5
 
6
// Show popup on successful submission
7
document.addEventListener('wpcf7mailsent', function () {
8
    $('#popmake-1068').popmake('open');
9
}, false);

Ersetzen Sie 1065 und 1068 durch die tatsächlichen IDs Ihrer Status-Popups aus Popup Maker.

Grundlegende CSS-Stile für Status-Popups binden Sie über Design → Customizer → Zusätzliches CSS oder in der Theme-Datei ein:

1
/* Error popup */
2
div#popmake-1065 {
3
    z-index: 99999999;
4
}
5
div#popmake-1065 .popmake-close {
6
    font-size: 30px;
7
    color: #9e9e9e;
8
}
9
 
10
/* Success popup */
11
div#popmake-1068 {
12
    z-index: 99999999;
13
}
14
div#popmake-1068 .popmake-close {
15
    font-size: 30px;
16
    color: #9e9e9e;
17
}

Schritt 6: Testen und Debugging

Bevor Sie die Lösung auf einer Produktivseite einsetzen, prüfen Sie jedes Szenario:

• Klicken auf verschiedene Blöcke: Der Titel im Popup und im versteckten Feld ändert sich korrekt für jeden Block.
• Leeres Formular: Das Absenden ohne Ausfüllen der Pflichtfelder zeigt das Fehler-Popup.
• Vollständige Übermittlung: Die E-Mail kommt an und das versteckte Feld enthält den korrekten Blocktitel.
• Erneutes Öffnen: Nach dem Schließen und erneuten Öffnen des Popups wird der Titel aktualisiert.

Wenn der Titel nicht eingefügt wird, prüfen Sie in der Browser-Konsole (F12 → Konsole), ob:

• Der jQuery-Selektor .ForContactForm7HiddenInput h3.elementor-heading-title ein Element auf der Seite findet;
• Die Variable popupId mit der tatsächlichen Popup-ID im Adminbereich übereinstimmt;
• Die Button-Klasse (.jet-button-order) mit der tatsächlichen Klasse auf der Seite übereinstimmt.

Die Selektoren im Code sind an Elementor + JetElements gebunden. Wenn Sie einen anderen Builder (Gutenberg, Bricks, Oxygen) verwenden, ersetzen Sie die Klassen und die Titelstruktur durch Ihre eigenen. Das Prinzip bleibt dasselbe: Button → übergeordneter Block → Titel → verstecktes Feld.

Sehen Sie sich dieses Video für eine visuelle Demonstration der Einrichtung eines Popup-Formulars mit Contact Form 7 an:

⁉️🤔 Häufig gestellte Fragen

Kann ich auf ein zusätzliches Plugin für das versteckte Feld verzichten?

Das grundlegende CF7 unterstützt keine versteckten Felder. DTX ist eine minimale und aktiv gepflegte Lösung. Theoretisch könnten Sie <input type="hidden"> per JavaScript direkt in das Formular-DOM einfügen, aber das ist weniger zuverlässig: Das Skript wird möglicherweise nicht vor dem Absenden ausgeführt und der Wert erscheint nicht in der E-Mail, wenn er nicht mit einem spezifischen CF7-Tag verknüpft ist. Verwenden Sie DTX oder die alten Contact Form 7 Modules; beide fügen Unterstützung für versteckte Felder auf Tag-Ebene hinzu und der Wert erscheint garantiert in der E-Mail.

Warum ist Popup Maker besser als das alte Popups-Plugin?

Popup Maker wird aktiv aktualisiert (letzte Version April 2026), hat eine integrierte Integration mit CF7 und anderen Formularen und unterstützt Dutzende von Auslösern und Targeting-Regeln. Das alte Popups wurde im Juli 2022 von WordPress.org offiziell wegen einer ungepatchten Sicherheitslücke geschlossen und sollte nicht auf Live-Seiten verwendet werden. Popup Maker ist sein direkter und sicherer Nachfolger mit über 780.000 aktiven Installationen. Entscheidender Vorteil: integrierte CF7-Integration (die Events wpcf7mailsent / wpcf7invalid funktionieren ohne zusätzlichen Code) und ein visueller Popup-Editor.

Warum MutationObserver anstelle von attrchange.js verwenden?

Die Bibliothek attrchange.js wurde über rawgit.com verteilt, das 2020 abgeschaltet wurde. Das GitHub-Repository selbst existiert noch, aber das Einbinden des Skripts von dort ist umständlich. MutationObserver ist eine native Browser-API, die seit 2014 von allen modernen Browsern unterstützt wird, keine externen Abhängigkeiten benötigt und dieselbe Aufgabe löst: das Verfolgen von Attributänderungen im DOM. Weniger HTTP-Anfragen, keine Abhängigkeitsaktualisierungen nötig.

Was tun, wenn der Titel im versteckten Feld in der E-Mail als verstümmelte kyrillische Zeichen erscheint?

Prüfen Sie die Kodierung in den Einstellungen von CF7 und dem SMTP-Plugin; sie sollte UTF-8 sein. Stellen Sie sicher, dass der E-Mail-Betreff keine beschädigten Zeichen enthält. Wenn Sie SMTP über die Gmail-API verwenden, könnte das Problem bei der Kodierung des E-Mail-Headers liegen; prüfen Sie die Einstellungen des Post SMTP- oder WP Mail SMTP-Plugins. In der Regel liegt die Ursache des Problems beim Mailserver, nicht beim Skript. Prüfen Sie: (1) wp-config.php, die Zeile define('DB_CHARSET', 'utf8'); ohne zusätzliche Leerzeichen vor <?php; (2) SMTP-Plugin-Einstellungen, E-Mail-Kodierung UTF-8; (3) CF7-E-Mail-Betreff, entfernen Sie nicht standardmäßige Zeichen, belassen Sie nur [dynamichidden-120] ohne zusätzliche Klammern oder Anführungszeichen.

Kann ich diesen Ansatz für mehrere verschiedene Formulare auf einer Seite verwenden?

Ja. Erstellen Sie in CF7 ein separates Formular für jeden Blocktyp und ein separates Popup in Popup Maker. Duplizieren Sie im Skript die Logik für jedes Paar „Block-Selektor → Popup-ID → ID des versteckten Feldes". Alternativ verwenden Sie ein Popup und ein Formular mit verschiedenen Blockklassen; das versteckte Feld erhält den Titel des jeweils angeklickten Blocks, ohne zusätzliche Konfiguration.

Ein universelles Formular für alle Blöcke auf der Seite ist der Kerngedanke dieser Lösung. Für völlig unterschiedliche Blocktypen (Produkte vs. Dienstleistungen) erstellen Sie zwei Sets: product_form + product_popup und service_form + service_popup. Im Skript duplizieren Sie einfach den Codeblock mit unterschiedlichen Selektoren.

Welcher Plugin-Stack ist 2026 zu verwenden

Ein universelles Formular mit einem versteckten Feld ist eine bewährte Lösung für Landingpages mit Dutzenden ähnlicher Blöcke. Anstelle von 30 separaten Formularen konfigurieren Sie eines und das Skript fügt den Blocktitel automatisch ein. Hier ist der Stack, den wir 2026 empfehlen:

• Contact Form 7: Über 10 Millionen Installationen, leichtgewichtig, kostenlos.
• Dynamic Text Extension (DTX): Versteckte und dynamische Felder, aktive Unterstützung.
• Popup Maker: Popups mit Klick-Auslösern und integrierter CF7-Integration.
• MutationObserver (natives JS): Verfolgen des Popup-Öffnens ohne externe Bibliotheken.

Wenn Sie einen Blocktitel erfassen und an ein Formular übergeben müssen, verwenden Sie diesen Stack. In der Praxis funktioniert er einwandfrei und die Einrichtung dauert selbst mit grundlegenden WordPress-Kenntnissen etwa eine Stunde.

🔗 Dynamic Text Extension auf WordPress.org | 🔗 Popup Maker auf WordPress.org