Ein Benutzer füllte ein Formular aus, klickte auf „Senden", und nichts geschah. Die Seite lud neu, die Felder wurden geleert, aber ob die E-Mail tatsächlich versendet wurde, bleibt unklar.

Contact Form 7 zeigt nach dem Absenden standardmäßig keine visuellen Benachrichtigungen an. Erfolgs- oder Fehlermeldungen verstecken sich unterhalb des Formulars in kleiner Schrift, ohne Animation, ohne Hervorhebung. Nutzer bemerken sie schlichtweg nicht und verlassen die Seite, ohne zu wissen, ob ihre Nachricht angekommen ist.

Sie können das in 10 Minuten beheben. Alles, was Sie brauchen, ist Contact Form 7 selbst, ein beliebiges Popup-Plugin mit einer JavaScript-API und 25 Zeilen Code. Das Ergebnis: Nach dem Absenden des Formulars erscheint ein großes Fenster sanft über der Seite (grün für Erfolg, rot für Fehler) und verschwindet nach einem festgelegten Intervall automatisch. Kein Neuladen der Seite, keine verlorenen Leads.

💡 Kurzer Überblick:

• Welche DOM-Events Contact Form 7 auslöst und wie sich moderne Bezeichnungen von veralteten unterscheiden
• Wie Sie Erfolgs- und Fehler-Popups in einem beliebigen WordPress-Popup-Plugin erstellen
• CSS-Stile für Popups: Overlay, Animation, z-index
• Ein einsatzbereites jQuery-Skript: Bindung von CF7-Events an das Öffnen und automatische Schließen von Popups
• Eine moderne Alternative mit addEventListener ohne jQuery
• Konfiguration der Anzeigedauer getrennt für Erfolg und Fehler

Welche DOM-Events Contact Form 7 auslöst

Contact Form 7 erzeugt in jeder Phase der Formularverarbeitung eigene DOM-Events. Hier die vollständige Liste aus der offiziellen Dokumentation:

Für Popups nach dem Absenden benötigen Sie zwei Events: wpcf7mailsent (Erfolg) und wpcf7invalid (Validierungsfehler). Sie könnten auch wpcf7spam für ein separates Warnfenster nutzen, in der Praxis reichen jedoch die ersten beiden aus.

Wichtiger Hinweis: In älteren Anleitungen und Code-Snippets werden die Events mit einem Doppelpunkt geschrieben. Zum Beispiel wpcf7:mailsent und wpcf7:invalid. Diese Syntax wurde in jQuery-Hooks früherer CF7-Versionen verwendet. Sie funktioniert heute noch aus Gründen der Abwärtskompatibilität, aber die kanonischen Bezeichnungen enthalten keinen Doppelpunkt. Im folgenden Code stelle ich beide Varianten bereit: die moderne mit addEventListener und die jQuery-Variante für Projekte, in denen jQuery bereits geladen ist.

Das event.detail-Objekt enthält nützliche Eigenschaften: contactFormId (die ID des jeweiligen Formulars), pluginVersion (CF7-Version), inputs (Array der eingegebenen Daten). Wenn Sie mehrere Formulare auf einer Seite haben, filtern Sie nach contactFormId, damit sich das Popup nur für das vorgesehene Formular öffnet.

Schritt 1: Popup-Plugin auswählen und Fenster erstellen

Sie benötigen ein Popup-Plugin mit einer JavaScript-API, damit das Fenster programmgesteuert aus einem Skript geöffnet werden kann. Zwei bewährte kostenlose Optionen aus dem WordPress.org-Plugin-Verzeichnis:

• Popup Maker, über 700.000 aktive Installationen, Bewertung 4,9/5. Aufruf: PUM.open(popup_id). Leistungsstarker kostenloser Kern, Seiten-Targeting, Zeit- und Scroll-Trigger, Integration mit gängigen Formularen. Die größte Community, in der Sie Antworten auf jede Frage finden.
• WP Popups, über 20.000 aktive Installationen. Aufruf: SPU.show(popup_id). Visueller, auf Gutenberg basierender Editor, Anzeigefilter, Contact Form 7-Unterstützung ab Werk. Leichtgewichtig und schnell.

