Użytkownik wypełnił formularz, kliknął „Wyślij" i nic. Strona przeładowała się, pola zostały wyczyszczone, a nie wiadomo, czy wiadomość została wysłana.

Contact Form 7 domyślnie nie pokazuje wizualnych powiadomień po wysłaniu. Komunikaty o sukcesie lub błędzie są ukryte pod formularzem, napisane drobną czcionką, bez animacji, bez wyróżnienia. Użytkownik po prostu ich nie zauważa i odchodzi, nie wiedząc, czy zgłoszenie zostało przyjęte, czy nie.

Można to naprawić w 10 minut. Potrzebny jest sam Contact Form 7, dowolna wtyczka do pop-upów z API JavaScript i 25 linijek kodu. Rezultat: po wysłaniu formularza na stronie płynnie pojawia się duże okno, zielone dla sukcesu, czerwone dla błędu, i samo znika po ustawionym czasie. Bez przeładowania, bez utraconych leadów.

💡 Szybki przegląd:

• Jakie zdarzenia DOM generuje Contact Form 7 i czym współczesne nazwy różnią się od starych
• Jak stworzyć pop-upy sukcesu i błędu w dowolnej wtyczce do pop-upów WordPress
• Style CSS dla pop-upów: overlay, animacja, z-index
• Gotowy skrypt jQuery: powiązanie zdarzeń CF7 z otwieraniem i automatycznym zamykaniem pop-upów
• Nowoczesna alternatywa na addEventListener, bez jQuery
• Ustawienie czasu wyświetlania: osobno dla sukcesu i błędu

Jakie zdarzenia DOM generuje Contact Form 7

Contact Form 7 generuje niestandardowe zdarzenia DOM na każdym etapie przetwarzania formularza. Oto pełna lista z oficjalnej dokumentacji:

Do pop-upów po wysłaniu potrzebne są dwa zdarzenia: wpcf7mailsent (sukces) i wpcf7invalid (błąd walidacji). Można też wykorzystać wpcf7spam do osobnego okna ostrzegawczego, ale w praktyce wystarczają dwa pierwsze.

Ważny niuans: w starych poradnikach i snippetach zdarzenia zapisywane są z dwukropkiem. Na przykład wpcf7:mailsent i wpcf7:invalid. Taka składnia była używana w hookach jQuery wczesnych wersji CF7. Dziś działa dla zachowania kompatybilności wstecznej, ale kanoniczne nazwy są bez dwukropka. W kodzie poniżej podam oba warianty: nowoczesny na addEventListener i wariant jQuery dla projektów, w których jQuery jest już podłączone.

Obiekt event.detail zawiera przydatne właściwości: contactFormId (ID konkretnego formularza), pluginVersion (wersja CF7), inputs (tablica wprowadzonych danych). Jeśli na stronie jest kilka formularzy, należy filtrować po contactFormId, pop-up otworzy się tylko dla właściwego.

Krok 1: wybieramy wtyczkę do pop-upów i tworzymy okna

Potrzebna jest wtyczka do pop-upów z API JavaScript, aby okno można było otworzyć programowo ze skryptu. Dwa sprawdzone darmowe warianty z katalogu WordPress.org:

• Popup Maker, 700 000+ aktywnych instalacji, ocena 4.9/5. Wywołanie: PUM.open(popup_id). Potężny darmowy rdzeń, targetowanie według stron, wyzwalacze czasowe i przy przewijaniu, integracja z popularnymi formularzami. Największa społeczność, znajdą Państwo odpowiedź na każde pytanie.
• WP Popups, 20 000+ aktywnych instalacji. Wywołanie: SPU.show(popup_id). Edytor wizualny na Gutenbergu, filtry wyświetlania, wbudowana obsługa Contact Form 7. Lekki i szybki.

Proszę utworzyć dwa pop-upy: pierwszy dla pomyślnego wysłania, drugi dla błędu. W każdym proszę umieścić obrazek, tekst i opcjonalnie przycisk „Zamknij". Proszę zapisać ID każdego okna, będą potrzebne w skrypcie w kroku 3. W przykładach poniżej użyto ID 1068 (sukces) i 1065 (błąd); u Państwa będą własne.

Oto jak wyglądają pop-upy z ustawionymi stylami:

Pop-up pomyślnego wysłania: zielone tło, ikona potwierdzenia i tekst.

Okno błędu: czerwone tło, ikona ostrzeżenia i prośba o sprawdzenie wprowadzonych danych.

A to same obrazy do umieszczenia wewnątrz pop-upów:

Obrazki można zastąpić własnymi, podając inne ścieżki w ustawieniach wtyczki do pop-upów.

Krok 2: style CSS dla pop-upów

