Formularz pop-up

Formularze w pop-upach to skuteczny sposób na nawiązanie kontaktu z odwiedzającymi Twoją stronę. Wyświetlają się w odpowiednim momencie, zachęcając użytkowników do podjęcia konkretnego działania, na przykład zapisania się do newslettera. W odróżnieniu od nachalnych reklam nowoczesne pop-upy są starannie zaprojektowane, dopasowane do treści strony i wartościowe dla użytkownika.

Dlaczego są skuteczne? Bo pojawiają się dokładnie wtedy, gdy użytkownik może być zainteresowany skorzystaniem z dodatkowej oferty lub informacji. Ich siła tkwi w prostocie i trafności. 

Ich siła tkwi w prostocie i trafności. Z pomocą formularzy:

• Zbierzesz informacje o preferencjach klientów, dzięki czemu lepiej dopasujesz ofertę i komunikację marketingową do ich potrzeb.
• Zbadasz opinię klientów o produktach, usługach czy doświadczeniach zakupowych. Wprowadzone zmiany pokażą, że zależy Ci na ich zdaniu.

Wymagania

Zanim przejdziesz do tworzenia formularzy, upewnij się, że:

• Kanał Web Tracking jest poprawnie skonfigurowany.
• Masz skonfigurowane w platformie zgody marketingowe. Wypełniając formularz, klient będzie musiał wyrazić zgodę na kontakt. Zgody dodasz w Ustawienia > Zgody > Utwórz nową zgodę.
• Na Twojej stronie jest wdrożony tzw. data layer. Jest to warstwa w kodzie strony, która przechowuje i porządkuje informacje o zachowaniu użytkowników Twojego sklepu, takie jak kliknięcia, interakcje z formularzami, złożone zamówienia. Informacje dostępne w data layer przesyłamy do platformy za pomocą wspomnianego kodu śledzącego.

Ustawienia formularza pop-up

Kliknij Stwórz formularz > Pop-up i przejdź do edytora. W kolejnych krokach dostosuj ustawienia formularza:

Podstawowe ustawienia

1. Nadaj formularzowi nazwę. Będzie ona widoczna w tabeli i ułatwi odszukanie formularza.
2. Wybierz stronę, na której formularz ma się wyświetlać.
3. Ustaw zakres czasowy, w którym formularz ma się wyświetlać klientom Twojej strony.
4. Wybierz częstotliwość wyświetlania formularza: raz na sesję lub według własnego harmonogramu.
5. Wybierz wskaźniki, które chcesz śledzić dla tego formularza.

Zachowanie formularza, warunki wyświetlania i typ odbiorców

1. Tutaj zadecydujesz, w jakiej sytuacji wyświetli się formularz. W polu Zdarzenie wybierz jedną z akcji:
   • Zdarzenie niestandardowe – formularz wyświetli się w wyniku wykonania jakiejś akcji przez użytkownika w Twoim sklepie, np. kliknięcia przycisku lub linku, zamiast od razu po wejściu na stronę. Aby skorzystać ze zdarzenia niestandardowego, trzeba wykonać kilka dodatkowych kroków. Instrukcję znajdziesz w sekcji Jak skonfigurować zdarzenie niestandardowe.
2. Zdecyduj, czy użytkownik może zamknąć okno z formularzem klikając w tło znajdujące się za nim.
3. Zdecyduj o tym, co stanie się po wysłaniu formularza.
4. W tej samej sekcji zaznacz opcję Potwierdzenie, jeśli chcesz wysłać klientom automatyczną wiadomość potwierdzającą po przesłaniu formularza:
   • Podstawowe potwierdzenie dostępne w Ustawienia > Zgody > Potwierdzenia > Wiadomość domyślna.
   • Inne potwierdzenie, np. zaprojektowanie specjalnie dla tego formularza.
5. Ustaw dodatkowe warunki wyświetlania formularza: typ i adres strony, czas trwania sesji, liczbę odwiedzonych stron lub rezygnację z ponownego wyświetlania formularza klientom, którzy już go przesłali.
6. Zdecyduj, kto będzie odbiorcą, jakie zgody są niezbędne do wyświetlania formularza i skąd mają przyjść klienci, którym wyświetlisz formularz.

Jak skonfigurować zdarzenie niestandardowe

Sposób 1: Wywołaj formularz za pomocą funkcji „Zbadaj” w przegladarce:

