Tworzenie i wyświetlanie formularzy popup

Opublikowano: 16 lipca 2026 · Ostatnia aktualizacja: 12 września 2026 · Autor: Marcus Biel

Popup wyświetla się nad treścią strony internetowej. Dzięki temu oferta zapisu jest od razu widoczna dla odwiedzającego, a strona pod spodem pozostaje bez zmian.

Popupy sprawdzają się przy promowaniu newslettera, rabatów, zapisów na wydarzenia, lead magnetów i innych konkretnych wezwań do działania. Ponieważ przerywają przeglądanie strony, moment i częstotliwość ich wyświetlania są równie ważne jak wygląd.

Ten przewodnik opisuje ustawienia specyficzne dla popupów. Układy, bloki treści, pola subskrybentów, tagi, typografię, warstwy i procesy zapisu znajdziesz w głównym przewodniku po kreatorze formularzy zapisu.

Utwórz popup

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

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

Wybierz nazwę, która opisuje ofertę lub miejsce wyświetlania, na przykład „Popup z rabatem na stronie głównej”, „Popup z zapisem na webinar” lub „Popup z przewodnikiem do pobrania”. Nazwa wewnętrzna nie jest automatycznie wyświetlana odwiedzającym.

Wybierz szablon popupu

Do dyspozycji masz pusty formularz, standardowy formularz i cztery gotowe szablony:

• Clean discount
• Warm guide
• Dark webinar
• Soft community

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

Zaprojektuj popup

Ułóż elementy popupu w kreatorze wizualnym. Możesz połączyć formularz zapisu z tekstem, obrazami, wideo, listami, przyciskami, linkami do mediów społecznościowych, licznikiem subskrybentów, blokami odstępu i separatorami.

Główny komunikat powinien być krótki i od razu zrozumiały. Jasny nagłówek, jedno zwięzłe wyjaśnienie i przycisk wysyłania z konkretnym wezwaniem do działania są zwykle skuteczniejsze niż kilka komunikatów konkurujących o uwagę.

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

Popup pojawia się nad stroną internetową i ma przycisk zamykania. Zostaw wystarczająco dużo miejsca wokół ważnych tekstów i pól, aby formularz był łatwy w użyciu także na małym ekranie.

Skonfiguruj działanie popupu

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

Opóźnienie wyświetlania

„Display Delay” określa, ile sekund Maildroppa czeka przed wyświetleniem popupu na stronie, na której został osadzony.

Wprowadź 0, aby wyświetlić go bez dodatkowego opóźnienia. Ustaw większą wartość, jeśli chcesz dać odwiedzającym czas na przeczytanie strony, zanim pojawi się oferta. Kreator pozwala ustawić opóźnienie do 86 400 sekund.

Dopasuj opóźnienie do strony. Krótkie może sprawdzić się na stronie poświęconej konkretnej kampanii, a dłuższe będzie mniej przeszkadzać w czytaniu artykułu.

Częstotliwość wyświetlania

„Display Frequency” określa, po jakim czasie popup może ponownie wyświetlić się temu samemu odwiedzającemu. Dostępne opcje to:

• Always — zawsze
• Once per hour — raz na godzinę
• Once per day — raz dziennie
• Once per week — raz w tygodniu
• Once per month — raz w miesiącu

Korzystaj z opcji „Always” ostrożnie. Popup, który wielokrotnie przerywa przeglądanie strony tej samej osobie, może ją irytować. W przypadku ogólnej oferty na stronie często lepiej zacząć od wyświetlania go raz dziennie lub raz w tygodniu.

Informacje o częstotliwości są zapisywane w przeglądarce odwiedzającego. Test w innej przeglądarce, w oknie prywatnym lub po wyczyszczeniu danych przeglądarki może więc dać inny wynik.

Użyj funkcji exit intent

Włącz „Exit Intent Popup”, jeśli popup ma otwierać się po przesunięciu wskaźnika poza obszar strony — co może sygnalizować, że odwiedzający zamierza ją opuścić.

Po włączeniu funkcji exit intent popup czeka na taki ruch wskaźnika zamiast wyświetlać się po standardowym opóźnieniu. Wybrana częstotliwość wyświetlania nadal zapobiega jego zbyt szybkiemu ponownemu pojawieniu się.

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

Otwieraj popup po kliknięciu elementu strony