Erstellen Sie zwei Popups: eines für die erfolgreiche Übermittlung, ein weiteres für Fehler. Platzieren Sie in jedem ein Bild, Text und optional einen „Schließen"-Button. Notieren Sie sich die ID jedes Fensters, da Sie diese in Schritt 3 im Skript benötigen. Die folgenden Beispiele verwenden die IDs 1068 (Erfolg) und 1065 (Fehler); Ihre werden abweichen.

So sehen die Popups mit konfigurierten Stilen aus:

Popup für erfolgreiche Übermittlung: grüner Hintergrund, Bestätigungs-Icon und Text.

Fehlerfenster: roter Hintergrund, Warn-Icon und die Bitte, die eingegebenen Daten zu prüfen.

Und hier sind die Bilder zum Einfügen in die Popups:

Sie können diese Bilder durch Ihre eigenen ersetzen, indem Sie in den Einstellungen des Popup-Plugins andere Pfade angeben.

Schritt 2: CSS-Stile für Popups

Popup-Plugins exportieren nicht immer benutzerdefiniertes CSS. Wenn die Stile nach dem Erstellen der Fenster nicht angewendet werden, fügen Sie sie manuell hinzu: Plugin-Einstellungen → Custom CSS, oder Appearance → Customize → Additional CSS.

Stile für das Erfolgs-Popup (grüner Overlay, maximaler z-index):

1
div#spu-bg-1068 {
2
    opacity: 0.6;
3
    background-color: green;
4
    z-index: 9999999;
5
}
6
div#spu-1068 {
7
    z-index: 99999999;
8
}

Stile für das Fehler-Popup (roter Overlay):

1
div#spu-bg-1065 {
2
    opacity: 0.6;
3
    background-color: #F44336;
4
    z-index: 9999999;
5
}
6
div#spu-1065 {
7
    z-index: 99999999;
8
}

Was hier passiert: #spu-bg-N ist der halbtransparente Hintergrund (Overlay). #spu-N ist das Fenster selbst. Der hohe z-index stellt sicher, dass das Popup alle Seitenelemente überdeckt, einschließlich der Admin-Leiste.

Wenn Sie ein anderes Popup-Plugin verwenden, ersetzen Sie die Selektoren. Popup Maker generiert #pum-N und .pum-overlay[data-popmake*="N"]. WP Popups verwendet eigene Präfixe; prüfen Sie mit dem Browser-Inspektor (F12) die tatsächlichen IDs Ihrer Fenster.

Schritt 3: jQuery-Skript zur Verknüpfung von CF7 und Popups

Das Skript kann auf drei Arten eingebunden werden: in der functions.php Ihres Child-Themes, über das Code Snippets-Plugin oder im benutzerdefinierten JavaScript-Bereich Ihres Themes. Erstellen Sie vor der Bearbeitung der functions.php ein Backup; ein Syntaxfehler legt die Seite lahm.

Nachfolgend der vollständige Code mit Kommentaren. Er fängt zwei Contact Form 7-Ereignisse ab und ruft die API des Popup-Plugins auf:

1
// START: Contact Form 7 + Popups — popups for success and error
2
jQuery(document).ready(function($) {
3
 
4
    // Popup for validation ERROR (fields empty or invalid)
5
    $(".wpcf7").on('wpcf7:invalid', function(event) {
6
        SPU.show(1065);   // Error popup ID — replace with yours
7
        setTimeout(function() {
8
            $('div#spu-1065, div#spu-bg-1065').fadeOut(600, 'swing');
9
        }, 5500);          // auto-close after 5.5 seconds
10
    });
11
 
12
    // Popup for SUCCESSFUL submission
13
    $(".wpcf7").on('wpcf7:mailsent', function(event) {
14
        SPU.show(1068);   // Success popup ID — replace with yours
15
        setTimeout(function() {
16
            $('div#spu-1068, div#spu-bg-1068').fadeOut(600, 'swing');
17
        }, 3500);          // auto-close after 3.5 seconds
18
    });
19
 
20
});
21
// END: Contact Form 7 + Popups

Was Sie für Ihr Projekt ersetzen müssen:

• SPU.show(N) durch die Methode Ihres Popup-Plugins. Für Popup Maker: PUM.open(N).
• 1065 und 1068 durch Ihre Popup-IDs. Sie finden diese im Admin-Bereich des Plugins.
• Zeit in setTimeout (Millisekunden). 5500 = 5,5 Sekunden, 3500 = 3,5 Sekunden. Passen Sie die Werte nach Ihren Wünschen an.
• Selektoren div#spu-N und div#spu-bg-N; ersetzen Sie diese, falls Ihr Plugin andere IDs generiert.

Moderne Alternative ohne jQuery. Wenn Ihr Theme jQuery nicht lädt oder Sie eine schlankere Variante bevorzugen, nutzen Sie native CF7-Ereignisse per addEventListener:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    // event.detail.contactFormId — ID of specific form (if there are multiple)
3
    PUM.open(1068);
4
    setTimeout(function() {
5
        document.querySelector('#pum-1068').style.display = 'none';
6
        document.querySelector('.pum-overlay[data-popmake*="1068"]').style.display = 'none';
7
    }, 3500);
8
}, false);
9
 
10
document.addEventListener('wpcf7invalid', function(event) {
11
    PUM.open(1065);
12
    setTimeout(function() {
13
        document.querySelector('#pum-1065').style.display = 'none';
14
        document.querySelector('.pum-overlay[data-popmake*="1065"]').style.display = 'none';
15
    }, 5500);
16
}, false);

Diese Variante funktioniert mit Popup Maker und benötigt kein jQuery. Die Ereignisse wpcf7mailsent und wpcf7invalid (ohne Doppelpunkt) sind der moderne Standard.

Wenn Sie mehrere Formulare auf einer Seite haben, filtern Sie nach contactFormId:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    if ('123' === event.detail.contactFormId) {
3
        PUM.open(1068);  // popup only for form ID=123
4
    }
5
}, false);

Konfiguration der automatischen Schließzeit

Das Intervall für jedes Popup wird separat über das zweite Argument von setTimeout in Millisekunden festgelegt. Praktische Empfehlungen:

• Erfolg: 3 bis 5 Sekunden. Der Nutzer hat „Gesendet" bereits gelesen, ein längeres Anzeigen ist daher nicht nötig.
• Fehler: 5 bis 7 Sekunden. Die Person braucht Zeit, um das Problem zu erfassen, die Meldung erneut zu lesen und zu verstehen, welche Felder korrigiert werden müssen.
• Spam (wpcf7spam): 8 bis 10 Sekunden. Geben Sie ausreichend Zeit, um den Warnhinweis vollständig zu lesen, ohne die Seite komplett zu blockieren.

Der Wert 600 in fadeOut(600, 'swing') ist die Dauer der Ausblendanimation in Millisekunden. Weniger als 400 wirkt ruckartig, mehr als 800 fühlt sich langsam an. 600 ist der optimale Mittelwert.

Wenn Sie mehrere Popups haben und unterschiedliche Dauern für verschiedene Formulare wünschen, packen Sie den setTimeout-Aufruf in eine contactFormId-Prüfung, wie im obigen Beispiel gezeigt.

Schritt-für-Schritt-Videoanleitung: Einrichtung eines Popups nach dem Absenden von Contact Form 7 von Grund auf. Wenn Sie neu bei WordPress sind oder lieber zuschauen als Code zu lesen, decken diese 8 Minuten Bildschirmzeit die Hälfte des Artikels ab.

⁉️🤔 Häufig gestellte Fragen

Das Popup öffnet sich nach dem Absenden des Formulars nicht. Woran liegt das?

Die häufigste Ursache: Die Popup-ID stimmt nicht mit der im Skript angegebenen überein. Gehen Sie in das Admin-Panel Ihres Popup-Plugins, ermitteln Sie die tatsächliche Fenster-ID und setzen Sie diese in den Aufruf SPU.show(N) oder PUM.open(N) ein. Die zweite Ursache: jQuery ist nicht geladen oder es gibt einen Konflikt. Prüfen Sie die Browser-Konsole (F12 → Konsole) auf Fehler. Popup-Plugins weisen Fenstern beim Klonen oder Importieren neue Nummern zu, während die alte ID aus dem Snippet erhalten bleibt; überprüfen Sie die Nummern nach einem Import daher immer.

