Lisad kontaktivormi Contact Form 7 abil Elementor Pro hüpikaknasse. Kasutaja täidab väljad, klõpsab „Saada" ja kogu leht laaditakse uuesti.

Ei mingeid veateateid. Ei mingit saatmiskinnitust. Lihtsalt lehe uuesti laadimine ja kaotatud müügivihje.

See on teadaolev konflikt: CF7 tugineb AJAX-põhisele saatmisele, kuid dünaamiliselt laaditud hüpikakna sees ei jõua selle JavaScript vormiga sidet luua. Selle tulemusena sooritab brauser tavalise HTML-vormi saatmise, just selle, mis põhjustabki lehe uuesti laadimise.

Probleem on eksisteerinud aastaid, kuid see on parandatav vaid kahe koodireaga. Allpool on kaks toimivat lahendust: kaasaegne (puhtam ja usaldusväärsem) ja alternatiivne GitHubist, pluss valikulised täiendused ja silumise kontrollnimekiri.

💡 Kiirülevaade:

• Algpõhjus: CF7 lähtestub lehe laadimisel, kuid hüpikaken koos vormiga ilmub hiljem, seega ei tea skript selle sisust midagi
• Lahendus 1: lähtesta CF7 uuesti, kui elementor/popup/show sündmus käivitub; JavaScript ootab hüpikakna avanemist ja võtab vormi üles
• Lahendus 2: jälgi hüpikakna avamise nupu klõpse koos animatsiooni viivitusega; see meetod pärineb Elementori GitHubi arutelust
• Valikuline: lähtesta vorm uuesti avamisel ja sulge hüpikaken automaatselt pärast edukat saatmist
• Silumise kontrollnimekiri: brauseri konsool, jQuery konfliktid, puhverdamise pluginad

Miks CF7 just hüpikaknas katki läheb

Contact Form 7 on üles ehitatud AJAX-ile: vorm saadetakse ilma lehte uuesti laadimata, väljade valideerimine toimub jooksvalt ning vea- või eduteated ilmuvad koheselt. Kogu see mehhanism seotakse aga DOM-iga lehe laadimisel wpcf7.init() väljakutse kaudu.

Elementor Pro laadib hüpikakna sisu dünaamiliselt, pärast DOMContentLoaded sündmust. Kui kasutaja klõpsab nuppu ja hüpikaken avaneb, lisatakse selle HTML dokumenti, kuid CF7 ei tea sellest midagi. Hüpikaknas olev vorm jääb lähtestamata.

Mis edasi saab: ilma aktiivse AJAX-i töötlejata sooritab brauser tavalise HTML-vormi saatmise. action atribuut käivitub ja leht laaditakse uuesti. Hüpikaken sulgub loomulikult (selle olek lähtestub navigeerimisel). Kasutaja näeb lehe uuesti laadimist ja lahkub.

Paljud arendajad püüavad sümptomeid ravida: nad blokeerivad hüpikakna sulgumise event.stopPropagation() abil, kirjutavad üle Elementori sisemised funktsioonid või takistavad vormi saatmist e.preventDefault()-ga. Ükski neist meetoditest ei tegele algpõhjusega (puuduva CF7 lähtestamisega). Mõni neist võib isegi kogu saidi ulatuses katki teha hüpikakende animatsioonid või Elementori enda.

On ainult üks usaldusväärne lahendus: oodata hüpikakna avanemist ja kutsuda iga seal oleva vormi jaoks selgesõnaliselt välja wpcf7.init().

Lahendus 1: uuesti lähtestamine hüpikakna avamisel (kaasaegne lähenemine)

See meetod kasutab Elementori sisemist elementor/popup/show sündmust. Aseta kood oma aktiivse teema functions.php faili või lisa see läbi koodijuppide plugina nagu Code Snippets.

Enne muutmist loo functions.php-st varukoopia.

1
/**
2
 * Reinitialize Contact Form 7 when opening an Elementor popup.
3
 * Fixes page reload after form submission.
4
 */
5
function 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
}
18
add_action( 'wp_footer', 'sdstudio_cf7_reinit_in_popup' );

Pärast salvestamist ava hüpikaken koos vormiga ja testi seda: täida kohustuslikud väljad valesti ja klõpsa „Saada". Valideerimisteated peaksid ilmuma koheselt, ilma lehte uuesti laadimata. Seejärel saada vorm korrektselt ja veendu, et ka eduteade kuvatakse hüpikaknas.

Kood ootab elementor/popup/show sündmust, mis on garanteeritult käivitatud pärast hüpikakna sisu renderdamist. Seejärel leiab querySelectorAll kõik CF7 vormid praeguses DOM-is ja wpcf7.init() kinnitab sunniviisiliselt AJAX-i valideerimise ja saatmise igaühele. typeof wpcf7 !== 'undefined' kontroll kaitseb vigade eest, kui CF7 pole mingil põhjusel laadinud.

Lahendus 2: hüpikakna nupu klõpsude jälgimine (alternatiivne meetod)

