Lisäät yhteydenottolomakkeen Contact Form 7 -lisäosalla Elementor Pron ponnahdusikkunaan. Käyttäjä täyttää kentät, klikkaa "Lähetä", ja koko sivu latautuu uudelleen.

Ei virheilmoituksia. Ei lähetyksen vahvistusta. Vain uudelleenlataus ja menetetty liidi.

Tämä on tunnettu ristiriita: CF7 käyttää AJAX-lähetystä, mutta dynaamisesti ladatun ponnahdusikkunan sisällä sen JavaScript ei ehdi kiinnittyä lomakkeeseen. Tämän seurauksena selain suorittaa tavallisen HTML-lomakkeen lähetyksen, juuri sen, joka aiheuttaa uudelleenlatauksen.

Ongelma on ollut olemassa vuosia, mutta se korjataan vain kahdella koodirivillä. Alla on kaksi toimivaa ratkaisua: moderni (siistimpi ja luotettavampi) ja vaihtoehtoinen GitHubista, sekä valinnaisia parannuksia ja virheenkorjauksen tarkistuslista.

💡 Pika yhteenveto:

• Perussyy: CF7 alustaa itsensä sivun latauksessa, mutta ponnahdusikkuna lomakkeineen ilmestyy myöhemmin, joten skripti ei tiedä sen sisällöstä mitään
• Ratkaisu 1: alusta CF7 uudelleen, kun elementor/popup/show-tapahtuma laukeaa; JavaScript odottaa ponnahdusikkunan avautumista ja poimii lomakkeen
• Ratkaisu 2: seuraa ponnahdusikkunan avaavan painikkeen klikkauksia viiveellä animaatiota varten; tämä menetelmä on peräisin Elementorin GitHub-keskustelusta
• Valinnainen: nollaa lomake uudelleenavattaessa ja sulje ponnahdusikkuna automaattisesti onnistuneen lähetyksen jälkeen
• Virheenkorjauksen tarkistuslista: selaimen konsoli, jQuery-ristiriidat, välimuistilisäosat

Miksi CF7 hajoaa nimenomaan ponnahdusikkunassa

Contact Form 7 on rakennettu AJAXin varaan: lomake lähetetään ilman uudelleenlatausta, kenttien validointi tapahtuu lennossa ja virhe- tai onnistumisviestit ilmestyvät välittömästi. Tämä koko mekanismi kuitenkin kiinnittyy DOMiin sivun latauksessa wpcf7.init()-kutsun kautta.

Elementor Pro lataa ponnahdusikkunoiden sisällön dynaamisesti DOMContentLoaded-tapahtuman jälkeen. Kun käyttäjä klikkaa painiketta ja ponnahdusikkuna avautuu, sen HTML lisätään dokumenttiin, mutta CF7 ei tiedä siitä mitään. Ponnahdusikkunan sisällä oleva lomake jää alustamatta.

Mitä seuraavaksi tapahtuu: ilman aktiivista AJAX-käsittelijää selain suorittaa tavallisen HTML-lomakkeen lähetyksen. action-attribuutti laukeaa ja sivu latautuu uudelleen. Ponnahdusikkuna sulkeutuu luonnollisesti (sen tila nollautuu navigoinnissa). Käyttäjä näkee uudelleenlatauksen ja poistuu.

Moni kehittäjä yrittää hoitaa oireita: he estävät ponnahdusikkunan sulkeutumisen event.stopPropagation()-kutsulla, ylikirjoittavat Elementorin sisäisiä funktioita tai estävät lomakkeen lähetyksen e.preventDefault()-kutsulla. Mikään näistä menetelmistä ei puutu perussyyhyn (puuttuva CF7:n alustus). Jotkut jopa rikkovat ponnahdusikkunoiden animaatiot tai koko Elementorin koko sivustolla.

On vain yksi luotettava ratkaisu: odota ponnahdusikkunan avautumista ja kutsu wpcf7.init() eksplisiittisesti jokaiselle sen sisällä olevalle lomakkeelle.

Ratkaisu 1: uudelleenalustus ponnahdusikkunan avautuessa (moderni lähestymistapa)

