Skip to content

Alles für WordPress, Webentwicklung — und mehr

🐛 Contact Form 7 im Elementor-Popup: Warum das Formular die Seite neu lädt und wie man es behebt
WordPress-PluginsWebentwicklung
9 Min1,798 Wörter

🐛 Contact Form 7 im Elementor-Popup: Warum das Formular die Seite neu lädt und wie man es behebt

Sie fügen ein Kontaktformular über Contact Form 7 in einem Elementor Pro-Popup ein. Der Nutzer füllt die Felder aus, klickt auf „Absenden", und die gesamte Seite lädt neu.

Keine Fehlermeldungen. Keine Bestätigung der Übermittlung. Nur ein Reload und ein verlorener Lead.

Dies ist ein bekannter Konflikt: CF7 setzt auf AJAX-Übermittlung, aber innerhalb eines dynamisch geladenen Popups hat sein JavaScript keine Zeit, sich an das Formular zu binden. Infolgedessen führt der Browser einen standardmäßigen HTML-Submit aus, genau jenen, der den Reload verursacht.

Das Problem existiert seit Jahren, wird aber mit nur zwei Codezeilen behoben. Nachfolgend zwei funktionierende Lösungen: eine moderne (sauberer und zuverlässiger) und eine Alternative von GitHub, plus optionale Erweiterungen und eine Checkliste zur Fehlersuche.

💡 Kurzübersicht:

  • Ursache: CF7 initialisiert sich beim Seitenaufruf, aber das Popup mit dem Formular erscheint später, sodass das Skript nichts von dessen Inhalt weiß
  • Lösung 1: CF7 erneut initialisieren, wenn das elementor/popup/show-Ereignis ausgelöst wird; JavaScript wartet, bis das Popup geöffnet ist, und greift das Formular auf
  • Lösung 2: Klicks auf den Button, der das Popup öffnet, mit einer Verzögerung für die Animation verfolgen; diese Methode stammt aus einer GitHub-Diskussion zu Elementor
  • Optional: Formular beim erneuten Öffnen zurücksetzen und das Popup nach erfolgreicher Übermittlung automatisch schließen
  • Checkliste zur Fehlersuche: Browser-Konsole, jQuery-Konflikte, Caching-Plugins

Warum CF7 speziell in einem Popup versagt

Programmierer behebt einen Contact Form 7-Fehler in WordPress

Contact Form 7 basiert auf AJAX: Das Formular wird ohne Seitenneuladung übermittelt, die Feldvalidierung erfolgt in Echtzeit und Fehler- oder Erfolgsmeldungen erscheinen sofort. Dieser gesamte Mechanismus bindet sich jedoch beim Seitenaufruf über einen Aufruf von wpcf7.init() an das DOM.

Elementor Pro lädt Popup-Inhalte dynamisch, nach dem DOMContentLoaded-Ereignis. Wenn ein Nutzer auf einen Button klickt und das Popup öffnet, wird dessen HTML in das Dokument eingefügt, aber CF7 weiß nichts davon. Das Formular im Popup bleibt nicht initialisiert.

Was dann passiert: Ohne aktiven AJAX-Handler führt der Browser eine standardmäßige HTML-Formularübermittlung durch. Das action-Attribut wird ausgelöst und die Seite lädt neu. Das Popup schließt sich naturgemäß (sein Zustand wird bei der Navigation zurückgesetzt). Der Nutzer sieht einen Reload und verlässt die Seite.

Viele Entwickler versuchen, die Symptome zu behandeln: Sie blockieren das Schließen des Popups mit event.stopPropagation(), überschreiben interne Funktionen von Elementor oder unterbinden die Formularübermittlung mit e.preventDefault(). Keine dieser Methoden adressiert die eigentliche Ursache (die fehlende CF7-Initialisierung). Einige beschädigen sogar die Popup-Animationen oder Elementor selbst auf der gesamten Website.

Es gibt nur eine zuverlässige Lösung: Warten, bis das Popup geöffnet ist, und explizit wpcf7.init() für jedes darin enthaltene Formular aufrufen.

Lösung 1: Neuinitialisierung beim Öffnen des Popups (moderner Ansatz)

Diese Methode nutzt das native elementor/popup/show-Ereignis von Elementor. Platzieren Sie den Code in der functions.php Ihres aktiven Themes oder fügen Sie ihn über ein Snippets-Plugin wie Code Snippets hinzu.

Erstellen Sie vor der Bearbeitung ein Backup der functions.php.