Muss ich ein separates Popup-Plugin installieren? Kann ich nicht einfach ein Alert verwenden?

Technisch ja: Ersetzen Sie SPU.show(N) durch alert('Thank you!'), und es erscheint eine Benachrichtigung. Aber Alert blockiert die Seite, wirkt fremd und verärgert Besucher. Ein individuelles Popup mit Ihrem Design, Icon und einer sanften Animation ist Teil der Website und kein Browser-Systemdialog. Nach unserer Erfahrung aus mehreren Projekten reduziert der Ersatz von Alert durch ein gebrandetes Popup die unmittelbare Absprungrate spürbar.

Der Code funktioniert nur für ein Formular. Wie bringe ich ihn für mehrere Formulare zum Laufen?

Nutzen Sie die Filterung über event.detail.contactFormId. Für die jQuery-Variante packen Sie den Aufruf in eine Prüfung: if (event.detail.contactFormId === 123) { SPU.show(1068); }. Für reines JavaScript finden Sie ein Beispiel mit einer Bedingung in Schritt 3.

Was tun, wenn jQuery auf der Website nicht geladen ist?

Verwenden Sie die addEventListener-Variante aus Schritt 3. Sie benötigt kein jQuery und funktioniert in allen modernen Browsern. Die einzige Nuance: Das Schließen des Popups per nativem DOM erfolgt durch manuelles Ausblenden des Elements, da die Methode fadeOut nicht verfügbar ist. Alternativ können Sie eine CSS-Klasse mit transition hinzufügen und umschalten.

Kann ich ein Popup für alle Formulare der Website verwenden?

Ja, sofern der Benachrichtigungstext universell ist. Erstellen Sie ein Erfolgs-Popup und ein Fehler-Popup und öffnen Sie diese für alle wpcf7mailsent- und wpcf7invalid-Ereignisse ohne Filterung nach contactFormId. Wenn Formulare auf verschiedenen Seiten jedoch unterschiedliche Kontexte haben, ist es besser, separate Fenster anzulegen. „Beratungsanfrage erhalten" und „Abonnement bestätigt" sehen unterschiedlich aus.

Popup Maker oder WP Popups: Welches Plugin für Ihr Projekt?

Die Entscheidung läuft auf drei Szenarien hinaus:

• Maximale Funktionen und Integrationen gefragt? Greifen Sie zu Popup Maker. Seiten-Targeting, Zeit- und Scroll-Trigger, Integration mit Dutzenden Formular-Plugins, große Community. Der kostenlose Kern deckt 90% der Anwendungsfälle ab.
• Einfachheit und ein visueller Gutenberg-Editor gewünscht? Ihre Wahl ist WP Popups. Moderne Oberfläche, schnelle Einrichtung, weniger Overhead. Funktioniert standardmäßig mit Contact Form 7.
• Benötigen Sie ein Popup mit einem Contact-Form-7-Formular darin? Das ist ein anderes Szenario (keine Benachrichtigungen nach dem Absenden, sondern ein Formular in einem modalen Fenster, ausgelöst durch einen Button-Klick). Dafür gibt es das spezialisierte WPB Popup for Contact Form 7, das ein CF7-Formular in einem Popup öffnet, anstatt auf dessen Absendung zu reagieren.

Beide Benachrichtigungs-Plugins sind kostenlos und im WordPress.org-Verzeichnis verfügbar. Wählen Sie das, was besser zu Ihrem Stack passt, und ersetzen Sie den API-Aufruf im Skript aus Schritt 3 entsprechend. Das Thema Popup selbst lässt sich unbegrenzt vertiefen: A/B-Tests von Benachrichtigungstexten, Verzögerungen basierend auf der Lesezeit, unterschiedliche Fenster für verschiedene Formulare. Aber die Grundlage (CF7-Event + Popup-Aufruf + automatisches Schließen) deckt die große Mehrheit der realen Aufgaben auf WordPress-Websites ab.