Formularz osadzony na stronie

Przewagą formularzy osadzonych w treści strony jest ich elastyczność. Można je zaprojektować całkowicie od podstaw, idealnie dopasowując do wizerunku Twojej marki.

Umieszczone w kluczowych punktach strony, potrafią zbierać dane dyskretnie i efektywnie. Ich prawdziwa moc objawia się w kontekście: inaczej będą wyglądać przy ofercie produktowej, inaczej przy blogu, a jeszcze inaczej na stronie usług. Zawsze jednak pozostaną przyjazne, przejrzyste i – co najważniejsze – przyjazne dla Twoich klientów.

Wymagania

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

• Kanał Web Tracking został poprawnie skonfigurowany. Ten krok wymaga instalacji kodu śledzącego na stronie Twojego sklepu.
• Zgody marketingowe są dodane w ECDP. Wypełniając formularz, klient będzie musiał wyrazić zgodę na kontakt. Dodasz je w Ustawienia > Zgody > Utwórz nową zgodę.
• Masz wdrożony tzw. data layer na stronie Twojego sklepu. Data layer 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 osadzonego na stronie

Kliknij Stwórz formularz > Osadzony na stronie. W kolejnych krokach edytora dostosuj ustawienia formularza:

Podstawowe ustawienia

1. Wpisz nazwę formularza. Umożliwi ona odszukanie formularza w tabeli.
2. Wybierz stronę, na której chcesz dodać formularz.
3. Ustaw zakres czasowy, w jakim formularz ma się wyświetlać klientom Twojej strony.
4. Wybierz wskaźniki, które chcesz śledzić dla tego formularza – UTM obsługiwane przez Google Analytics lub własne niestandardowe parametry.

Warunki wyświetlania formularza i typ odbiorców

Tutaj zadecydujesz, w jakiej sytuacji wyświetli się formularz. W polu Zdarzenie wybierz jedną z akcji:

1. Wejście – formularz wyświetli się, przy wejściu użytkownika na stronę.
2. 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.

W sekcji Po przesłaniu formularza:

1. Zdecyduj, czy chcesz wyświetlić stronę z podziękowaniem klientowi, który przesłał formularz. Taką stronę zaprojektujesz w kroku Treść.
2. Wybierz opcję Ukryj formularz, jeśli ma być on niedostępny dla klienta, który już raz go wypełnił.
3. Możesz też przekierować klienta na inną stronę.
4. Zaznacz opcję Potwierdzenie, gdy bezpośrednio po przesłaniu formularza chcesz wysłać klientom automatyczną wiadomość z potwierdzeniem, że np. zapis na newsletter się powiódł. W tym kroku zdecydujesz, czy chcesz wysłać:
   • Podstawowe potwierdzenie, wybrane w Ustawienia > Zgody > Potwierdzenia > Wiadomość domyślna.
   • Inne potwierdzenie, np. zaprojektowane specjalnie dla tego formularza.

W sekcji Warunki ustaw:

1. Typ strony. Na której wyświetli się formularz: strona produktu, strona koszyka, strona potwierdzenia płatności, inna.
2. Adres strony – wpisz słowa kluczowe, frazy lub elementy nazwy domeny, które ma zawierać URL strony, żeby wyświetlił się na niej formularz:
   • Wybierz Warunek jaki ma spełniać wprowadzona niżej wartość.  
   • W polu Wartość umieść słowo kluczowe, które musi zawierać adres URL lub wpisz fragment adresu URL.
   • W polu Wartość testowa wprowadź adres strony lub podstrony, na której chcesz przetestować formularz. Następnie kliknij Test i sprawdź, czy banner wyświetla się na stronie.
3. Czas trwania sesji – wybierz minimalny, maksymalny czas lub ustaw przedział czasowy, w którym ma wyświetlać się formularz.
4. Liczba odwiedzonych stron – ustaw liczbę stron, po których ma się wyświetlić formularz. Wskaż również typ strony, jakie musiał odwiedzić użytkownik, aby formularz został wyświetlony.
5. Zaznacz opcję Nie pokazuj formularza, jeśli został już przesłany gdy chcesz uniemożliwić wyświetlenie formularza użytkownikom, którzy już go wypełnili i przesłali.

W sekcji Odbiorcy, wybierz komu wyświetlisz formularz:

1. Nowy / powracający
2. Klient / nie-klient – czy formularz ma się wyświetlić aktualnym klientom Twojego sklepu, czy wyłącznie osobom, które nie są jeszcze Twoimi klientami.
3. Zgody – zdecyduj, ile i jakich zgód muszą udzielić odbiorcy, żeby można było im wyświetlić formularz. Możesz wybrać jedną lub wiele zgód:
   • Wyświetl odwiedzającym, którzy udzielili wszystkich zgód – formularz zobaczą odwiedzający, którzy udzielili wszystkie wybrane przez Ciebie zgody.
   • Wyświetl odwiedzającym, którzy nie udzielili zgód – formularz zobaczą odwiedzający, którzy nie udzielili żadnej z wybranych przez Ciebie zgód.
   • Wyświetl odwiedzającym, którzy udzielili dowolnych zgód – formularz zobaczą odwiedzający, którzy udzielili jednej w wybranych przez Ciebie zgód.