Tämä menetelmä käyttää Elementorin natiivia elementor/popup/show-tapahtumaa. Sijoita koodi aktiivisen teemasi functions.php-tiedostoon tai lisää se snippets-lisäosalla, kuten Code Snippets.

Tee varmuuskopio functions.php-tiedostosta ennen muokkaamista.

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' );

Tallenna, avaa ponnahdusikkuna lomakkeineen ja testaa: täytä pakolliset kentät väärin ja klikkaa "Lähetä". Validointiviestien pitäisi ilmestyä välittömästi ilman uudelleenlatausta. Lähetä sitten lomake oikein ja varmista, että onnistumisviesti näkyy myös ponnahdusikkunan sisällä.

Koodi odottaa elementor/popup/show-tapahtumaa, joka taatusti laukeaa sen jälkeen, kun ponnahdusikkunan sisältö on renderöity. Sitten querySelectorAll etsii kaikki CF7-lomakkeet nykyisestä DOMista, ja wpcf7.init() pakottaa AJAX-validoinnin ja -lähetyksen jokaiseen. typeof wpcf7 !== 'undefined' -tarkistus suojaa virheiltä, jos CF7 ei jostain syystä ole latautunut.

Ratkaisu 2: ponnahdusikkunan painikkeen klikkausten seuranta (vaihtoehtoinen menetelmä)

Tämä lähestymistapa on julkaistu Elementorin GitHub-keskustelussa #7798 käyttäjän @drinkmaker toimesta. Ponnahdusikkunan avautumisen seuraamisen sijaan se tarkkailee painikkeen tai linkin klikkauksia, jossa on href='#elementor-action', mikä on juuri se tapa, jolla Elementor laukaisee ponnahdusikkunat.

setTimeout(..., 800)-viive antaa aikaa ponnahdusikkunan avautumisanimaatiolle, ennen kuin koodi etsii ja alustaa lomakkeen. .elementor-merkintä estää saman lomakkeen alustamisen kahdesti.

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' );

Kumpi menetelmä valita: ensimmäinen (joka käyttää elementor/popup/show-tapahtumaa) on suositeltavampi, koska se nojaa Elementorin dokumentoituun rajapintaan, on siistimpi eikä ole riippuvainen aikakatkaisuista. Toinen on ollut taistelutestattu tuotannossa vuosia ja toimii luotettavana varasuunnitelmana, jos ensimmäinen ei jostain syystä toimi.

Valinnainen: lomakkeen nollaus uudelleenavattaessa

Kun käyttäjä sulkee ponnahdusikkunan ja avaa sen uudelleen, lomakkeen kentät pysyvät täytettyinä. Tämä on hämmentävää: on epäselvää, lähetettiinkö lomake vai ei. Pieni lisäys ensimmäiseen ratkaisuun korjaa tämän:

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' );

Funktio nollaa kenttien arvot reset()-kutsulla, poistaa CSS-luokat virheellisistä kentistä, piilottaa lähetysviestit ja poistaa validointivihjeet. Käyttäjä näkee aina puhtaan lomakkeen.

Valinnainen: ponnahdusikkunan sulkeminen onnistuneen lähetyksen jälkeen

Onnistuneen lähetyksen jälkeen on järkevää sulkea ponnahdusikkuna automaattisesti 1,5 sekunnin kuluttua, jotta käyttäjällä on aikaa lukea vahvistus ilman, että hänen tarvitsee etsiä sulkupainiketta:

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-tapahtuma laukeaa, kun palvelin vahvistaa sähköpostin lähetyksen. 1500 ms:n viive antaa käyttäjälle aikaa lukea onnistumisviesti. .dialog-close-button-klikkaus käyttää Elementorin vakiosulkupainiketta. Toisin kuin yritykset kutsua ponnahdusikkunan rajapintaa suoraan, tämä menetelmä on vakaa kaikissa versioissa.

Virheenkorjauksen tarkistuslista

Jos lomake edelleen lataa sivun uudelleen koodin lisäämisen jälkeen, käy läpi nämä vaiheet:

