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

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

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.