Kasutaja täitis vormi, klõpsas „Saada" ja midagi ei juhtunud. Leht laadis uuesti, väljad tühjenesid, kuid kas e-kiri ka tegelikult teele läks, jääb selgusetuks.

Contact Form 7 ei kuva pärast saatmist vaikimisi visuaalseid teateid. Õnnestumise või vea teated peituvad vormi all väikeses kirjas, ilma animatsiooni ja rõhutuseta. Kasutajad lihtsalt ei märka neid ja lahkuvad, teadmata, kas nende sõnum jõudis kohale.

Saate selle 10 minutiga korda teha. Vaja läheb ainult Contact Form 7 ennast, ükskõik millist hüpikakna pluginat, millel on JavaScripti API, ja 25 rida koodi. Tulemus: pärast vormi saatmist ilmub lehe kohale sujuvalt suur aken (roheline õnnestumise, punane vea korral) ja kaob määratud aja möödudes automaatselt. Ei mingit lehe uuesti laadimist ega kadunud müügivihjeid.

💡 Kiirülevaade:

• Milliseid DOM-i sündmusi Contact Form 7 käivitab ja kuidas tänapäevased nimed erinevad pärandnimedest
• Kuidas luua õnnestumise ja vea hüpikaknaid ükskõik millises WordPressi hüpikakna pluginas
• Hüpikakende CSS-stiilid: ülekate, animatsioon, z-indeks
• Kasutusvalmis jQuery skript: CF7 sündmuste sidumine hüpikakna avamise ja automaatse sulgemisega
• Kaasaegne alternatiiv, kasutades addEventListener ilma jQueryta
• Kuvamise kestuse eraldi seadistamine õnnestumise ja vea jaoks

Milliseid DOM-i sündmusi Contact Form 7 käivitab

Contact Form 7 genereerib kohandatud DOM-i sündmusi vormi töötlemise igas etapis. Siin on täielik nimekiri ametlikust dokumentatsioonist:

Saatmisjärgsete hüpikakende jaoks on vaja kahte sündmust: wpcf7mailsent (õnnestumine) ja wpcf7invalid (valideerimisviga). Võite kasutada ka wpcf7spam eraldi hoiatava akna jaoks, kuid praktikas piisab kahest esimesest.

Oluline märkus: vanemates juhendites ja koodinäidetes on sündmused kirjutatud kooloniga. Näiteks wpcf7:mailsent ja wpcf7:invalid. Seda süntaksit kasutati varasemate CF7 versioonide jQuery konksudes. Täna töötab see endiselt tagasiühilduvuse huvides, kuid kanoonilised nimed ei sisalda koolonit. Allolevas koodis pakun mõlemat varianti: kaasaegset, kasutades addEventListener, ja jQuery varianti projektidele, kus jQuery on juba laaditud.

Objekt event.detail sisaldab kasulikke atribuute: contactFormId (konkreetse vormi ID), pluginVersion (CF7 versioon), inputs (sisestatud andmete massiiv). Kui lehel on mitu vormi, filtreerige contactFormId järgi, nii et hüpikaken avaneb ainult soovitud vormi puhul.

1. Samm: valige hüpikakna plugin ja looge aknad

Vajate JavaScripti API-ga hüpikakna pluginat, et akent saaks skriptist programselt avada. Kaks tõestatud tasuta võimalust WordPress.org-i pluginakataloogist:

• Popup Maker, 700 000+ aktiivset paigaldust, hinne 4,9/5. Väljakutse: PUM.open(popup_id). Võimas tasuta tuum, lehe sihtimine, aja- ja kerimistriggerid, integratsioon populaarsete vormidega. Suurim kogukond, kust leiate vastused igale küsimusele.
• WP Popups, 20 000+ aktiivset paigaldust. Väljakutse: SPU.show(popup_id). Visuaalne Gutenbergil põhinev redaktor, kuvamisfiltrid, Contact Form 7 tugi olemas. Kerge ja kiire.

Looge kaks hüpikakent: üks edukaks saatmiseks, teine vigade jaoks. Igasse paigutage pilt, tekst ja soovi korral nupp „Sulge". Pange tähele iga akna ID-d, sest vajate neid 3. sammu skriptis. Allolevates näidetes on kasutatud ID-sid 1068 (õnnestumine) ja 1065 (viga); teie omad on erinevad.