1. Przejdź do zakładki Zachowanie w edytorze treści.
2. W sekcji Zdarzenia wybierz Zdarzenie niestandardowe.
3. Pojawi się fragment skryptu: $ecdp.api.getContent(„type”, id, maxWaitTime).
4. Skopiuj go i uruchom na swojej stronie – w następnej sekcji znajdziesz instrukcję jak to zrobić.

Jeśli nie uruchomisz skryptu, zdarzenie niestandardowe nie będzie działać.

Parametry użyte w metodzie:

• type – typ treści, np. form.
• id – identyfikator treści.
• maxWaitTime – opcjonalny parametr (w milisekundach) określający, jak szybko system będzie próbował wyświetlić formularz po jego przygotowaniu (0-10 000 ms).

Nie musisz podawać parametru maxWaitTime.

Przykład 1:

Wyświetl formularz o ID 123 natychmiast po jego przygotowaniu.

$ecdp.api.getContent("form", 123);

Przykład 2:

Wyświetl formularz o ID 456 z maksymalnym czasem oczekiwania 5 sekund.

$ecdp.api.getContent("form", 456, 5000);

Uruchom skrypt w przeglądarce

1. Przejdź na stronę swojego sklepu i uruchom funkcję Zbadaj (Inspect):
   • za pomocą klawiatury, wybierając F12,
   • lub klikając prawym przyciskiem myszy wybierz ją z menu podręcznego.
2. Wybierz zakładkę Console.
3. Wpisz lub wklej skopiowany skrypt z parametrami formularza.
4. Naciśnij Enter, aby uruchomić skrypt.

Spowoduje to wywołanie formularza bezpośrednio z konsoli, co jest konieczne do aktywacji zdarzenia niestandardowego.

Sposób 2: Wywołaj formularz przez kliknięcie przycisku lub linku

Zamiast uruchamiać skrypt ręcznie z poziomu konsoli, możesz podpiąć go do konkretnego elementu na stronie – np. przycisku lub linku. Dzięki temu formularz wyświetli się automatycznie po kliknięciu tego elementu.

Poniżej znajdziesz dwa przykłady – z użyciem przycisku oraz linku. W obu przypadkach wykorzystywana jest metoda getContent, która uruchamia formularz o wskazanym ID.

Przykład 1: Przycisk

<button id="myButton">Wyświetl formularz</button>

<script> 
document.getElementById("myButton").addEventListener("click", function() {
    $ecdp.api.getContent("form", 586);
});
</script>

Przykład 2: Link

<a href="#" id="formLink">Wyświetl formularz</a>

<script>
document.getElementById("formLink").addEventListener("click", function(event) {
event.preventDefault(); // Zapobiega domyślnej akcji linku
    $ecdp.api.getContent("form", 586);
});
</script>

W obu przypadkach skrypt:

• wskazuje element (np. #myButton lub # formLink),
• „nasłuchuje” kliknięcia,
• po kliknięciu uruchamia formularz o ID 586.

Upewnij się, że wybrany formularz ma status Aktywny, bo w przeciwnym razie nie zostanie wyświetlony.

Ważne informacje

• Formularz zostanie załadowany dopiero po wywołaniu skryptu.
• Formularz zostanie wyświetlony tylko raz na odsłonę wybranej strony, dla tej samej kombinacji parametrów type i ID.
• Zdarzenie niestandardowe działa tylko dla formularzy o statusie Aktywny.

Położenie okna z formularzem na stronie

Sposób, w jaki formularz wyświetli się na ekranie komputera, telefonu bądź tabletu ustawisz na etapie projektowania treści formularza.

1. Przejdź do etapu Treść.
2. W panelu po prawej stronie wybierz zakładkę Pop-up.
3.  W zakładce ustawisz:
   • Pozycję formularza na ekranie – centralne, lewo, prawo, na górze, na dole.
   • Szerokość i wysokość okna z formularzem – w pikselach lub procentach, możesz też wybrać opcje automatycznego dostosowania okna.
   • Zaokrąglone rogi – opcja pozwala na zaokrąglenie rogów wyświetlanego okna z formularzem.
4. W następnych sekcjach ustawisz:
   • Content – wygląd i wyrównanie treści wyświetlanych w pop-upie, typ i kolor czcionki oraz kolor tła.
   • Overlay – kolor i stopień krycia tła, które pojawi się pod pop-upem. Dzięki niemu okno z formularzem jest lepiej widoczne i użytkownik łatwiej skupi uwagę na formularzu.
   • Close buton – wygląd i umiejscowienie przycisku do zamykania okna z formularzem.
   • Łącza – kolor, podkreślenie i zmiana wyglądu linków po najechaniu kursorem.

Zaprojektuj treść formularza

W sekcji Treść edytora zaprojektujesz zawartość i wygląd formularza.

1. W panelu po prawej stronie kliknij sekcję Zawartość.
2. Na pole robocze przeciągnij bloki Nagłówek i Tekst.
3. Pod nimi umieść blok Formularz.
4. Dodaj nagłówek i treść zachęcającą odbiorców do zapisu.
5. Kliknij blok Formularz, żeby uruchomić menu edycji w panelu po prawej stronie.
6. W sekcji Warunki wyświetlania ustawisz dodatkowe zasady, według jakich ma wyświetlać się formularz. Jeśli opcje dostępne na etapach Zachowanie, Warunki i odbiorcy oraz Położenie są niewystarczające, w tym miejscu doprecyzujesz sposób wyświetlania i zachowanie formularza.
7. W sekcji Cechy i zgody wybierz:
   • Cechy (dane) klientów, które chcesz zebrać za pomocą formularza, np. imię, adres e-mailowy. Jeśli na liście nie ma cechy, która Cię interesuje, dodasz ją tutaj: Ustawienia > Klienci > Cechy klientów.
   • Zgody, których klient musi udzielić wysyłając formularz. Zgody dostępne w formularzu dodasz tutaj: Ustawienia > Zgody.
8. W tej samej sekcji ustawisz kolejność wyświetlania oraz wygląd pól z cechami, zgodami oraz przycisku przesłania formularza. Co możesz zrobić?
   • Nadać etykietę wyświetlaną nad polem danej cechy, np. adres e-mail, imię.
   • Dodać tekst pomocniczy, który wyświetli się w wybranym polu.
   • Zdecydować, czy wypełnienie danego pola jest obowiązkowe.
   • Dodać nazwę zgody i zdecydować, czy zgoda ma być ukryta (wtedy zgoda zostanie udzielona wraz z wysłaniem formularza, żadne pole wyboru i oświadczenie o zgodzie nie będą widoczne w formularzu).
   • Wybrać, w jakim formacie ma wyświetlić się zgoda: pola jednokrotnego wyboru czy przełącznika (switch).
   • Ustawić szerokość wyświetlanego pola.

W kolejnych sekcjach ustawisz wygląd całego formularza, poszczególnych oraz czy formularz ma być wyświetlany w widoku na komputer lub na urządzenia mobilne. Gotowy formularz możesz przetestować korzystając z opcji Test na żywo.

Opis pozostałych funkcji edytora znajdziesz w artykule: Jak działa edytor treści?

Zaprojektuj stronę z podziękowaniem

W edytorze zaprojektujesz też stronę z podziękowaniem, czyli widok, który ukaże się klientowi po przesłaniu formularza.

Wyświetlając stronę z podziękowaniem potwierdzisz klientowi przesłanie danych i podtrzymasz pozytywne doświadczenie klienta w interakcji z Twoim sklepem i marką.

Strona z podziękowaniem ułatwi Ci również śledzenie konwersji i skuteczności kampanii poprzez analizę ruchu.

Opcje wyświetlenia strony z podziękowaniem ustawisz w sekcji Zachowanie > Po przesłaniu formularza.

Po wybraniu tej opcji przejdź do sekcji Treść. Nad obszarem roboczym, po lewej stronie znajdziesz przełącznik.

Ustaw go w pozycji Po przesłaniu. Strona z podziękowaniem jest gotowa do edycji.

Tak wygląda gotowa strona z podziękowaniem złożona z bloków: Nagłówek, Tekst i Obraz.

Mierzenie skuteczności formularza

Skuteczność formularzy prześledzisz za pomocą dwóch metryk:

• Wyświetlenia – pokazuje łączną liczbę wyświetleń formularza w ustawionym przez Ciebie czasie, na wszystkich podstronach Twojego sklepu.
• Przesłane – pokazuje liczbę formularzy wypełnionych i przesłanych przez klientów.

Metryki znajdziesz w tabeli dostępnej w Automatyzacja > Formularze.