Tworzenie i wyświetlanie formularzy popup

Published: 16 lipca 2026 · Last updated: 21 lipca 2026 · By Marcus Biel

Popup jest wyświetlany nad treścią Twojej strony internetowej. Umieszcza ofertę zapisu bezpośrednio w polu widzenia odwiedzającego, pozostawiając stronę znajdującą się pod spodem bez zmian.

Popupy są przydatne w przypadku ofert newslettera, rabatów, rejestracji na wydarzenia, lead magnetów i innych ukierunkowanych wezwań do działania. Ponieważ zakłócają standardowe korzystanie ze strony, czas wyświetlania i częstotliwość są równie ważne jak wygląd.

Ten przewodnik wyjaśnia ustawienia dotyczące Popupów. Układy, bloki treści, pola subskrybentów, tagi, typografia, warstwy i procesy zapisu zostały opisane w głównym przewodniku po kreatorze formularzy zapisu.

Tworzenie Popupu

Otwórz „Signup Forms”, kliknij „Create Form” i wybierz „Popup”. Wprowadź jasną nazwę wewnętrzną i przejdź do kreatora.

Możesz także edytować istniejący Popup, klikając jego nazwę w przeglądzie formularzy zapisu.

Użyj nazwy, która wyjaśnia ofertę lub miejsce wyświetlania, na przykład „Popup rabatowy strony głównej”, „Popup rejestracji na webinar” lub „Popup pobierania przewodnika”. Nazwa wewnętrzna nie jest automatycznie wyświetlana odwiedzającym.

Wybór szablonu Popupu

Popupy oferują pusty formularz, standardowy formularz oraz cztery zaprojektowane szablony:

• Czysty rabat
• Przyjazny przewodnik
• Ciemny webinar
• Przyjazna społeczność

Wybierz szablon, którego rozmiar i struktura treści pasują do oferty. Wszystkie teksty, pola, kolory, obrazy, odstępy i układ można później zmienić.

Projektowanie Popupu

Użyj wizualnego kreatora, aby rozmieścić Popup. Możesz połączyć formularz zapisu z tekstem, obrazami, wideo, listami, przyciskami, linkami społecznościowymi, licznikiem subskrybentów, odstępnikami i separatorami.

Główny komunikat powinien być na tyle krótki, aby można było go od razu zrozumieć. Jasny nagłówek, jedno krótkie wyjaśnienie i konkretny przycisk wysyłania są zwykle skuteczniejsze niż kilka konkurujących ze sobą komunikatów.

Wybierz blok formularza zapisu, aby skonfigurować pola, wymagane informacje, ukryte tagi, wskaźnik postępu, licznik subskrybentów, pola wejściowe i przycisk wysyłania. Otwórz „Page settings”, aby zmienić ogólne tło Popupu i domyślne ustawienia wyglądu.

Popup pojawia się nad stroną internetową i zawiera element zamykania. Pozostaw wystarczająco dużo wolnego miejsca wokół ważnych tekstów i pól, aby formularz pozostał łatwy w użyciu na małym ekranie.

Konfigurowanie działania Popupu

Wybierz blok formularza zapisu i otwórz „Widget Settings”. Ta sekcja określa, kiedy Popup jest wyświetlany i jak często może go zobaczyć odwiedzający.

Opóźnienie wyświetlania

„Display Delay” określa, ile sekund Maildroppa czeka przed wyświetleniem Popupu na stronie internetowej z osadzonym formularzem.

Wprowadź 0, aby wyświetlić go bez dodatkowego opóźnienia. Użyj większej wartości, gdy odwiedzający powinni mieć czas na przeczytanie strony przed pojawieniem się oferty. Kreator akceptuje opóźnienie do 86,400 sekund.

Wybierz opóźnienie odpowiednie dla danej strony. Krótkie opóźnienie może być właściwe na skoncentrowanej stronie kampanii, natomiast dłuższe może być mniej uciążliwe w artykule.

