Käyttäjä täytti lomakkeen, klikkasi "Lähetä", eikä mitään tapahtunut. Sivu latautui uudelleen, kentät tyhjenivät, mutta jää epäselväksi, lähtikö sähköposti todella.

Contact Form 7 ei näytä visuaalisia ilmoituksia lähetyksen jälkeen oletuksena. Onnistumis- tai virheilmoitukset piiloutuvat lomakkeen alle pienellä tekstillä, ilman animaatiota, ilman korostusta. Käyttäjät eivät yksinkertaisesti huomaa niitä ja poistuvat tietämättä, menikö heidän viestinsä perille.

Voit korjata tämän 10 minuutissa. Tarvitset vain Contact Form 7:n itsensä, minkä tahansa ponnahdusikkunalisäosan, jossa on JavaScript-rajapinta, ja 25 riviä koodia. Lopputulos: lomakkeen lähetyksen jälkeen suuri ikkuna ilmestyy sulavasti sivun päälle (vihreä onnistumiselle, punainen virheelle) ja katoaa automaattisesti asetetun ajan kuluttua. Ei sivun uudelleenlatausta, ei menetettyjä liidejä.

💡 Pikakatsaus:

• Mitä DOM-tapahtumia Contact Form 7 laukaisee ja miten nykyiset nimet eroavat vanhoista
• Miten luot onnistumis- ja virhepopupit missä tahansa WordPress-ponnahdusikkunalisäosassa
• CSS-tyylit popupeille: peittokuva, animaatio, z-index
• Valmis jQuery-skripti: CF7-tapahtumien sitominen popupin avaamiseen ja automaattiseen sulkemiseen
• Moderni vaihtoehto käyttäen addEventListener-metodia ilman jQuerya
• Näyttöajan määrittäminen erikseen onnistumiselle ja virheelle

Mitä DOM-tapahtumia Contact Form 7 laukaisee

Contact Form 7 tuottaa mukautettuja DOM-tapahtumia jokaisessa lomakkeen käsittelyn vaiheessa. Tässä on täydellinen lista virallisesta dokumentaatiosta:

Lähetyksen jälkeisiin popupeihin tarvitset kaksi tapahtumaa: wpcf7mailsent (onnistuminen) ja wpcf7invalid (validointivirhe). Voisit käyttää myös wpcf7spam-tapahtumaa erilliseen varoitusikkunaan, mutta käytännössä kaksi ensimmäistä riittävät.

Tärkeä huomio: vanhemmissa oppaissa ja koodinpätkissä tapahtumat kirjoitetaan kaksoispisteellä. Esimerkiksi wpcf7:mailsent ja wpcf7:invalid. Tätä syntaksia käytettiin aiempien CF7-versioiden jQuery-koukuissa. Nykyään se toimii yhä taaksepäin yhteensopivuuden vuoksi, mutta kanoniset nimet eivät sisällä kaksoispistettä. Alla olevassa koodissa annan molemmat variantit: modernin, jossa käytetään addEventListener-metodia, ja jQuery-variantin projekteihin, joissa jQuery on jo ladattu.

event.detail-objekti sisältää hyödyllisiä ominaisuuksia: contactFormId (tietyn lomakkeen ID), pluginVersion (CF7-versio), inputs (taulukko syötetyistä tiedoista). Jos sivulla on useita lomakkeita, suodata contactFormId-arvon perusteella, jotta popup avautuu vain tarkoitetulle lomakkeelle.

Vaihe 1: valitse ponnahdusikkunalisäosa ja luo ikkunat

Tarvitset ponnahdusikkunalisäosan, jossa on JavaScript-rajapinta, jotta ikkunan voi avata ohjelmallisesti skriptistä. Kaksi testattua ilmaista vaihtoehtoa WordPress.orgin lisäosahakemistosta:

• Popup Maker, yli 700 000 aktiivista asennusta, arvosana 4,9/5. Kutsu: PUM.open(popup_id). Tehokas ilmainen ydin, sivukohdennus, aika- ja vierityslaukaisimet, integraatio suosittuihin lomakkeisiin. Suurin yhteisö, josta löydät vastauksen mihin tahansa kysymykseen.
• WP Popups, yli 20 000 aktiivista asennusta. Kutsu: SPU.show(popup_id). Visuaalinen Gutenberg-pohjainen editori, näyttösuodattimet, Contact Form 7 -tuki suoraan laatikosta. Kevyt ja nopea.

Luo kaksi popupia: yksi onnistuneelle lähetykselle, toinen virheille. Sijoita kumpaankin kuva, teksti ja valinnaisesti "Sulje"-painike. Merkitse muistiin kunkin ikkunan ID, sillä tarvitset niitä vaiheen 3 skriptissä. Alla olevissa esimerkeissä käytetään ID:itä 1068 (onnistuminen) ja 1065 (virhe); sinun omasi ovat erilaiset.