Siin on, kuidas hüpikaknad seadistatud stiilidega välja näevad:

Eduka saatmise hüpikaken: roheline taust, kinnitusikoon ja tekst.

Veaaken: punane taust, hoiatusikoon ja palve kontrollida sisestatud andmeid.

Ja siin on pildid hüpikakende sisse paigutamiseks:

Saate need pildid asendada enda omadega, määrates hüpikakna pluginaseadetes erinevad teed.

2. Samm: hüpikakende CSS-stiilid

Popup-pluginid ei ekspordi alati kohandatud CSS-i. Kui stiilid ei rakendu pärast akende loomist, lisa need käsitsi: Plugin Settings → Custom CSS või Appearance → Customize → Additional CSS.

Stiilid eduka saatmise hüpikaknale (roheline ülekate, maksimaalne z-indeks):

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
}

Stiilid veateate hüpikaknale (punane ülekate):

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
}

Mis siin toimub: #spu-bg-N on poolläbipaistev taust (ülekate). #spu-N on aken ise. Kõrge z-indeks tagab, et hüpikaken katab kõik lehe elemendid, sealhulgas administreerimisriba.

Kui kasutad mõnda muud hüpikakna pluginat, asenda selektorid. Popup Maker genereerib #pum-N ja .pum-overlay[data-popmake*="N"]. WP Popups kasutab oma eesliiteid; kontrolli brauseri inspektorist (F12) oma akende tegelikke ID-sid.

Samm 3: jQuery skript, mis ühendab CF7 ja hüpikaknad

Skripti saab lisada ühel kolmest viisist: oma alamteema functions.php faili, Code Snippets pluginaga või teema kohandatud JavaScripti sektsiooni. Enne functions.php muutmist tee varukoopia; üks süntaksiviga võib saidi kokku jooksutada.

Allpool on täielik kood koos kommentaaridega. See püüab kinni kaks Contact Form 7 sündmust ja kutsub välja hüpikakna plugin API:

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

Mida pead oma projekti jaoks asendama:

• SPU.show(N) oma hüpikakna plugin meetodiga. Popup Makeri puhul: PUM.open(N).
• 1065 ja 1068 oma hüpikakende ID-dega. Leiad need plugin adminpaneelist.
• Aeg setTimeout-is (millisekundites). 5500 = 5,5 sekundit, 3500 = 3,5 sekundit. Kohanda vastavalt oma eelistusele.
• Selektorid div#spu-N ja div#spu-bg-N; asenda, kui sinu plugin genereerib teistsugused ID-d.

Moodne alternatiiv ilma jQueryta. Kui sinu teema ei laadi jQueryt või soovid kergemat varianti, kasuta natiivseid CF7 sündmusi addEventListener kaudu:

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

See variant töötab Popup Makeriga ega vaja jQueryt. Sündmused wpcf7mailsent ja wpcf7invalid (ilma koolonita) on tänapäevane standard.

Kui lehel on mitu vormi, filtreeri contactFormId järgi:

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

Automaatse sulgumise ajastuse seadistamine

Iga hüpikakna intervall määratakse eraldi, kasutades setTimeout teist argumenti millisekundites. Praktilised soovitused:

• Edukorral: 3-5 sekundit. Kasutaja on juba lugenud teadet „saadetud", seega pole vaja seda kauem hoida.
• Vea korral: 5-7 sekundit. Inimene vajab aega probleemi töötlemiseks, sõnumi uuesti lugemiseks ja arusaamiseks, milliseid välju parandada.
• Rämpspost (wpcf7spam): 8-10 sekundit. Anna piisavalt aega hoiatuse täielikuks lugemiseks, kuid ära blokeeri lehte täielikult.

Väärtus 600 funktsioonis fadeOut(600, 'swing') on hajumisanimatsiooni kestus millisekundites. Alla 400 tundub tõmblev, üle 800 tundub aeglane. 600 on optimaalne.

Kui sul on mitu hüpikakent ja soovid eri vormidele erinevat kestust, mähi setTimeout kutse contactFormId kontrolli sisse, nagu ülaltoodud näites näidatud.

Samm-sammuline videoõpetus: hüpikakna seadistamine pärast Contact Form 7 vormi saatmist nullist. Kui oled WordPressis uus või eelistad koodi lugemisele vaatamist, katab see 8 minutit ekraaniaega poole artiklist.