• Selaimen konsoli. Avaa DevTools (F12 → Console) ja tarkista punaiset JavaScript-virheet. Yleinen syy on, ettei jQuery lataudu tai se on ristiriidassa toisen lisäosan kanssa.

• Välimuisti. Lisäosat, kuten WP Rocket, Autoptimize tai palvelintason välimuisti, voivat minifioida ja yhdistellä skriptejä. Poista aggressiivinen JS:n optimointi väliaikaisesti käytöstä ja testaa uudelleen.

• jQuery noConflict-tilassa. Jos teema tai lisäosa käärii jQueryn noConflict-tilaan, korvaa jQuery $-merkillä käyttäen asianmukaista wrapperia tai käytä täyttä jQuery-muotoa.

• Ponnahdusikkunan ID. Varmista, että lomake on juuri siinä ponnahdusikkunassa, jonka laukaisee painike, jossa on href='#elementor-action'. Muilla tavoilla avattaville ponnahdusikkunoille (esimerkiksi ajastimella) ensimmäinen menetelmä elementor/popup/show-tapahtumalla on luotettavampi.

• Lisäosien ristiriita. Ota muita lisäosia pois käytöstä yksi kerrallaan ja testaa, erityisesti niitä, jotka lisäävät omia validointiskriptejään tai muokkaavat lomakkeiden toimintaa.

• CF7:n versio. Nämä ratkaisut on testattu Contact Form 7:n versiolla 5.7+ ja Elementor Prolla 3.5+. Jos CF7-versiosi on alle 5.7, wpcf7.init()-funktio voi olla nimetty eri tavalla; päivitä lisäosa.

⁉️🤔 Usein kysytyt kysymykset

Miksi CF7 toimii tavallisella sivulla, mutta hajoaa ponnahdusikkunassa?

Kun tavallinen sivu latautuu, DOM on jo rakennettu ja CF7 ehtii alustaa kaikki lomakkeet. Elementorin ponnahdusikkuna lataa sisällön asynkronisesti sen jälkeen, kun CF7 on jo tehnyt työnsä. Lomake päätyy DOMiin, mutta ilman kiinnittynyttä JavaScript-käsittelijää. Siksi tarkistus "se toimii erillisellä sivulla" ei auta: latausolosuhteet ovat perustavanlaatuisesti erilaiset. Ratkaisu on aina pakotettu uudelleenalustus ponnahdusikkunan avautuessa riippumatta siitä, toimiiko lomake muualla.

Voinko selvitä ilman koodia, käyttäen lisäosaa tai asetusta?

Tähän bugiin ei ole valmista lisäosaa, jolla "rasti ruutuun ja se vain toimii". Ongelma on kahden itsenäisen tuotteen (Elementor ja CF7) leikkauspisteessä, ja kumpikin toimii itsenäisesti oikein. Kolmannen osapuolen lisäosat, kuten WPB Popup for Contact Form 7, ratkaisevat ongelman eri tavalla: ne luovat omia ponnahdusikkunoitaan sen sijaan, että korjaisivat Elementorin. Yllä oleva koodi on pienin välttämätön toimenpide. Lisäät sen kerran functions.php-tiedostoon, eikä se vaadi päivityksiä, kun uusia CF7:n tai Elementorin versioita ilmestyy.

Ensimmäinen menetelmä ei toiminut. Mitä minun pitäisi tarkistaa ennen kuin vaihdan toiseen?

Tarkista kolme asiaa. Ensimmäinen: elementor/popup/show-tapahtuma on saatavilla Elementor Prosta 2.7 alkaen; jos versiosi on alempi, käytä suoraan toista menetelmää. Toinen: avaa konsoli ja kirjoita typeof wpcf7; jos se on undefined, CF7-lisäosa ei ole ladannut JavaScriptiään (etsi virheitä tai ristiriitoja). Kolmas: varmista, että ponnahdusikkunan sisällä olevalla lomakkeella on .wpcf7-luokka; ilman sitä querySelectorAll('.wpcf7 form')-valitsin ei löydä mitään. Valtaosassa tapauksia ensimmäinen menetelmä toimii välittömästi. Jos ei, käytä toista: se on todistettu toimivaksi sadoilla sivustoilla vuosien varrella.

