💡 Jak skonfigurować uniwersalny formularz CF7 z ukrytym polem

• Proszę zainstalować wtyczkę Dynamic Text Extension i aktywować ją w sekcji Wtyczki
• Proszę dodać do formularza tag dynamic hidden z identyfikatorem id:HIDDENINPUT do przekazywania tytułu bloku
• Proszę utworzyć pop-up w Popup Maker, wstawić shortcode formularza i skonfigurować wyzwalacz Click Open
• Proszę podłączyć skrypt jQuery, który przechwytuje tytuł bloku i wstawia go do ukrytego pola
• Proszę dodać [dynamichidden-120] do szablonu wiadomości, aby widzieć, z którego bloku nadeszło zgłoszenie
• Proszę sprawdzić wysyłanie: pop-up błędu przy pustym formularzu i pop-up sukcesu po pomyślnym wysłaniu

Krok 1: wtyczka do ukrytego pola, Dynamic Text Extension

Podstawowy Contact Form 7 nie potrafi dodawać ukrytych pól „od ręki". Do niedawna to zadanie realizowała wtyczka Contact Form 7** Modules**, ale nie była aktualizowana od 2017 roku i nie testowano jej z najnowszymi wersjami WordPress.

Aktualnym zamiennikiem jest Contact Form 7 - Dynamic Text Extension (DTX). Wtyczka jest aktywnie wspierana (ostatnia aktualizacja, czerwiec 2026), działa z WordPress 7.0 i potrafi znacznie więcej niż tylko obsługa ukrytego pola: dynamiczne wartości z URL, cookie, metapól wpisu, danych bieżącego użytkownika i niestandardowych shortcode'ów.

Proszę zainstalować wtyczkę przez Wtyczki → Dodaj nową, wyszukać po nazwie „Dynamic Text Extension", kliknąć „Zainstaluj teraz" i aktywować. W edytorze formularza Contact Form 7 pojawią się dwa nowe przyciski w rozwijanej liście generatora tagów: dynamic text i dynamic hidden.

W naszym scenariuszu potrzebny jest właśnie dynamic hidden. Proszę utworzyć ukryte pole z identyfikatorem, przez który skrypt jQuery będzie przekazywał tytuł bloku:

1
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Jeśli z jakichś powodów DTX nie jest odpowiedni, można również użyć starego Contact Form 7 Modules: dla podstawowego ukrytego pola wciąż jest funkcjonalny, ale nie był testowany z najnowszymi wersjami WordPress i nie był aktualizowany od 2017 roku. Shortcode będzie wyglądał następująco: [hidden hidden-120 id:HIDDENINPUT].

Krok 2: szablon formularza i wiadomości

Formularz składa się ze standardowych pól CF7 oraz naszego ukrytego pola. Oto działający szablon, proszę go skopiować do edytora formularza:

1
[text* text-59 placeholder "Ваше имя*"]
2
[tel* tel-116 placeholder "Телефон*"]
3
[email Email placeholder "Email"]
4
[recaptcha]
5
[submit "Отправить"]
6
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Pola text-59, tel-116 oraz Email są obowiązkowe (gwiazdka po typie). reCAPTCHA chroni przed spamem. Przycisk wysyłania i ukryte pole zamykają formularz.

Teraz proszę skonfigurować szablon wiadomości na karcie „List" w edytorze formularza. Kluczowy moment: dodać [dynamichidden-120] (lub [hidden-120] dla CF7 Modules) w treści wiadomości, aby widzieć, z którego bloku przyszło zgłoszenie:

Do: moc.niamodruoy@liame-ruoy

Od: [Email]

Temat: Zgłoszenie ze strony, [dynamichidden-120]

Treść wiadomości:

1
Выбранный товар/услуга: [dynamichidden-120]
2
---
3
Имя: [text-59]
4
Телефон: [tel-116]
5
Email: [Email]
6
---
7
Сообщение отправлено со страницы: [_url]

Koniecznie proszę zaznaczyć checkbox „Użyj formatu HTML wiadomości", w przeciwnym razie formatowanie się rozjedzie. Dla niezawodnego dostarczania wiadomości proszę skonfigurować SMTP (przez dowolną wtyczkę SMTP, Post SMTP, WP Mail SMTP lub Google Gmail API), bez tego wiadomości z CF7 często trafiają do spamu.

Krok 3: tworzenie popupu w Popup Maker

Stara wtyczka Popups - WordPress Popup została zamknięta w lipcu 2022 roku z powodu luki w zabezpieczeniach i nie jest dostępna do instalacji. Nowoczesnym zamiennikiem jest Popup Maker: ponad 780 000 aktywnych instalacji, integracja z CF7 „od ręki", dziesiątki wyzwalaczy i reguł targetowania.