Tältä popupit näyttävät määritetyillä tyyleillä:

Onnistuneen lähetyksen popup: vihreä tausta, vahvistuskuvake ja teksti.

Virheikkuna: punainen tausta, varoituskuvake ja pyyntö tarkistaa syötetyt tiedot.

Ja tässä ovat kuvat popupien sisälle sijoitettaviksi:

Voit korvata nämä kuvat omillasi määrittämällä eri polut ponnahdusikkunalisäosan asetuksissa.

Vaihe 2: CSS-tyylit popupeille

Popup-lisäosat eivät aina vie mukanaan mukautettuja CSS-tyylejä. Jos tyylit eivät ole käytössä ponnahdusikkunoiden luomisen jälkeen, lisää ne manuaalisesti: Lisäosan asetukset → Custom CSS, tai Appearance → Customize → Additional CSS.

Onnistuneen lähetyksen ponnahdusikkunan tyylit (vihreä peittokuva, maksimi 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
}

Virheponnahdusikkunan tyylit (punainen peittokuva):

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
}

Mitä tässä tapahtuu: #spu-bg-N on puoliläpinäkyvä tausta (peittokuva). #spu-N on itse ikkuna. Korkea z-index varmistaa, että ponnahdusikkuna peittää kaikki sivun elementit, mukaan lukien ylläpitopalkin.

Jos käytät eri popup-lisäosaa, vaihda valitsimet. Popup Maker tuottaa #pum-N ja .pum-overlay[data-popmake*="N"]. WP Popups käyttää omia etuliitteitään; tarkista selaimen kehittäjätyökaluista (F12) ikkunoidesi todelliset ID:t.

Vaihe 3: jQuery-skripti, joka yhdistää CF7:n ja popupit

Skriptin voi lisätä kolmella tavalla: lapsiteeman functions.php-tiedostoon, Code Snippets -lisäosan kautta tai teeman mukautettuun JavaScript-osioon. Ennen kuin muokkaat functions.php-tiedostoa, tee varmuuskopio; yksi syntaksivirhe kaataa sivuston.

Alla on koko koodi kommentteineen. Se nappaa kaksi Contact Form 7 -tapahtumaa ja kutsuu popup-lisäosan rajapintaa:

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

Mitä sinun tulee korvata omassa projektissasi:

• SPU.show(N) popup-lisäosasi metodilla. Popup Makerille: PUM.open(N).
• 1065 ja 1068 omilla popup-ID:illäsi. Löydät ne lisäosan hallintapaneelista.
• Aika setTimeout-funktiossa (millisekunteina). 5500 = 5,5 sekuntia, 3500 = 3,5 sekuntia. Säädä mieltymystesi mukaan.
• Valitsimet div#spu-N ja div#spu-bg-N; vaihda, jos lisäosasi tuottaa erilaiset ID:t.

Moderni vaihtoehto ilman jQueryä. Jos teemasi ei lataa jQueryä tai haluat kevyemmän ratkaisun, käytä natiiveja CF7-tapahtumia addEventListener-metodin kautta:

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

Tämä versio toimii Popup Makerin kanssa eikä vaadi jQueryä. Tapahtumat wpcf7mailsent ja wpcf7invalid (ilman kaksoispistettä) ovat moderni standardi.

Jos sivulla on useita lomakkeita, suodata contactFormId-kentän perusteella:

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

Automaattisen sulkeutumisen ajoituksen määrittäminen

Kunkin popupin aikaväli asetetaan erikseen setTimeout-funktion toisella argumentilla millisekunteina. Käytännön suositukset:

• Onnistuminen: 3-5 sekuntia. Käyttäjä on jo lukenut "lähetetty", joten sitä ei tarvitse pitää esillä pidempään.
• Virhe: 5-7 sekuntia. Henkilö tarvitsee aikaa käsitellä ongelma, lukea viesti uudelleen ja ymmärtää, mitkä kentät pitää korjata.
• Roskaposti (wpcf7spam): 8-10 sekuntia. Anna riittävästi aikaa lukea varoitus kokonaan, mutta älä lukitse sivua täysin.

Arvo 600 kohdassa fadeOut(600, 'swing') on häivytysanimaation kesto millisekunteina. Alle 400 näyttää nykivältä, yli 800 tuntuu hitaalta. 600 on optimaalinen.

Jos sinulla on useita popupeja ja haluat eri kestoja eri lomakkeille, kääri setTimeout-kutsu contactFormId-tarkistuksen sisään, kuten yllä olevassa esimerkissä näytettiin.

Vaiheittainen video-opastus: popupin asettaminen Contact Form 7 -lähetyksen jälkeen alusta alkaen. Jos olet uusi WordPressin käyttäjä tai katsot mieluummin kuin luet koodia, nämä 8 minuuttia ruutuaikaa kattavat puolet artikkelista.

⁉️🤔 Usein kysytyt kysymykset

