Formularze

Formularze to wszechstronne i skuteczne narzędzie marketingowe, stąd ich ogromna popularność w branży e-commerce.

Za pomocą formularzy:

• Pozyskasz potencjalnych klientów, a mówiąc po marketingowemu, wygenerujesz więcej leadów. Formularz zapisu na newsletter umieszczony na Twojej stronie pomoże zamienić anonimowych użytkowników w potencjalnych klientów, a za pomocą dalszych działań – w stałych odbiorców.
• Zbierzesz informacje o preferencjach klientów, co ułatwi Ci dopasowanie oferty i komunikacji marketingowej do ich potrzeb.
• Zbadasz opinię klientów na temat produktów, usług i doświadczeń zakupowych. Wdrożenie zasugerowanych zmian da Ci przewagę w oczach klientów – zauważą, że ich słuchasz.

Wymagania

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

• Kanał Web Tracking jest poprawnie skonfigurowany. Ten krok wymaga instalacji kodu śledzącego na stronie Twojego sklepu.

• Masz skonfigurowane w platformie zgody marketingowe. Wypełniając formularz, klient będzie musiał wyrazić zgodę na kontakt. W platformie skonfigurujesz następujące zgody do wykorzystania w formularzach: dla wiadomości e-mail, dla SMS-ów lub ogólną.

• Masz wdrożony tzw. data layer na stronie swojego 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.

Formularze – panel kontrolny

W menu bocznym wybierz sekcję Automatyzacja, a następnie podsekcję Formularze. Znajdziesz tam tabelę ze stworzonymi przez Ciebie formularzami, które posortowaliśmy według statusów:

• Wszystkie – zawiera wszystkie stworzone formularze, również te usunięte
• Status – wyświetla aktualny status formularza: aktywny, nieaktywny, szkic lub usunięty.
• ID kampanii – numer identyfikacyjny kampanii,
• Nazwa – unikalna nazwa kampanii, która ułatwi jej identyfikację,
• Data utworzenia kampanii,
• Pierwsza aktywność – data i godzina pierwszej zarejestrowanej akcji wykonanej przez odbiorcę kampanii,
• Ostatnia aktywność – data i godzina ostatniej zarejestrowanej akcji związanej z kampanią,
• Przychód – przychód wygenerowany przez kampanię, podany w walucie Twojego konta w ExpertSender,
• Opcje – szczegóły, edycja, usunięcie formularza.

Rodzaje formularzy

Za pośrednictwem ExpertSender CDP stworzysz dwa rodzaje formularzy:

1. W formie pop-upu, czyli wyskakującego okienka z polami do wypełnienia przez Twoich klientów.
2. Osadzony na twojej stronie, zintegrowany z wyglądem Twojego sklepu.

Oba formularze stworzysz w edytorze. Projektowanie treści wygląda identycznie dla obu rodzajów formularzy/ Główne różnice znajdziesz w ustawieniach.

Ustawienia formularza w formie pop-upu

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.

Wyzwalacze

1. Wybierz zdarzenie, które uruchomi pop-up z formularzem.
2. Zdecyduj o tym, co stanie się po wysłaniu formularza.
3. Zaznacz opcję Potwierdzenie, jeśli chcesz wysłać klientom automatyczną wiadomość potwierdzającą po przesłaniu formularza:
4. Podstawowe potwierdzenie dostępne w Ustawienia > Zgody > Potwierdzenia > Wiadomość domyślna
5. Inne potwierdzenie, zaprojektowanie np. specjalnie dla tego formularza.
6. 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.
7. Zdecyduj, kto będzie odbiorcą,
8. Wybierz, jakie zgody są niezbędne do wyświetlania formularza. Możesz wybrać jedną lub wiele zgód:
   • Wyświetl odwiedzającym, którzy udzielili wszystkich zgód – forlumarz zobaczą odwiedzający, którzy udzielili wszystkich wybranych przez Ciebie zgód
   • Wyświetl odwiedzającym, którzy nie udzielili zgód – fomularz 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 z wybranych przez Ciebie zgód.
9. Zdecyduj, skąd mają przyjść klienci, którym wyświetlisz formularz.

Położenie okna z formularzem na stronie

W tej sekcji zdecydujesz o tym, jak formularz wyświetli się na ekranie komputera, telefonu bądź tabletu.

W panelu po lewo ustaw:

• Pozycję formularza na ekranie – centralne, lewo, prawo, na górze, na dole.
• Stałą pozycję – jeśli chcesz, żeby formularz wyświetlał się w tym samym miejscu ekranu.
• Rozmiar formularza – wprowadź szerokość i wysokość okna w pikselach lub procentach. Opcja Dostosuj do zawartości uruchamia dodatkowe pola, w których ustawisz:
  • margines – odległość formularza od krawędzi okna sklepu.
  • padding – odległość między treścią formularza a jego krawędziami.