See lähenemine on postitatud Elementori GitHubi arutelus #7798 kasutaja @drinkmaker poolt. Hüpikakna avanemise jälgimise asemel jälgib see nupu või lingi klõpse, millel on href='#elementor-action', mis on täpselt see, kuidas Elementor hüpikaknaid käivitab.

setTimeout(..., 800) viivitus annab aega hüpikakna ilmumise animatsiooniks, enne kui kood vormi üles leiab ja lähtestab. .elementor marker takistab sama vormi topelt lähtestamist.

1
/**
2
 * Alternative initialization of CF7 in Elementor popups.
3
 * Source: https://github.com/elementor/elementor/issues/7798 (drinkmaker)
4
 */
5
function 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
}
27
add_action( 'wp_footer', 'sdstudio_elementor_cf7_alt_init' );

Millist meetodit valida: esimene (kasutades elementor/popup/show sündmust) on eelistatud, sest see tugineb Elementori dokumenteeritud API-le, on puhtam ega sõltu timeoutidest. Teine on aastaid tootmiskeskkonnas lahingus testitud ja toimib usaldusväärse plaan B-na, kui esimene mingil põhjusel ei tööta.

Valikuline: vormi lähtestamine uuesti avamisel

Kui kasutaja sulgeb hüpikakna ja avab selle uuesti, jäävad vormiväljad täidetuks. See on segadust tekitav: jääb arusaamatuks, kas vorm saadeti või mitte. Väike täiendus esimesele lahendusele parandab selle:

1
/**
2
 * Reset CF7 form each time an Elementor popup opens.
3
 */
4
function 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
}
18
add_action( 'wp_footer', 'sdstudio_cf7_reset_on_popup_open' );

Funktsioon lähtestab väljade väärtused reset() abil, eemaldab vigastelt väljadelt CSS-klassid, peidab saatmisteated ja eemaldab valideerimise vihjed. Kasutaja näeb alati puhast vormi.

Valikuline: hüpikakna sulgemine pärast edukat saatmist

Pärast edukat saatmist on mõistlik hüpikaken 1,5 sekundi pärast automaatselt sulgeda, et kasutajal oleks aega kinnitust lugeda, ilma et peaks sulgemisnuppu otsima:

1
/**
2
 * Auto-close Elementor popup after successful CF7 submission.
3
 */
4
function 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
}
15
add_action( 'wp_footer', 'sdstudio_close_popup_on_cf7_success' );

wpcf7mailsent sündmus käivitub, kui server kinnitab, et e-kiri on saadetud. 1500 ms viivitus annab kasutajale aega eduteate lugemiseks. .dialog-close-button klõpsamine kasutab Elementori standardset sulgemisnuppu. Erinevalt katsetest otse hüpikakna API-t välja kutsuda, on see meetod stabiilne kõigis versioonides.

Silumise kontrollnimekiri

Kui vorm laadib pärast koodi lisamist endiselt lehte uuesti, läbi need sammud:

• Brauseri konsool. Ava DevTools (F12 → Console) ja kontrolli punaseid JavaScripti vigu. Levinud põhjus on jQuery mittelaadimine või konflikt mõne teise pluginaga.

• Puhverdamine. Pluginad nagu WP Rocket, Autoptimize või serveritaseme puhver võivad skripte minimeerida ja kombineerida. Keela ajutiselt agressiivne JS-i optimeerimine ja testi uuesti.

• jQuery noConflict režiimis. Kui teema või plugin mähib jQuery noConflict sisse, asenda jQuery $-ga, kasutades sobivat ümbrist, või kasuta täielikku jQuery vormi.

• Hüpikakna ID. Veendu, et vorm asub täpselt selles hüpikaknas, mille käivitab nupp href='#elementor-action'-ga. Teist tüüpi päästikutega (näiteks taimeriga) avatavate hüpikakende puhul on esimene meetod elementor/popup/show-ga usaldusväärsem.

• Plugina konflikt. Deaktiveeri teised pluginad ükshaaval ja testi, eriti need, mis lisavad oma valideerimisskripte või muudavad vormi käitumist.

• CF7 versioon. Neid lahendusi on testitud Contact Form 7 versiooniga 5.7+ ja Elementor Pro 3.5+-ga. Kui sinu CF7 versioon on alla 5.7, võib wpcf7.init() funktsiooni nimi olla erinev; uuenda pluginat.

⁉️🤔 Korduma kippuvad küsimused

Miks CF7 töötab tavalisel lehel, kuid mitte hüpikaknas?

Kui tavaline leht laadib, on DOM juba üles ehitatud ja CF7-l on aega kõik vormid lähtestada. Elementori hüpikaken laadib sisu asünkroonselt, pärast seda, kui CF7 on oma töö lõpetanud. Vorm jõuab küll DOM-i, kuid ilma seotud JavaScripti töötlejata. Seetõttu ei aita kontrollimine „eraldi lehel töötab": laadimistingimused on põhimõtteliselt erinevad. Lahendus on alati sunnitud uuesti lähtestamine hüpikakna avanemisel, sõltumata sellest, kas vorm mujal töötab.

Kas saab ilma koodita hakkama, kasutades pluginat või seadistust?