Proszę zainstalować Popup Maker przez Wtyczki → Dodaj nową, a następnie przejść do Popup Maker → Utwórz popup. Proszę nadać popupowi nazwę i w edytorze treści wstawić shortcode formularza:

1
[contact-form-7 id="123" title="Универсальная форма"]

ID formularza można znaleźć na liście formularzy CF7 (kolumna „Shortcode"). W ustawieniach popupu po prawej stronie, w bloku Triggers, proszę wybrać Click Open i podać selektor CSS przycisku, po kliknięciu którego ma się otwierać popup, na przykład .jet-button-order. To odpowiednik „Manual Triggering" ze starego Popups.

Teraz proszę poznać ID utworzonego popupu. Proszę otworzyć popup w edytorze i spojrzeć na adres URL przeglądarki: post.php?post=4197&action=edit, liczba po post= to właśnie ID (w przykładzie 4197). Będzie ono potrzebne do skryptu w następnym kroku.

Krok 4: skrypt jQuery do przechwytywania tytułu bloku

Skrypt rozwiązuje główne zadanie: przy kliknięciu przycisku wewnątrz bloku przechwytuje tekst tytułu tego bloku, wstawia go do tytułu popupu i do ukrytego pola formularza. Proszę przeanalizować to krok po kroku.

Najpierw proszę przypisać wspólną klasę CSS wszystkim blokom, w których należy szukać tytułu, na przykład ForContactForm7HiddenInput. W Elementorze robi się to przez „Zaawansowane → Klasy CSS" dla sekcji opakowującej.

Sam skrypt podłącza się przez functions.php motywu potomnego lub wtyczkę Code Snippets (bezpieczniej, nie zginie przy aktualizacji motywu):

1
add_action('wp_enqueue_scripts', function () {
2
    wp_enqueue_script(
3
        'cf7-universal-form',
4
        get_stylesheet_directory_uri() . '/cf7-universal-form.js',
5
        ['jquery'],
6
        '1.0',
7
        true
8
    );
9
});

Zawartość pliku cf7-universal-form.js:

1
jQuery(document).ready(function ($) {
2
 
3
    // Переменная для хранения заголовка блока
4
    var blockTitle = '';
5
 
6
    // Захватываем текст заголовка при клике по кнопке
7
    $('.ForContactForm7HiddenInput .jet-button-order').on('click', function () {
8
        blockTitle = $(this)
9
            .closest('.ForContactForm7HiddenInput')
10
            .find('h3.elementor-heading-title')
11
            .text()
12
            .trim();
13
    });
14
 
15
    // Ждём открытия попапа через MutationObserver
16
    var popupId = '4197'; // ID вашего попапа из Popup Maker
17
    var observer = new MutationObserver(function (mutations) {
18
        mutations.forEach(function (mutation) {
19
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
20
                var $popup = $('#popmake-' + popupId);
21
                if ($popup.hasClass('active') && blockTitle) {
22
                    // Вставляем заголовок в попап
23
                    $popup.find('.popup-title').text(blockTitle);
24
                    // Вставляем заголовок в скрытое поле формы
25
                    $('#HIDDENINPUT').val(blockTitle);
26
                }
27
            }
28
        });
29
    });
30
 
31
    // Начинаем следить за попапом
32
    var $popupContainer = $('#popmake-' + popupId);
33
    if ($popupContainer.length) {
34
        observer.observe($popupContainer[0], {
35
            attributes: true,
36
            attributeFilter: ['class']
37
        });
38
    }
39
 
40
});

Co się tutaj dzieje:

• Przechwytywanie nagłówka: po kliknięciu przycisku z klasą .jet-button-order skrypt przechodzi w górę drzewa DOM do bloku nadrzędnego .ForContactForm7HiddenInput, znajduje wewnątrz h3.elementor-heading-title i zapisuje jego tekst w zmiennej blockTitle.
• Monitorowanie popupu: zamiast przestarzałego attrchange.js (którego CDN rawgit.com jest zamknięty) używany jest natywny MutationObserver, który obserwuje zmiany klasy w kontenerze popupu Popup Maker. Gdy pojawi się klasa active (popup jest otwarty), skrypt wstawia zapisany nagłówek do tytułu popupu oraz do ukrytego pola #HIDDENINPUT.
• Selektory: .jet-button-order, klasa przycisku Elementor JetElements; proszę zastąpić ją klasą swojego przycisku. Popup Popup Maker jest renderowany z ID #popmake-{ID}, dlatego w kodzie użyto #popmake-4197, proszę zastąpić 4197 ID swojego popupu.

Przed blokiem jQuery poniżej, wizualny przykład tego, jak wygląda strona z kilkoma blokami i przyciskami „Zamów teraz":

Po kliknięciu przycisku pierwszego bloku skrypt przechwytuje tekst „Rolety", wstawia go do tytułu popupu oraz do ukrytego pola formularza:

Analogicznie dla wszystkich pięciu bloków, tytuł zmienia się dynamicznie, formularz pozostaje ten sam.

Krok 5: popupy dla pomyślnego wysłania i błędu

Popup Maker pozwala utworzyć tyle popupów, ile potrzeba. Dla komunikatów statusowych (sukces / błąd) proszę utworzyć kolejne dwa popupy analogicznie do kroku 3. Nie trzeba ich ręcznie przypisywać do wyzwalaczy, zarządza nimi CF7 poprzez zdarzenia JavaScript.

Popup błędu, pokazuje się, gdy formularz nie przeszedł walidacji. Zawartość:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/flag.svg" alt="Иконка ошибки" width="177" height="161">
3
</p>
4
<p style="text-align: center;">
5
    Форма заполнена с ошибками. Проверьте сообщения под полями ввода и попробуйте снова.
6
</p>

Popup sukcesu, pokazuje się po pomyślnym wysłaniu. Zawartość:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/like.svg" alt="Иконка успешной отправки" width="177" height="161">
3
</p>
4
<p style="text-align: center; padding-top: 15px;">
5
    Готово! Ваше сообщение успешно отправлено. Мы свяжемся с вами в ближайшее время.
6
</p>

Te ikony SVG były używane w starym popupie do wskazywania statusu wysyłki. Można je zastąpić własnymi lub pozostawić bez zmian, są neutralne i niepowiązane z konkretną wtyczką.

Proszę podłączyć otwieranie popupów statusowych poprzez zdarzenia CF7. Należy dodać ten kod do tego samego pliku JS cf7-universal-form.js po głównym skrypcie:

1
// Показ попапа при ошибке валидации CF7
2
document.addEventListener('wpcf7invalid', function () {
3
    $('#popmake-1065').popmake('open');
4
}, false);
5
 
6
// Показ попапа при успешной отправке
7
document.addEventListener('wpcf7mailsent', function () {
8
    $('#popmake-1068').popmake('open');
9
}, false);

Proszę zastąpić 1065 i 1068 rzeczywistymi ID swoich popupów statusowych z Popup Maker.

Style CSS dla popupów statusowych, podstawowe, podłącza się przez Wygląd → Dostosuj → Dodatkowy CSS lub w pliku motywu:

1
/* Попап ошибки */
2
div#popmake-1065 {
3
    z-index: 99999999;
4
}
5
div#popmake-1065 .popmake-close {
6
    font-size: 30px;
7
    color: #9e9e9e;
8
}
9
 
10
/* Попап успеха */
11
div#popmake-1068 {
12
    z-index: 99999999;
13
}
14
div#popmake-1068 .popmake-close {
15
    font-size: 30px;
16
    color: #9e9e9e;
17
}

Krok 6: testowanie i debugowanie

Przed uruchomieniem na produkcyjnej stronie proszę sprawdzić każdy scenariusz:

• Kliknięcie w różne bloki, nagłówek w popupie i ukrytym polu zmienia się poprawnie dla każdego bloku.
• Pusty formularz, przy wysyłaniu bez wypełnienia wymaganych pól pokazuje się popup z błędem.
• Pełne wysłanie, wiadomość przychodzi, ukryte pole zawiera prawidłowy nagłówek bloku.
• Ponowne otwarcie, po zamknięciu i ponownym otwarciu popupu nagłówek jest aktualizowany.

Jeśli nagłówek nie jest podstawiany, proszę sprawdzić w konsoli przeglądarki (F12 → Console), czy:

• selektor jQuery .ForContactForm7HiddenInput h3.elementor-heading-title znajduje element na stronie;
• zmienna popupId zgadza się z rzeczywistym ID popupu w panelu administracyjnym;
• klasa przycisku (.jet-button-order) odpowiada rzeczywistej klasie na stronie.

Selektory w kodzie są powiązane z Elementor + JetElements. Jeśli używają Państwo innego konstruktora (Gutenberg, Bricks, Oxygen), proszę podstawić własne klasy i strukturę nagłówka. Zasada pozostaje ta sama: przycisk → blok nadrzędny → nagłówek → ukryte pole.

Praktyczną demonstrację konfiguracji formularza popup z Contact Form 7 można zobaczyć w tym filmie:

⁉️🤔 Często zadawane pytania

Czy można obejść się bez dodatkowej wtyczki do ukrytego pola?

Podstawowy CF7 nie obsługuje ukrytych pól. DTX to minimalne i aktywnie wspierane rozwiązanie. Teoretycznie można dodać <input type="hidden"> przez JavaScript bezpośrednio do DOM formularza, ale jest to mniej niezawodne: skrypt może nie zdążyć wykonać się przed wysłaniem, a wartość nie trafi do wiadomości, jeśli nie jest powiązana z konkretnym tagiem CF7. Proszę używać DTX lub starego Contact Form 7 Modules, oba dodają obsługę ukrytych pól na poziomie tagów, a wartość ma gwarancję trafienia do wiadomości.