Ponnahdusikkuna ei avaudu lomakkeen lähetyksen jälkeen. Mikä on vialla?

Yleisin syy: ponnahdusikkunan ID ei täsmää skriptissä määritellyn kanssa. Mene ponnahdusikkunalisäosan hallintapaneeliin, etsi ikkunan todellinen ID ja korvaa se SPU.show(N)- tai PUM.open(N)-kutsussa. Toinen syy: jQuery ei ole latautunut tai se on ristiriidassa. Tarkista selaimen konsoli (F12 → Console) virheiden varalta. Ponnahdusikkunalisäosat antavat ikkunoille uusia numeroita kloonauksen tai tuonnin yhteydessä, kun taas pätkän vanha ID säilyy; tarkista aina numerot tuonnin jälkeen.

Täytyykö minun asentaa erillinen ponnahdusikkunalisäosa? Voinko käyttää vain alertia?

Teknisesti kyllä: korvaa SPU.show(N) koodilla alert('Thank you!'), niin ilmoitus tulee näkyviin. Mutta alert lukitsee sivun, näyttää vieraalta ja ärsyttää kävijöitä. Oman designin, kuvakkeen ja sulavan animaation sisältävä räätälöity ponnahdusikkuna on osa sivustoa eikä selaimen järjestelmädialogi. Kokemuksemme mukaan useissa projekteissa alertin korvaaminen brändätyllä ponnahdusikkunalla vähentää huomattavasti välitöntä poistumisprosenttia.

Koodi toimii vain yhdelle lomakkeelle. Miten saan sen toimimaan useille lomakkeille?

Käytä suodatusta event.detail.contactFormId-arvon perusteella. jQuery-versiossa kääri kutsu tarkistukseen: if (event.detail.contactFormId === 123) { SPU.show(1068); }. Vanilla JS:lle ehdollinen esimerkki on annettu vaiheessa 3.

Entä jos jQuery ei ole latautunut sivustolla?

Käytä vaiheen 3 addEventListener-versiota. Se ei vaadi jQuerya ja toimii kaikissa moderneissa selaimissa. Ainoa vivahde: ponnahdusikkunan sulkeminen natiivin DOM:n kautta tapahtuu piilottamalla elementti manuaalisesti, koska fadeOut-metodi ei ole käytettävissä. Vaihtoehtoisesti voit lisätä CSS-luokan, jossa on transition, ja vaihdella sitä.

Voinko käyttää yhtä ponnahdusikkunaa kaikille sivuston lomakkeille?

Kyllä, jos ilmoitusteksti on universaali. Luo yksi onnistumisponnahdusikkuna ja yksi virheponnahdusikkuna ja avaa ne kaikille wpcf7mailsent- ja wpcf7invalid-tapahtumille ilman suodatusta contactFormId-arvon perusteella. Jos eri sivuilla olevilla lomakkeilla on kuitenkin eri kontekstit, on parempi luoda erilliset ikkunat. "Yhteydenottopyyntö vastaanotettu" ja "Tilaus vahvistettu" näyttävät erilaisilta.

Popup Maker vai WP Popups: kumpi valita projektiisi

Valinta kiteytyy kolmeen skenaarioon:

• Tarvitsetko maksimaaliset ominaisuudet ja integraatiot? Valitse Popup Maker. Sivukohdennus, aika- ja vieritysliipaisimet, integraatio kymmenien lomakelisäosien kanssa, valtava yhteisö. Ilmainen ydin kattaa 90% käyttötapauksista.
• Haluatko yksinkertaisuutta ja Gutenberg-visuaalieditorin? Valintasi on WP Popups. Moderni käyttöliittymä, nopea asennus, vähemmän kuormaa. Toimii Contact Form 7:n kanssa suoraan laatikosta.
• Tarvitsetko ponnahdusikkunan, jonka sisällä on Contact Form 7 -lomake? Se on eri skenaario (ei ilmoituksia lähetyksen jälkeen, vaan lomake modaali-ikkunassa, joka avautuu painikkeen napsautuksesta). Tähän on olemassa erikoistunut WPB Popup for Contact Form 7, joka avaa CF7-lomakkeen ponnahdusikkunassa sen sijaan, että reagoisi sen lähetykseen.

Molemmat ilmoituslisäosat ovat ilmaisia ja saatavilla WordPress.org-hakemistossa. Valitse se, joka sopii paremmin omaan työkalupakkiisi, ja korvaa sen API-kutsu vaiheen 3 skriptissä. Itse ponnahdusikkuna-aihetta voi tutkia loputtomiin: ilmoitustekstin A/B-testausta, viiveitä lukemisajan perusteella, eri ikkunoita eri lomakkeille. Mutta perusta (CF7-tapahtuma + ponnahdusikkunakutsu + automaattinen sulkeminen) kattaa valtaosan todellisista tehtävistä WordPress-sivustoilla.