Częstotliwość wyświetlania

„Display Frequency” określa okres, po którym Popup może zostać ponownie wyświetlony temu samemu odwiedzającemu. Dostępne opcje to:

• Zawsze
• Raz na godzinę
• Raz dziennie
• Raz w tygodniu
• Raz w miesiącu

Używaj opcji „Always” ostrożnie. Popup, który wielokrotnie przerywa korzystanie ze strony tej samej osobie, może stać się frustrujący. Codzienna lub cotygodniowa częstotliwość jest często lepszym punktem wyjścia w przypadku ogólnej oferty na stronie internetowej.

Częstotliwość jest zapisywana w przeglądarce odwiedzającego. Testowanie w innej przeglądarce, oknie prywatnym lub po wyczyszczeniu pamięci przeglądarki może więc dać inny wynik.

Korzystanie z funkcji Exit Intent

Włącz „Exit Intent Popup”, gdy Popup powinien otwierać się po przesunięciu wskaźnika poza obszar strony, co wskazuje, że odwiedzający może zamierzać ją opuścić.

Po włączeniu funkcji exit intent Popup czeka na takie zachowanie zamiast korzystać ze standardowego opóźnienia wyświetlania. Wybrana częstotliwość wyświetlania nadal zapobiega zbyt szybownemu ponownemu wyświetleniu.

Funkcja exit intent opiera się na ruchu wskaźnika, dlatego ma głównie zastosowanie w przeglądarkach na komputerach stacjonarnych i laptopach. Urządzenia dotykowe nie przekazują takiego samego sygnału wyjścia. Zawsze zadbaj o to, aby użytkownicy urządzeń mobilnych mogli znaleźć ofertę zapisu bezpośrednio na stronie lub w innym odpowiednim formularzu.

Ręczne otwieranie Popupu z elementu strony

Popup może otwierać się, gdy odwiedzający kliknie określony przycisk, obraz lub link na Twojej stronie internetowej. Jest to ręczny wyzwalacz kliknięcia. Różni się od „Exit Intent Popup”, który reaguje na przesunięcie wskaźnika poza stronę.

Skonfiguruj i zainstaluj ręczny wyzwalacz kliknięcia w następujący sposób:

1. Otwórz Popup w kreatorze formularzy zapisu.
2. Kliknij blok formularza zapisu na obszarze roboczym i otwórz po prawej stronie „Settings”.
3. Rozwiń „Widget Settings” i włącz „Open popup when a customer clicks a page element”.
4. Kliknij „Save changes”.
5. Wróć do przeglądu formularzy zapisu i aktywuj Popup, jeśli jest nieaktywny.
6. Kliknij „Show Code Snippet” w wierszu tego Popupu.

Okno dialogowe zawiera dwie wartości wymagane na Twojej stronie internetowej:

1. Skopiuj kompletny kod z karty „JavaScript” i dodaj go do strony internetowej, na której Popup powinien być dostępny.
2. Poniżej kodu skopiuj identyfikator wyświetlany pod nagłówkiem „Add this ID to element from which you want to manually trigger Popup”.
3. Dodaj dokładnie tę wartość do atrybutu id przycisku, obrazu lub linku, który powinien otwierać Popup.

Identyfikator ma następujący format:

maildroppa-popup-btn-[form-id]

Na przykład:

<button id="maildroppa-popup-btn-[form-id]">Pobierz przewodnik</button>

Kod JavaScript ładuje Popup. Identyfikator łączy Popup z wybranym elementem strony. Oba elementy muszą znajdować się na tej samej opublikowanej stronie. Gdy odwiedzający kliknie element z dokładnie takim identyfikatorem, skrypt Maildroppa otworzy Popup.

Jeśli przycisk na Twojej stronie ma już identyfikator pochodzący z innego systemu popupów, zastąp go identyfikatorem wyzwalacza Maildroppa, gdy to Maildroppa ma obsługiwać kliknięcie. Nie umieszczaj Popupu Maildroppa wewnątrz drugiego popupu dostarczanego przez kreator strony internetowej.