Dlaczego Popup Maker jest lepszy od starej wtyczki Popups?

Popup Maker jest aktywnie aktualizowany (ostatnia wersja, kwiecień 2026), ma integrację z CF7 i innymi formularzami „od ręki", obsługuje dziesiątki wyzwalaczy i reguł targetowania. Stara wtyczka Popups została oficjalnie zamknięta przez WordPress.org w lipcu 2022 roku z powodu nieusuniętej luki i nie powinna być używana na działających stronach. Popup Maker to jej bezpośredni i bezpieczny następca z ponad 780 000 aktywnych instalacji. Kluczowa zaleta: wbudowana integracja z CF7 (zdarzenia wpcf7mailsent / wpcf7invalid działają bez dodatkowego kodu) oraz wizualny edytor popupów.

Dlaczego zamiast attrchange.js używany jest MutationObserver?

Biblioteka attrchange.js była dystrybuowana przez rawgit.com, ten CDN jest zamknięty od 2020 roku. Samo repozytorium na GitHubie jest aktywne, ale podłączanie skryptu stamtąd jest niewygodne. MutationObserver, natywne API przeglądarki, jest obsługiwane przez wszystkie nowoczesne przeglądarki od 2014 roku, nie wymaga zewnętrznych zależności i rozwiązuje to samo zadanie: śledzi zmiany atrybutów w DOM. Mniej żądań HTTP, nie trzeba aktualizować zależności.

Co zrobić, jeśli nagłówek w ukrytym polu wyświetla się w wiadomości jako cyrylica z hieroglifami?

Proszę sprawdzić kodowanie w ustawieniach CF7 i wtyczki SMTP, powinno być UTF-8. Proszę upewnić się, że szablon wiadomości nie zawiera uszkodzonych znaków. Jeśli używają Państwo SMTP przez Gmail API, problem może leżeć po stronie kodowania nagłówka wiadomości, proszę sprawdzić ustawienia wtyczki Post SMTP lub WP Mail SMTP. Zazwyczaj źródłem problemu jest serwer pocztowy, a nie skrypt. Proszę sprawdzić: (1) wp-config.php, wiersz define('DB_CHARSET', 'utf8'); bez zbędnych spacji przed <?php; (2) ustawienia wtyczki SMTP, kodowanie wiadomości UTF-8; (3) szablon wiadomości CF7, proszę usunąć niestandardowe symbole, zostawić tylko [dynamichidden-120] bez dodatkowych nawiasów i cudzysłowów.

Czy można używać tego podejścia dla kilku różnych formularzy na jednej stronie?

Tak. Proszę utworzyć osobny formularz w CF7 dla każdego typu bloku oraz osobny popup w Popup Maker. W skrypcie proszę powielić logikę dla każdej pary „selektor bloku → ID popupu → ID ukrytego pola". Albo proszę użyć jednego popupu i jednego formularza, ale z różnymi klasami bloków, ukryte pole będzie otrzymywać nagłówek dowolnego klikniętego bloku bez dodatkowej konfiguracji.

Uniwersalny formularz dla wszystkich bloków na stronie to główny sens tego rozwiązania. Dla zupełnie różnych typów bloków (produkty vs usługi) proszę utworzyć dwa zestawy: formularz_produktów + popup_produktów i formularz_usług + popup_usług. W skrypcie wystarczy powielić blok kodu z innymi selektorami.

Jaki zestaw wtyczek instalować w 2026 roku

Uniwersalny formularz z ukrytym polem, sprawdzone rozwiązanie dla landing page’ów z dziesiątkami jednorodnych bloków. Zamiast 30 osobnych formularzy konfigurują Państwo jeden, a skrypt sam podstawia nagłówek bloku. Stack, który rekomendujemy w 2026 roku:

• Contact Form 7, ponad 10 milionów instalacji, lekki, bezpłatny.
• Dynamic Text Extension (DTX), ukryte i dynamiczne pola, aktywne wsparcie.
• Popup Maker, popupy z wyzwalaczami na kliknięcie i wbudowaną integracją z CF7.
• MutationObserver (natywny JS), śledzenie otwarcia popupu bez zewnętrznych bibliotek.

Jeśli potrzebują Państwo przechwytywać nagłówek bloku i przekazywać go do formularza, proszę sięgnąć po ten stack. W praktyce działa on bezawaryjnie, a konfiguracja zajmuje godzinę nawet przy podstawowej znajomości WordPressa.

🔗 Dynamic Text Extension na WordPress.org | 🔗 Popup Maker na WordPress.org