4. Źródło sesji – określ, skąd mają przyjść klienci, którym wyświetli się formularz, np. media społecznościowe, bezpośrednie wejście na stronę.

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 formularza na stronie#

Wybierz miejsce w Twoim e-sklepie, w którym wyświetli się formularz. Pomogą Ci w tym selektory CSS – krótkie wyjaśnienie czym one są znajdziesz w sekcji Czym jest selektor CSS?

W sekcji Selektor CSS wprowadź nazwę, ID lub klasę selektora, który będzie punktem orientacyjnym dla bannera rekomendacji. Według tego selektora umiejscowimy banner na stronie Twojego sklepu. Jak znajdziesz selektor CSS na dowolnej stronie?

1. W osobnej karcie otwórz stronę, na której chcesz umieścić formularz.
2. Najedź kursorem na element na stronie, względem którego chcesz umieścić formularz (nad, pod lub wewnątrz elementu).
3. Kliknij prawym przyciskiem myszy na element i z podręcznego menu wybierz Zbadaj lub Inspect.
4. Po prawej stronie przeglądarki otworzy się okno z kodem strony.
5. Zobaczysz podświetlony na niebiesko wybrany przez Ciebie element strony.
6. Najedź na niego kursorem, kliknij prawy przycisk myszy i wybierz z menu pozycje Kopiuj > Kopuj selektor.
7. Przejdź do edytora formularzy i w sekcji Selektor CSS wklej skopiowany tekst.
8. Zwróć uwagę czy selektor id jest poprzedzony haszem a selektor klasy – kropką.

W sekcji Pozycja formularza względem selektora wybierz jego umiejscowienie na Twojej stronie względem wybranego wcześniej selektora:

• Pierwsza pozycja wewnątrz – formularz wyświetli się jako pierwszy element w grupie innych elementów. Może to być stały moduł widoczny na stronie sklepu, zawierający np. tekst, zdjęcia i przyciski. Formularz wyświetli się wewnątrz takiego modułu, przed znajdującymi się w nim elementami.
• Ostatnia pozycja wewnątrz – formularz wyświetli się jako ostatni element wewnątrz grupy innych elementów.
• Przed elementem – formularz wyświetli się przed pojedynczym elementem, np. blokiem tekstu lub zdjęciem produktu.
• Po elemencie – formularz wyświetli się zaraz pod pojedynczym elementem, np. blokiem tekstu lub zdjęciem produktu.
• Zastąp element – treść z podanego selektora zostanie zastąpiona bannerem stworzonym w ECDP.

Test na żywo – wstaw adres podstrony, na których chcesz wyświetlić formularz i kliknij Test. Sprawdź, czy zaprojektowany przez Ciebie formularz wyświetla się poprawnie. Pamiętaj, że podgląd zadziała wyłącznie na stronach, na których umieszczony jest nasz skrypt śledzący.

Czym jest selektor CSS?

Selektor CSS wskazuje konkretny element na stronie WWW, np. tekst lub zdjęcie, ale też całe moduły złożone z wielu elementów, np. pasek menu, stopka strony, moduł z artykułami blogowymi itp.

Dzięki selektorowi odnajdziesz w kodzie strony element, który Cię interesuje i nadasz mu unikalny styl, np. zmienisz kolor lub wielkość.

W formularzach selektor CSS używany jest jako punkt orientacyjny. Wskazuje, względem którego elementu na stronie możesz ulokować formularz np. względem paska menu lub zdjęcia danego produktu.

W formularzach używane są następujące selektory:

• nazwa – np. ‘p’ to element o nazwie ‘akapit’, ‘h’ to ‘nagłówek’: h1
• id – identyfikator elementu, np. footer; selektor ten jest zawsze poprzedzony haszem: #footer –
• klasa – zawsze poprzedzona znakiem kropki: .yellow

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. Obok 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. Wymaga to jednak szerszej znajomości
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.
   • Wybrać, w jakim formacie ma wyświetlić się zgoda: pola jednokrotnego wyboru czy przełącznika (switch).
   • 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).
   • Ustawić szerokość wyświetlanego pola.

W kolejnych sekcjach ustawisz wygląd całego formularz, poszczególnych oraz czy formularz ma być wyświetlany w widoku na komputer lub na urządzenia mobilne.

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:

• Warunki i odbiorcy > Po przesłaniu formularza – jeśli tworzysz formularz osadzony na stronie
• Zachowanie > Po przesłaniu formularza – jeśli projektujesz formularz w formie pop-upu

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, Teks i Obraz.

Mierzenie konwersji formularza

Skuteczność formularzy śledzimy za pomocą dwóch metryk, dostępnych w tabeli w sekcji Automatyzacja > Formularze.

• 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.