• Zaokrąglone rogi – opcja pozwala na zaokrąglenie rogów wyświetlanego okna z formularzem.
• Przycisk zamykania – umożliwi zamknięcie okna po kliknięciu w przycisk.
• Tryb modalny – dodaje szarą, półprzejrzystą blendę, na tle której okno z formularzem jest lepiej widoczne. Tryb ten umożliwia też wejście w interakcję z obszarem poza formularzem.
• Zamknij pop-up na kliknięcie w tło – umożliwia użytkownikowi szybkie zamknięcie okna z formularzem i wejście do Twojego sklepu.

W oknie poniżej wpisz docelowy adres strony, na której ma pojawić się formularz i sprawdź, jak wyświetla się na Twojej stronie.

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 i odbiorcy

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, zaprojektowanie np. 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 wszystkich wybranych przez Ciebie zgód.
   • 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 z 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 – osadzanie 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.

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

W formulrzach 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.

Morzesz osadzić formularz używając następujących selektorów:

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

Zaprojektuj formularz

W sekcji Treść edytora zaprojektujesz zawartość i wygląd formularza. Znajdziesz tu gotowy do edycji szablon, ale możesz też zaprojektować własny.

Projektowanie formularza w formie pop-upu oraz osadzonego na stronie przebiega w ten sam sposób:

1. Po lewej, na panelu edytora kliknij sekcję Treść, a następnie rozwiń belkę Struktury.
2. Przeciągnij strukturę z wybraną liczbą kontenerów na szare pole robocze widoczne pośrodku. Zaprojektuj ramę formularza, który później wypełnisz blokami treści.
3. Wróć do panelu edytora i rozwiń belkę Bloki.
4. Wybierz blok Formularz i przeciągnij go do wybranej struktury.
5. Kliknij blok, żeby uruchomić menu edycji po lewej stronie.
6. W sekcji Dane wybierz:
   • Atrybuty, czyli cechy (dane) klientów, które chcesz zebrać za pomocą formularza. Każda cecha, systemowa i niestandardowa, ma określony typ, np. liczba, tekst, data, lista wyboru. Do każdego typu cechy przypisaliśmy rodzaj pola. Dla cechy typu ‘data’ będzie to kalendarz, dla cechy typu ‘tak/nie’ (np. karta stałego klienta) będzie to przełącznik lub pole wyboru.
   • W formularzu zawsze znajdą się atrybuty, które są wymagane w ustawieniach dotyczących klientów (Ustawienia > Klienci > pole Minimalne dane klienta). Nie można ich wyłączyć. Zależnie od ustaień Twojego konta, będą to oba atrybuty lub jeden z wybranych: e-mail, telefon.
   • Zgody, których klient musi udzielić wysyłając formularz.
   • Etykietę przycisku służącego do wysyłki formularza. Proste call-to-action wystarczy, np. ‘Wyślij’.
7. Dla każdego z wybranych pól możesz:
   • Nadać własną etykietę pola, np. adres e-mail, imię.
   • Dodać tekst pomocniczy, który wyświetli się w polu formularza, który zniknie, gdy użytkownik zacznie wprowadzać dane.
   • Zdecydować, czy wypełnienie danego pola jest obowiązkowe.
8. Po dodaniu wszystkich pól przejdź do sekcji Wygląd, w której zaprojektujesz:
   • Wygląd całego bloku formularza (sekcja Ustawienia ogólne)
   • Wygląd wybranych pól i przypisanych do nich kontrolek przełącznik (switch), pole wyboru (checkbox), przycisk opcji.
   • Wygląd przycisku.
9. Jeśli w sekcji Wyzwalacze zaznaczona jest opcja Po przesłaniu formularza wyświetl stronę z podziękowaniem, w edytorze treści pojawi się przełącznik umożliwiający Ci zaprojektowanie takiej strony.

Zaprojektuj stronę z podziękowaniem

W tym samej sekcji zaprojektujesz stronę z podziękowaniem, czyli widok, który wyświetli się klientowi po przekazaniu danych za pomocą formularza.

Za pomocą strony z podziękowaniem potwierdzisz klientowi przesłanie danych i dostarczysz dodatkowych wskazówek lub informacji o produktach.

Dzięki komunikatowi „dziękujemy” i dodatkowym grafikom lub treści, stworzysz 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 – jeśli tworzysz formularz osadzony na stronie
• Wyzwalacze – jeśli projektujesz formularz w formie pop-upu

Po wybraniu tej opcji przejdź do sekcji Treść. Nad obszarem roboczym znajdziesz przełącznik Przed/Po przesłaniu.

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

Jeśli pierwszy raz korzystasz z edytora treści w naszej platformie, ten artykuł pozwoli Ci zapoznać się z jego możliwościami: Jak działa edytor wiadomości

Podsumowanie i aktywacja formularza

W Podsumowaniu znajdziesz podgląd formularza oraz listę wprowadzonych ustawień.

Kliknij Aktywuj, żeby uruchomić formularz.