1/**
2 * Reinitialize Contact Form 7 when opening an Elementor popup.
3 * Fixes page reload after form submission.
4 */
5function sdstudio_cf7_reinit_in_popup() {
6    ?>
7    <script>
8    jQuery( document ).on( 'elementor/popup/show', function() {
9        document.querySelectorAll( '.wpcf7 form' ).forEach( function( form ) {
10            if ( typeof wpcf7 !== 'undefined' ) {
11                wpcf7.init( form );
12            }
13        });
14    });
15    </script>
16    <?php
17}
18add_action( 'wp_footer', 'sdstudio_cf7_reinit_in_popup' );

Nach dem Speichern öffnen Sie das Popup mit dem Formular und testen es: Füllen Sie die Pflichtfelder fehlerhaft aus und klicken Sie auf „Absenden". Validierungsmeldungen sollten sofort und ohne Reload erscheinen. Übermitteln Sie das Formular dann korrekt und bestätigen Sie, dass die Erfolgsmeldung ebenfalls im Popup angezeigt wird.

Der Code wartet auf das elementor/popup/show-Ereignis, das garantiert ausgelöst wird, nachdem der Popup-Inhalt gerendert wurde. Dann findet querySelectorAll alle CF7-Formulare im aktuellen DOM und wpcf7.init() bindet die AJAX-Validierung und -Übermittlung zwangsweise an jedes einzelne. Die Prüfung typeof wpcf7 !== 'undefined' schützt vor Fehlern, falls CF7 aus irgendeinem Grund nicht geladen wurde.

Lösung 2: Klicks auf den Popup-Button verfolgen (alternative Methode)

Dieser Ansatz wurde in der GitHub-Diskussion #7798 zu Elementor von Nutzer @drinkmaker veröffentlicht. Anstatt das Öffnen des Popups zu überwachen, verfolgt er Klicks auf einen Button oder Link mit href='#elementor-action', was genau der Art entspricht, wie Elementor Popups auslöst.

Die Verzögerung setTimeout(..., 800) gibt der Erscheinungsanimation des Popups Zeit, bevor der Code das Formular findet und initialisiert. Der .elementor-Marker verhindert eine doppelte Initialisierung desselben Formulars.

1/**
2 * Alternative initialization of CF7 in Elementor popups.
3 * Source: https://github.com/elementor/elementor/issues/7798 (drinkmaker)
4 */
5function sdstudio_elementor_cf7_alt_init() {
6    ?>
7    <script type='text/javascript'>
8        jQuery( document ).ready( function() {
9 
10            jQuery( document ).on( 'click', "a[href='#elementor-action']", function() {
11 
12                setTimeout( function() {
13 
14                    jQuery( '.elementor-popup-modal form.wpcf7-form:not(.elementor)' ).each( function( index ) {
15                        wpcf7.initForm( jQuery( this ) );
16                        jQuery( this ).addClass( 'elementor' );
17                    });
18 
19                }, 800 );
20 
21            });
22 
23        });
24    </script>
25    <?php
26}
27add_action( 'wp_footer', 'sdstudio_elementor_cf7_alt_init' );

Welche Methode Sie wählen sollten: Die erste (mit dem elementor/popup/show-Ereignis) ist vorzuziehen, da sie auf der dokumentierten API von Elementor basiert, sauberer ist und nicht von Timeouts abhängt. Die zweite hat sich über Jahre in der Produktion bewährt und dient als zuverlässiger Plan B, falls die erste aus irgendeinem Grund nicht funktioniert.

Optional: Formular beim erneuten Öffnen zurücksetzen

Wenn ein Nutzer das Popup schließt und erneut öffnet, bleiben die Formularfelder ausgefüllt. Das ist verwirrend: Es ist unklar, ob das Formular bereits abgesendet wurde oder nicht. Eine kleine Ergänzung zur ersten Lösung behebt dies:

1/**
2 * Reset CF7 form each time an Elementor popup opens.
3 */
4function sdstudio_cf7_reset_on_popup_open() {
5    ?>
6    <script>
7    jQuery( document ).on( 'elementor/popup/show', function() {
8        jQuery( '.wpcf7 form' ).each( function() {
9            this.reset();
10            jQuery( this ).find( '.wpcf7-not-valid' ).removeClass( 'wpcf7-not-valid' );
11            jQuery( this ).find( '.wpcf7-response-output' ).hide();
12            jQuery( this ).find( '.wpcf7-not-valid-tip' ).remove();
13        });
14    });
15    </script>
16    <?php
17}
18add_action( 'wp_footer', 'sdstudio_cf7_reset_on_popup_open' );

Die Funktion setzt die Feldwerte mit reset() zurück, entfernt CSS-Klassen von ungültigen Feldern, blendet Übermittlungsmeldungen aus und entfernt Validierungshinweise. Der Nutzer sieht stets ein leeres Formular.

Optional: Popup nach erfolgreicher Übermittlung schließen

Nach einer erfolgreichen Übermittlung ist es sinnvoll, das Popup nach 1,5 Sekunden automatisch zu schließen, damit der Nutzer Zeit hat, die Bestätigung zu lesen, ohne den Schließen-Button suchen zu müssen:

1/**
2 * Auto-close Elementor popup after successful CF7 submission.
3 */
4function sdstudio_close_popup_on_cf7_success() {
5    ?>
6    <script>
7    document.addEventListener( 'wpcf7mailsent', function() {
8        setTimeout( function() {
9            jQuery( '.dialog-close-button' ).trigger( 'click' );
10        }, 1500 );
11    }, false );
12    </script>
13    <?php
14}
15add_action( 'wp_footer', 'sdstudio_close_popup_on_cf7_success' );

Das wpcf7mailsent-Ereignis wird ausgelöst, wenn der Server bestätigt, dass die E-Mail versendet wurde. Die Verzögerung von 1500 ms gibt dem Nutzer Zeit, die Erfolgsmeldung zu lesen. Der Klick auf .dialog-close-button verwendet den standardmäßigen Schließen-Button von Elementor. Anders als Versuche, die Popup-API direkt aufzurufen, ist diese Methode über alle Versionen hinweg stabil.

Checkliste zur Fehlersuche

Wenn das Formular nach dem Hinzufügen des Codes immer noch die Seite neu lädt, gehen Sie diese Schritte durch:

  • Browser-Konsole. Öffnen Sie die DevTools (F12 → Konsole) und prüfen Sie auf rote JavaScript-Fehler. Eine häufige Ursache ist, dass jQuery nicht geladen wird oder mit einem anderen Plugin kollidiert.

  • Caching. Plugins wie WP Rocket, Autoptimize oder serverseitiges Caching können Skripte minimieren und kombinieren. Deaktivieren Sie vorübergehend aggressive JS-Optimierung und testen Sie erneut.

  • jQuery im noConflict-Modus. Wenn ein Theme oder Plugin jQuery in noConflict einbindet, ersetzen Sie jQuery mit einem geeigneten Wrapper durch $ oder verwenden Sie die ausgeschriebene Form jQuery.

  • Popup-ID. Stellen Sie sicher, dass sich das Formular im exakten Popup befindet, das durch einen Button mit href='#elementor-action' ausgelöst wird. Für Popups, die über andere Auslöser-Typen geöffnet werden (zum Beispiel per Timer), ist die erste Methode mit elementor/popup/show zuverlässiger.

  • Plugin-Konflikt. Deaktivieren Sie andere Plugins nacheinander und testen Sie, insbesondere solche, die eigene Validierungsskripte hinzufügen oder das Formularverhalten verändern.

  • CF7-Version. Diese Lösungen wurden mit Contact Form 7 Version 5.7+ und Elementor Pro 3.5+ getestet. Wenn Ihre CF7-Version unter 5.7 liegt, könnte die Funktion wpcf7.init() anders benannt sein; aktualisieren Sie das Plugin.

⁉️🤔 Häufig gestellte Fragen

Warum funktioniert CF7 auf einer normalen Seite, aber nicht im Popup?

Wenn eine normale Seite lädt, ist das DOM bereits aufgebaut und CF7 hat Zeit, alle Formulare zu initialisieren. Das Popup von Elementor lädt Inhalte asynchron, nachdem CF7 seine Arbeit beendet hat. Das Formular landet im DOM, jedoch ohne gebundenen JavaScript-Handler. Deshalb hilft die Prüfung „es funktioniert auf einer separaten Seite" nicht: Die Ladebedingungen sind grundlegend verschieden. Die Lösung ist immer die erzwungene Neuinitialisierung beim Öffnen des Popups, unabhängig davon, ob das Formular anderswo funktioniert.

Kann ich das ohne Code lösen, mit einem Plugin oder einer Einstellung?

Es gibt kein fertiges Plugin, mit dem man für diesen Bug „ein Häkchen setzt und es funktioniert einfach". Das Problem liegt an der Schnittstelle zweier unabhängiger Produkte (Elementor und CF7), und jedes für sich arbeitet korrekt. Drittanbieter-Add-ons wie WPB Popup for Contact Form 7 lösen das Problem anders: Sie erstellen eigene Popups, anstatt Elementor zu reparieren. Der obige Code ist der minimal notwendige Eingriff. Sie fügen ihn einmal in die functions.php ein und er benötigt keine Updates, wenn neue Versionen von CF7 oder Elementor erscheinen.

Die erste Methode hat nicht funktioniert. Was sollte ich prüfen, bevor ich zur zweiten wechsle?