Wtyczki popup nie zawsze eksportują niestandardowy CSS. Jeśli po utworzeniu okien style nie zostały zastosowane, proszę dodać je ręcznie: Ustawienia wtyczki → Custom CSS lub Appearance → Customize → Additional CSS.

Style dla popupu potwierdzenia wysłania (zielony overlay, maksymalny 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
}

Style dla popupu błędu (czerwony overlay):

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
}

Co się tu dzieje: #spu-bg-N to półprzezroczyste tło (overlay). #spu-N to samo okno. Wysoki z-index gwarantuje, że popup przykryje wszystkie elementy strony, w tym pasek administracyjny.

Jeśli korzystają Państwo z innej wtyczki popup, proszę zastąpić selektory. Popup Maker generuje #pum-N i .pum-overlay[data-popmake*="N"]. WP Popups używa własnych prefiksów, proszę sprawdzić rzeczywiste ID okien w inspektorze przeglądarki (F12).

Krok 3: Skrypt jQuery łączący CF7 i popupy

Skrypt można wstawić na jeden z trzech sposobów: w pliku functions.php motywu potomnego, przez wtyczkę Code Snippets lub w sekcji niestandardowego JavaScript motywu. Przed edycją functions.php proszę wykonać kopię zapasową, jeden błąd składniowy może położyć stronę.

Poniżej pełny kod z komentarzami. Przechwytuje on dwa zdarzenia Contact Form 7 i wywołuje API wtyczki popup:

1
// START: Contact Form 7 + Popups — попапы при успехе и ошибке
2
jQuery(document).ready(function($) {
3
 
4
    // Попап при ОШИБКЕ валидации (поля не заполнены или битые)
5
    $(".wpcf7").on('wpcf7:invalid', function(event) {
6
        SPU.show(1065);   // ID попапа ошибки — замените на свой
7
        setTimeout(function() {
8
            $('div#spu-1065, div#spu-bg-1065').fadeOut(600, 'swing');
9
        }, 5500);          // авто-закрытие через 5,5 секунд
10
    });
11
 
12
    // Попап при УСПЕШНОЙ отправке
13
    $(".wpcf7").on('wpcf7:mailsent', function(event) {
14
        SPU.show(1068);   // ID попапа успеха — замените на свой
15
        setTimeout(function() {
16
            $('div#spu-1068, div#spu-bg-1068').fadeOut(600, 'swing');
17
        }, 3500);          // авто-закрытие через 3,5 секунды
18
    });
19
 
20
});
21
// END: Contact Form 7 + Popups

Co należy dostosować do własnego projektu:

• SPU.show(N) na metodę Państwa wtyczki popup. Dla Popup Maker: PUM.open(N).
• 1065 i 1068 na ID Państwa popupów. Znajdą je Państwo w panelu administracyjnym wtyczki.
• Czas w setTimeout (milisekundy). 5500 = 5,5 sekundy, 3500 = 3,5 sekundy. Proszę dobrać według uznania.
• Selektory div#spu-N i div#spu-bg-N proszę zastąpić, jeśli wtyczka generuje inne ID.

Nowoczesna alternatywa bez jQuery. Jeśli motyw nie ładuje jQuery lub chcą Państwo lżejsze rozwiązanie, proszę użyć natywnych zdarzeń CF7 przez addEventListener:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    // event.detail.contactFormId — ID конкретной формы (если их несколько)
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);

Ten wariant działa z Popup Maker i nie wymaga jQuery. Zdarzenia wpcf7mailsent i wpcf7invalid bez dwukropka to współczesny standard.

Jeśli na stronie jest kilka formularzy, proszę filtrować po contactFormId:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    if ('123' === event.detail.contactFormId) {
3
        PUM.open(1068);  // попап только для формы ID=123
4
    }
5
}, false);

Ustawienia czasu automatycznego zamykania

Interwał dla każdego popupa ustawia się osobno: drugi argument setTimeout w milisekundach. Zalecenia z praktyki:

• Sukces: 3-5 sekund. Użytkownik przeczytał już komunikat „wysłano", dłuższe wyświetlanie nie ma sensu.
• Błąd: 5-7 sekund. Osoba potrzebuje czasu, aby zrozumieć problem, przeczytać ponownie komunikat i zorientować się, które pola poprawić.
• Spam (wpcf7spam): 8-10 sekund. Proszę dać przeczytać ostrzeżenie w całości, ale nie blokować strony na stałe.

Wartość 600 w fadeOut(600, 'swing') to czas trwania animacji znikania w milisekundach. Poniżej 400 jest szarpana, powyżej 800 przeciągnięta. 600 to złoty środek.

Jeśli popupów jest kilka i chcą Państwo różny czas dla różnych formularzy, proszę opakować wywołanie setTimeout w sprawdzenie contactFormId, jak w przykładzie powyżej.