⁉️🤔 Korduma kippuvad küsimused

Hüpikaken ei avane pärast vormi saatmist. Milles probleem?

Kõige sagedasem põhjus: hüpikakna ID ei ühti skriptis määratuga. Mine oma hüpikakna pluginapaneelile, leia tegelik akna ID ja asenda see SPU.show(N) või PUM.open(N) väljakutses. Teine põhjus: jQuery pole laaditud või on konfliktis. Kontrolli brauseri konsooli (F12 → Console) vigade suhtes. Hüpikakna pluginad määravad kloonimisel või importimisel akendele uued numbrid, samas kui lõigujupis olev vana ID jääb alles; kontrolli numbreid alati pärast importimist.

Kas ma pean paigaldama eraldi hüpikakna plugina? Kas võin kasutada lihtsalt alerti?

Tehniliselt jah: asenda SPU.show(N) käsuga alert('Thank you!') ja teavitus ilmub. Kuid alert blokeerib lehe, näeb võõras välja ja ärritab külastajaid. Sinu kujunduse, ikooni ja sujuva animatsiooniga kohandatud hüpikaken on osa saidist, mitte brauseri süsteemidialoog. Meie kogemus mitme projekti põhjal näitab, et alerti asendamine bränditud hüpikaknaga vähendab märgatavalt kohest põrkemäära.

Kood töötab ainult ühe vormi puhul. Kuidas panna see töötama mitme vormiga?

Kasuta filtreerimist event.detail.contactFormId järgi. jQuery variandi puhul mähi väljakutse kontrolli sisse: if (event.detail.contactFormId === 123) { SPU.show(1068); }. Puhta JS-i puhul on tingimusega näide toodud 3. sammus.

Mis siis, kui jQuery pole saidile laaditud?

Kasuta 3. sammus toodud addEventListener varianti. See ei vaja jQueryt ja töötab kõigis kaasaegsetes brauserites. Ainus nüanss: hüpikakna sulgemine natiivse DOM-i kaudu toimub elemendi käsitsi peitmisega, kuna fadeOut meetod pole saadaval. Alternatiivina lisa CSS-klass koos transition omadusega ja lülita seda.

Kas ma võin kasutada ühte hüpikakent kõigi saidi vormide jaoks?

Jah, kui teavitustekst on universaalne. Loo üks eduka saatmise hüpikaken ja üks veateate hüpikaken, seejärel ava need kõigi wpcf7mailsent ja wpcf7invalid sündmuste puhul, filtreerimata contactFormId järgi. Kui aga eri lehtede vormidel on erinev kontekst, on parem luua eraldi aknad. „Konsultatsioonitaotlus vastu võetud" ja „Tellimus kinnitatud" näevad välja erinevad.

Popup Maker või WP Popups: kumba oma projekti jaoks valida

Valik taandub kolmele stsenaariumile:

• Vajad maksimaalseid funktsioone ja integratsioone? Vali Popup Maker. Lehe sihtimine, aja- ja kerimistrigerid, integreerimine kümnete vormipluginatega, suur kogukond. Tasuta tuum katab 90% kasutusjuhtudest.
• Soovid lihtsust ja Gutenbergi visuaalset redaktorit? Sinu valik on WP Popups. Kaasaegne liides, kiire seadistamine, väiksem üldkulu. Töötab Contact Form 7-ga kohe karbist välja.
• Vajad hüpikakent, mille sees on Contact Form 7 vorm? See on teistsugune stsenaarium (mitte teavitused pärast saatmist, vaid vorm modaalaknas, mis avaneb nupuvajutusega). Selle jaoks on olemas spetsialiseeritud WPB Popup for Contact Form 7, mis avab CF7 vormi hüpikaknas, mitte ei reageeri selle saatmisele.

Mõlemad teavituste pluginad on tasuta ja saadaval WordPress.org kataloogis. Vali see, mis sobib paremini sinu tehnoloogiavirnaga, ja asenda selle API väljakutse 3. sammu skriptis. Hüpikakende teemat ennast saab lõputult uurida: teavitusteksti A/B testimine, lugemisajal põhinevad viivitused, erinevad aknad eri vormide jaoks. Kuid alus (CF7 sündmus + hüpikakna väljakutse + automaatne sulgemine) katab valdava enamuse reaalsetest ülesannetest WordPressi saitidel.