Prüfen Sie drei Dinge. Erstens: Das elementor/popup/show-Ereignis ist ab Elementor Pro 2.7 verfügbar; wenn Ihre Version niedriger ist, verwenden Sie sofort die zweite Methode. Zweitens: Öffnen Sie die Konsole und geben Sie typeof wpcf7 ein; wenn das Ergebnis undefined ist, hat das CF7-Plugin sein JavaScript nicht geladen (suchen Sie nach Fehlern oder Konflikten). Drittens: Stellen Sie sicher, dass das Formular im Popup die Klasse .wpcf7 besitzt; ohne sie findet der Selektor querySelectorAll('.wpcf7 form') nichts. In den allermeisten Fällen funktioniert die erste Methode sofort. Wenn nicht, nutzen Sie die zweite: Sie hat sich über Jahre auf Hunderten von Websites bewährt.

Muss ich alle drei Snippets hinzufügen oder reicht eines?

Das erste Snippet (Neuinitialisierung) ist das notwendige Minimum. Das zweite ist eine Alternative; fügen Sie es nur hinzu, wenn das erste das Problem nicht gelöst hat. Das Zurücksetzen des Formulars und das automatische Schließen des Popups sind optionale Erweiterungen, die Sie bei Bedarf ergänzen können: Das Zurücksetzen ist nützlich, wenn das Popup während eines einzelnen Besuchs mehrfach geöffnet wird; das automatische Schließen ist hilfreich, wenn das Popup für Anfragen genutzt wird und keinen langen Bestätigungstext enthält. Alle drei Snippets sind unabhängig und können gleichzeitig arbeiten. Es gibt keine Konflikte zwischen ihnen.

Nach der Korrektur wird das Formular übermittelt, aber E-Mails kommen nicht an. Hängt das zusammen?

Nein, Probleme bei der E-Mail-Zustellung sind ein separates Thema und stehen in keinem Zusammenhang mit der Funktion von CF7 im Popup. Wenn nach Anwendung der Korrektur das Formular eine Erfolgsmeldung zeigt (grüner Rand), funktioniert die AJAX-Übermittlung korrekt. Wenn E-Mails nicht ankommen: Prüfen Sie die SMTP-Einstellungen, die Spam-Filter des Hostings und die Empfängeradresse in den CF7-Formulareinstellungen. Für eine zuverlässige Zustellung nutzen Sie ein SMTP-Plugin wie Post SMTP oder FluentSMTP anstelle der Standardfunktion wp_mail(), da Hosting-Anbieter ausgehende PHP-Mails häufig blockieren.

Beeinflusst diese Lösung andere CF7-Formulare auf der Website?

Nein. Beide Methoden sind isoliert: Die erste wartet auf das Öffnen eines Elementor-Popups, die zweite verfolgt nur Links mit href='#elementor-action'. Normale CF7-Formulare, die auf Seiten und in Widgets platziert sind, funktionieren weiterhin normal; sie werden beim Seitenaufruf initialisiert und bleiben unberührt. Der einzige Vorbehalt: Wenn Ihre Website aggressives Caching mit Skript-Zusammenführung verwendet, fügen Sie den Popup-Code zu den Ausschlüssen Ihrer Minifizierung hinzu, um eine doppelte Ausführung zu vermeiden.

Lohnt sich der Aufwand mit eigenem Code im Jahr 2026

Beide Plugins, Contact Form 7 und Elementor Pro, werden aktiv entwickelt und aktualisiert. CF7 behauptet seine Position als beliebtestes WordPress-Formular-Plugin mit über 5 Millionen aktiven Installationen. Elementor Pro wird auf jeder vierten WordPress-Website eingesetzt.

Dennoch wurde der hier beschriebene Fehler auf Kernebene keines der beiden Plugins behoben und wird es wahrscheinlich auch nie. Der Grund ist architektonischer Natur: CF7 ist für Formulare verantwortlich, Elementor für dynamische Inhalte, und die Initialisierung von Skripten in dynamisch geladenem DOM bleibt Aufgabe des Entwicklers.

Die gute Nachricht: Die Korrektur ist trivial, der Code wird einmal hinzugefügt und benötigt keine Wartung. Wählen Sie die erste Methode (das elementor/popup/show-Ereignis): Sie ist die sauberste, und Sie können das Problem vergessen. Wenn das Formular im Popup für kritische Lead-Generierungsszenarien genutzt wird, ergänzen Sie auch das Zurücksetzen der Felder und das automatische Schließen: Die Nutzererfahrung wird sich spürbar verbessern.

Sehen Sie sich das Video oben an: Es zeigt den vollständigen Prozess der Einrichtung eines Popups mit Contact Form 7 in Elementor. Diese visuelle Schritt-für-Schritt-Anleitung ergänzt die hier bereitgestellten Snippets und hilft Ihnen, Fehler beim Zusammenbau zu vermeiden.

Redaktion
RedaktionRedaktionsteam→ All publications

Ein professionelles Team von Autoren und Redakteuren, das auf die Erstellung hochwertiger Inhalte spezialisiert ist.