Tarvitseeko minun lisätä kaikki kolme koodinpätkää vai riittääkö yksi?

Ensimmäinen koodinpätkä (uudelleenalustus) on välttämätön minimi. Toinen on vaihtoehto; lisää se vain, jos ensimmäinen ei ratkaissut ongelmaa. Lomakkeen nollaus ja ponnahdusikkunan automaattinen sulkeminen ovat valinnaisia parannuksia, jotka voit lisätä tarpeen mukaan: nollaus on hyödyllinen, jos ponnahdusikkuna avautuu useita kertoja yhden käynnin aikana; automaattinen sulkeminen on avuksi, jos ponnahdusikkunaa käytetään tiedusteluihin eikä se sisällä pitkää vahvistustekstiä. Kaikki kolme koodinpätkää ovat itsenäisiä ja voivat toimia samanaikaisesti. Niiden välillä ei ole ristiriitoja.

Korjauksen jälkeen lomake lähettää, mutta sähköpostit eivät saavu. Liittyykö tämä asiaan?

Ei, sähköpostin toimitusongelmat ovat erillinen aihe, joka ei liity CF7:n toimintaan ponnahdusikkunassa. Jos korjauksen soveltamisen jälkeen lomake näyttää onnistumisviestin (vihreä reunus), AJAX-lähetys toimii oikein. Sähköpostit eivät saavu: tarkista SMTP-asetukset, palveluntarjoajan roskapostisuodattimet ja vastaanottajan osoite CF7-lomakkeen asetuksista. Luotettavaa toimitusta varten käytä SMTP-lisäosaa, kuten Post SMTP tai FluentSMTP, tavallisen wp_mail()-funktion sijaan, sillä palveluntarjoajat usein estävät lähtevän PHP-pohjaisen sähköpostin.

Vaikuttaako tämä ratkaisu muihin CF7-lomakkeisiin sivustolla?

Ei. Molemmat menetelmät ovat eristettyjä: ensimmäinen odottaa Elementorin ponnahdusikkunan avautumista, toinen seuraa vain linkkejä, joissa on href='#elementor-action'. Tavalliset sivuille ja widgetteihin sijoitetut CF7-lomakkeet toimivat edelleen normaalisti; ne alustetaan sivun latauksessa eivätkä ne häiriinny. Ainoa varaus: jos sivustosi käyttää aggressiivista välimuistitusta skriptien yhdistelyllä, lisää ponnahdusikkunan koodi minifioinnin poikkeuksiin kaksinkertaisen suorituksen välttämiseksi.

Kannattaako mukautetun koodin vaivautua vuonna 2026

Molempia lisäosia, Contact Form 7:ää ja Elementor Prota, kehitetään ja päivitetään aktiivisesti. CF7 pitää paikkansa suosituimpana WordPressin lomake-lisäosana, jolla on yli 5 miljoonaa aktiivista asennusta. Elementor Pro on käytössä joka neljännellä WordPress-sivustolla.

Silti tässä kuvattua bugia ei ole korjattu kummankaan lisäosan ydintasolla, eikä sitä todennäköisesti koskaan korjatakaan. Syy on arkkitehtoninen: CF7 vastaa lomakkeista, Elementor dynaamisesta sisällöstä, ja skriptien alustaminen dynaamisesti ladatussa DOMissa pysyy kehittäjän vastuulla.

Hyvä uutinen: korjaus on triviaali, koodi lisätään kerran, eikä se vaadi ylläpitoa. Valitse ensimmäinen menetelmä (elementor/popup/show-tapahtuma): se on siistein, ja voit unohtaa ongelman. Jos ponnahdusikkunan lomaketta käytetään kriittisissä liidienkeruun skenaarioissa, lisää myös kenttien nollaus ja automaattinen sulkeminen: käyttökokemus paranee huomattavasti.

Katso yllä oleva video: se näyttää koko prosessin ponnahdusikkunan asettamisesta Contact Form 7:n kanssa Elementorissa. Tämä visuaalinen, vaiheittainen opas täydentää tässä annettuja koodinpätkiä ja auttaa välttämään virheitä koostamisen aikana.