Wideo krok po kroku na ten temat: konfiguracja popupa po wysłaniu Contact Form 7 od podstaw. Jeśli są Państwo początkujący w WordPress lub wygodniej jest Państwu oglądać niż czytać kod, 8 minut ekranu zastąpi połowę artykułu.

⁉️🤔 Często zadawane pytania

Pop-up nie otwiera się po wysłaniu formularza. O co chodzi?

Najczęstsza przyczyna: ID pop-upu nie zgadza się z tym zapisanym w skrypcie. Proszę wejść do panelu administracyjnego wtyczki pop-upów, znaleźć rzeczywiste ID okna i wstawić je do wywołania SPU.show(N) lub PUM.open(N). Druga przyczyna: jQuery nie jest załadowane lub występuje konflikt. Proszę sprawdzić konsolę przeglądarki (F12 → Console) pod kątem błędów. Wtyczki pop-upów podczas klonowania lub importu nadają oknom nowy numer, a stare ID z fragmentu kodu pozostaje, dlatego po imporcie zawsze należy zweryfikować numery.

Czy koniecznie trzeba instalować osobną wtyczkę do pop-upów? Może wystarczy alert?

Technicznie można: proszę zastąpić SPU.show(N) przez alert('Спасибо!'), a powiadomienie się pojawi. Jednak alert blokuje stronę, wygląda obco i irytuje odwiedzających. Niestandardowy pop-up z Pana/Pani projektem, ikoną i płynną animacją jest częścią witryny, a nie systemowym oknem przeglądarki. Z naszego doświadczenia na kilku projektach wynika, że zastąpienie alertu markowym pop-upem zauważalnie obniża odsetek natychmiastowych wyjść z witryny.

Kod działa tylko na jednym formularzu. Jak zrobić, żeby działał na kilku?

Proszę użyć filtrowania po event.detail.contactFormId. W wariancie jQuery proszę opakować wywołanie w warunek: if (event.detail.contactFormId === 123) { SPU.show(1068); }. Dla vanilla JS przykład z warunkiem podano w kroku 3.

Co zrobić, jeśli na stronie nie ma jQuery?

Proszę użyć wariantu z addEventListener z kroku 3. Nie wymaga on jQuery i działa we wszystkich nowoczesnych przeglądarkach. Jedyna różnica: zamykanie pop-upu przez natywny DOM odbywa się przez ręczne ukrywanie elementu, metoda fadeOut jest niedostępna. Alternatywnie można dodać klasę CSS z transition i ją przełączać.

Czy można użyć jednego pop-upu dla wszystkich formularzy na stronie?

Można, jeśli tekst powiadomienia jest uniwersalny. Proszę utworzyć jeden pop-up sukcesu i jeden pop-up błędu, a w skrypcie otwierać je dla wszystkich zdarzeń wpcf7mailsent i wpcf7invalid bez filtrowania po contactFormId. Jeśli jednak na różnych podstronach formularze mają różny kontekst, lepiej zrobić osobne okna, teksty „Zgłoszenie na konsultację zostało przyjęte" i „Subskrypcja została aktywowana" wyglądają inaczej.

Popup Maker czy WP Popups: co wybrać do swojego projektu

Wybór sprowadza się do trzech scenariuszy:

• Potrzebują Państwo maksimum możliwości i integracji, proszę wybrać Popup Maker. Targetowanie po stronach, wyzwalacze czasowe i przy przewijaniu, integracja z dziesiątkami wtyczek formularzy, ogromna społeczność. Bezpłatny rdzeń wystarcza do 90% zadań.
• Zależy Państwu na lekkości i edytorze wizualnym Gutenberg, Państwa wybór to WP Popups. Nowoczesny interfejs, szybka konfiguracja, mniejszy narzut. Działa z Contact Form 7 od razu po instalacji.
• Potrzebują Państwo pop-upu właśnie z formularzem Contact Form 7 w środku, to inny scenariusz, nie powiadomienie po wysłaniu, a formularz w oknie modalnym po kliknięciu przycisku. Do tego służy specjalistyczna wtyczka WPB Popup for Contact Form 7, która otwiera formularz CF7 w pop-upie, a nie reaguje na jego wysłanie.

Obie wtyczki do powiadomień są bezpłatne i dostępne w katalogu WordPress.org. Proszę wybrać tę, która lepiej pasuje do Państwa stosu technologicznego, i wstawić jej wywołanie API do skryptu z kroku 3. Sam tematykę pop-upów można rozwijać w nieskończoność: testy A/B tekstów powiadomień, opóźnienie uwzględniające czas czytania, różne okna dla różnych formularzy. Jednak podstawa, zdarzenie CF7 + wywołanie pop-upu + automatyczne zamykanie, pokrywa zdecydowaną większość rzeczywistych zadań na stronach WordPress.