Selle vea jaoks ei ole olemas valmis pluginat, mis võimaldaks „linnukese teha ja kõik töötab". Probleem asub kahe sõltumatu toote (Elementor ja CF7) ristumiskohas ning kumbki neist töötab eraldi võttes korrektselt. Kolmandate osapoolte lisad nagu WPB Popup for Contact Form 7 lahendavad probleemi teisiti: nad loovad oma hüpikaknad, selle asemel et Elementorit parandada. Ülaltoodud kood on minimaalne vajalik sekkumine. Lisad selle ühe korra functions.php-sse ja see ei vaja uuendusi, kui CF7 või Elementori uued versioonid välja tulevad.

Esimene meetod ei töötanud. Mida peaksin enne teisele üleminekut kontrollima?

Kontrolli kolme asja. Esiteks: elementor/popup/show sündmus on saadaval alates Elementor Pro 2.7-st; kui sinu versioon on madalam, kasuta kohe teist meetodit. Teiseks: ava konsool ja trüki typeof wpcf7; kui see on undefined, pole CF7 plugin oma JavaScripti laadinud (otsi vigu või konflikte). Kolmandaks: veendu, et hüpikaknas oleval vormil on .wpcf7 klass; ilma selleta ei leia querySelectorAll('.wpcf7 form') valija midagi. Valdavas enamuses juhtudest töötab esimene meetod kohe. Kui ei, kasuta teist: see on aastate jooksul sadadel saitidel end tõestanud.

Kas ma pean lisama kõik kolm koodijuppi või piisab ühest?

Esimene koodijupp (uuesti lähtestamine) on hädavajalik miinimum. Teine on alternatiiv; lisa see ainult siis, kui esimene probleemi ei lahendanud. Vormi lähtestamine ja hüpikakna automaatne sulgemine on valikulised täiendused, mille saad lisada vastavalt vajadusele: lähtestamine on kasulik, kui hüpikaken avaneb ühe külastuse jooksul mitu korda; automaatne sulgemine on abiks, kui hüpikakent kasutatakse päringute jaoks ja see ei sisalda pikka kinnitusteksti. Kõik kolm koodijuppi on sõltumatud ja võivad töötada samaaegselt. Nende vahel konflikte ei ole.

Pärast parandust vorm saadab, kuid e-kirjad ei jõua kohale. Kas see on seotud?

Ei, e-kirjade kohaletoimetamise probleemid on eraldi teema, mis ei ole seotud CF7 töötamisega hüpikaknas. Kui pärast paranduse rakendamist näitab vorm eduteadet (roheline ääris), töötab AJAX-i saatmine korrektselt. E-kirjad ei jõua kohale: kontrolli SMTP seadeid, majutusteenuse rämpspostifiltreid ja saaja aadressi CF7 vormi seadetes. Usaldusväärse kohaletoimetamise tagamiseks kasuta SMTP pluginat nagu Post SMTP või FluentSMTP, mitte tavalist wp_mail() funktsiooni, kuna majutusteenused blokeerivad sageli väljaminevat PHP meili.

Kas see lahendus mõjutab teisi CF7 vorme saidil?

Ei. Mõlemad meetodid on isoleeritud: esimene ootab Elementori hüpikakna avanemist, teine jälgib ainult linke href='#elementor-action'-ga. Tavalised lehtedele ja vidinatesse paigutatud CF7 vormid töötavad edasi normaalselt; need lähtestatakse lehe laadimisel ja jäävad mõjutamata. Ainus hoiatus: kui sinu sait kasutab agressiivset puhverdamist koos skriptide ühendamisega, lisa hüpikakna kood minimeerimise erandite hulka, et vältida topelt käivitamist.

Kas 2026. aastal on mõtet kohandatud koodiga vaeva näha

Mõlemat pluginat, Contact Form 7 ja Elementor Pro, arendatakse ja uuendatakse aktiivselt. CF7 hoiab oma positsiooni kõige populaarsema WordPressi vormi pluginana, millel on üle 5 miljoni aktiivse installatsiooni. Elementor Pro on kasutusel igal neljandal WordPressi saidil.

Ometi pole siin kirjeldatud viga kummagi plugina tuuma tasemel parandatud ega tõenäoliselt kunagi parandata. Põhjus on arhitektuuriline: CF7 vastutab vormide eest, Elementor dünaamilise sisu eest ning skriptide lähtestamine dünaamiliselt laaditud DOM-is jääb arendaja vastutuseks.

Hea uudis: parandus on triviaalne, kood lisatakse ühe korra ja see ei vaja hooldust. Vali esimene meetod (elementor/popup/show sündmus): see on kõige puhtam ja võid probleemi unustada. Kui hüpikaknas olevat vormi kasutatakse kriitiliste müügivihjete stsenaariumide jaoks, lisa ka väljade lähtestamine ja automaatne sulgemine: kasutajakogemus paraneb märgatavalt.

Vaata ülaltoodud videot: see näitab kogu hüpikakna seadistamise protsessi Contact Form 7-ga Elementoris. See visuaalne samm-sammuline juhend täiendab siin pakutud koodijuppe ja aitab vältida vigu kokkupanemisel.