Popup może otwierać się, gdy odwiedzający kliknie określony przycisk, obraz lub link na stronie. Jest to ręczne wywołanie popupu kliknięciem. Działa inaczej niż „Exit Intent Popup”, który reaguje na przesunięcie wskaźnika poza stronę.

Aby skonfigurować i wdrożyć otwieranie popupu kliknięciem:

1. Otwórz popup w kreatorze formularzy zapisu.
2. Kliknij blok formularza zapisu w obszarze roboczym i otwórz „Settings” po prawej stronie.
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.

W oknie dialogowym znajdziesz dwa elementy potrzebne na stronie: kod i identyfikator.

1. Skopiuj cały kod z karty „JavaScript” i dodaj go do strony, na której popup ma być dostępny.
2. Poniżej kodu skopiuj identyfikator widoczny 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 ma 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 go z wybranym elementem strony. Oba muszą znajdować się na tej samej opublikowanej stronie. Gdy odwiedzający kliknie element z dokładnie tym identyfikatorem, skrypt Maildroppa otworzy popup.

Jeśli przycisk na stronie ma już identyfikator z innego systemu popupów, zastąp go identyfikatorem wywołującym popup Maildroppa, o ile to Maildroppa ma obsługiwać kliknięcie. Nie umieszczaj popupu Maildroppa wewnątrz innego popupu pochodzącego z kreatora stron internetowych.

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

Przypisz proces zapisu

Sprawdź proces zapisu przypisany w nagłówku kreatora. Określa on reakcję bezpośrednio po wysłaniu formularza, wiadomość e-mail z prośbą o potwierdzenie zapisu w ramach double opt-in oraz to, co nastąpi po potwierdzeniu.

Możesz wybrać istniejący proces, edytować go lub utworzyć osobny dla tego popupu. Osobny proces przydaje się, gdy oferta wymaga własnego komunikatu potwierdzającego lub dostarczenia lead magnetu.

Sprawdź podgląd i zapisz zmiany

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

Gdy popup będzie gotowy, kliknij „Save changes”. Następnie wróć do przeglądu formularzy zapisu.

Aktywuj i osadź popup wyświetlany automatycznie

Jeśli popup nie jest jeszcze aktywny, aktywuj go w menu działań oznaczonym trzema kropkami. Następnie kliknij „Show Code Snippet” i skopiuj cały kod z karty „JavaScript”.

Dodaj skrypt do każdej strony, na której popup ma być dostępny. Kod zawiera unikalny identyfikator formularza popupu i ładuje jego aktualną zapisaną konfigurację.

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

Ta sekcja dotyczy popupów, które mają otwierać się automatycznie po ustawionym opóźnieniu lub w reakcji na zamiar opuszczenia strony. Jeśli popup ma otwierać się po kliknięciu przycisku, obrazu lub linku, skorzystaj z sekcji

.

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

Przetestuj popup na stronie

Po dodaniu kodu przetestuj popup na docelowej stronie internetowej:

1. Sprawdź ustawione opóźnienie.
2. Przetestuj przycisk zamykania i kliknięcie poza formularzem.
3. Jeśli funkcja exit intent jest włączona, przesuń wskaźnik poza stronę, aby ją przetestować.
4. Jeśli otwieranie popupu kliknięciem jest włączone, kliknij skonfigurowany element strony, aby sprawdzić jego działanie.
5. Sprawdź układ na wąskim ekranie.
6. Wyślij formularz i potwierdź zapis w ramach procesu double opt-in.
7. Sprawdź subskrybenta i ukryte tagi w Maildroppa.

Ustawiona częstotliwość może uniemożliwić ponowne wyświetlenie popupu podczas kolejnych testów. Aby przeprowadzić test bez wpływu wcześniejszych wizyt, użyj okna prywatnego lub wyczyść odpowiednie dane zapisane w przeglądarce.

Zaktualizuj lub dezaktywuj popup

Aby zaktualizować popup, otwórz go w Maildroppa, zmień wygląd lub działanie, sprawdź podgląd i kliknij „Save changes”. Fragment kodu JavaScript nadal będzie korzystać z tego samego identyfikatora formularza.

Aby tymczasowo wstrzymać wyświetlanie popupu, wybierz „Deactivate” z menu działań. Dezaktywacja zachowuje popup i jego dotychczasowe dane w raportach. Usuń też ze strony skrypt lub element wywołujący popup, jeśli nie są już potrzebne.