Każdego identyfikatora HTML używaj na stronie tylko raz. Jeśli kilka elementów ma otwierać ten sam Popup, poproś osobę wdrażającą stronę o połączenie tych elementów bez powielania tego samego identyfikatora.

Łączenie procesu zapisu

Sprawdź przypisany proces zapisu w nagłówku kreatora. Określa on bezpośrednią reakcję po wysłaniu formularza, wiadomość e-mail Double Opt-in oraz wynik po potwierdzeniu.

Możesz wybrać istniejący proces, edytować go lub utworzyć osobny proces dla tego Popupu. Dedykowany proces jest przydatny, gdy oferta wymaga własnego komunikatu potwierdzającego lub dostarczenia lead magnetu.

Podgląd i zapisywanie

Kliknij „Preview”, aby sprawdzić wygląd i działanie Popupu bez zmieniania wersji używanej na stronie internetowej. Sprawdź układ, element zamykania, kolejność pól, miejsce na komunikaty walidacji i reakcję po wysłaniu formularza.

Kliknij „Save changes”, gdy Popup będzie gotowy. Następnie wróć do przeglądu formularzy zapisu.

Aktywowanie i automatyczne osadzanie Popupu

Aktywuj Popup w menu działań z trzema kropkami, jeśli nie jest jeszcze aktywny. Następnie kliknij „Show Code Snippet” i skopiuj kompletny kod z karty „JavaScript”.

Dodaj skrypt do każdej strony internetowej, na której Popup powinien być dostępny. Kod zawiera unikalny identyfikator formularza Popupu i ładuje jego bieżącą zapisaną konfigurację.

Karta „HTML” udostępnia wygenerowane oznaczenia na potrzeby niestandardowych wdrożeń. Jeśli z niej korzystasz, dokładnie przetestuj wszystkie działania i etapy wysyłania, ponieważ kod i style Twojej strony mogą wpływać na rezultat.

Ta sekcja ma zastosowanie, gdy Popup powinien otwierać się automatycznie na podstawie opóźnienia wyświetlania lub działania exit intent. Jeśli przycisk, obraz lub link ma otwierać Popup po kliknięciu, skorzystaj z sekcji

.

Ogólne instrukcje osadzania znajdziesz w przewodniku Tworzenie i osadzanie osadzonego formularza.

Testowanie Popupu na stronie internetowej

Po dodaniu kodu przetestuj Popup na rzeczywistej stronie internetowej:

1. Sprawdź skonfigurowane opóźnienie.
2. Przetestuj przycisk zamykania i kliknięcie poza formularzem.
3. Jeśli funkcja jest włączona, przesuń wskaźnik poza stronę, aby przetestować exit intent.
4. Jeśli funkcja jest włączona, kliknij skonfigurowany element strony, aby przetestować ręczny wyzwalacz.
5. Sprawdź układ na wąskim ekranie.
6. Wyślij formularz i ukończ proces Double Opt-in.
7. Zweryfikuj subskrybenta i ukryte tagi w Maildroppa.

Ustawienie częstotliwości może uniemożliwić ponowne wyświetlenie Popupu podczas kolejnych testów. Gdy potrzebujesz czystej wizyty testowej, użyj okna prywatnego lub wyczyść odpowiednie dane zapisane w przeglądarce.

Aktualizowanie lub dezaktywowanie Popupu

Aby zaktualizować Popup, otwórz go w Maildroppa, edytuj wygląd lub działanie, wyświetl podgląd i kliknij „Save changes”. Fragment JavaScript nadal będzie używać tego samego identyfikatora formularza.

Aby tymczasowo zatrzymać jego wyświetlanie, wybierz „Deactivate” z menu działań. Dezaktywacja zachowuje Popup i jego wcześniejsze dane raportów. Usuń również skrypt lub element wyzwalający ze strony internetowej, jeśli nie są już potrzebne.