Krok po kroku, jak stworzyć formularz zapisu na listę adresową – popup w systemie MailerLite
Ostatnio pisałem o tym jak zacząć z MailerLite i jak stworzyć swój pierwszy formularz. Teraz znacznie dogłębniej przeanalizuję możliwości jakie daje formularz popup.
W zakładce Formularze wybierz opcję „Dodaj nowy formularz”. Nazwij go jednoznacznie i kontynuuj.
Jako rodzaj formularza, wybierz oczywiście Formularz Popup, czyli pierwszy wariant.
Dalej wybierz grupę, lub grupy subskrybentów, do jakich będą wpadać nowe adresy z tego formularza. Od Ciebie zależy, czy wszystkie adresy będziesz mieć w jednej grupie, czy jednak zachowasz porządek. Ja w przykładzie, stworzyłem osobną grupę (blogową) dla tego formularza.
Grupę odbiorców zawsze możesz potem zmienić.
Kolejny krok to wybór szablonu. Wybór jest bardzo mały, ale to akurat uznaję jako zaletę tego systemu.
Sam musisz podjąć jaki szablon najlepiej się u Ciebie sprawdzi, w jakim układzie. Szablon Full Screen nieco różni się od pozostałych, gdyż pojawia się na pełnym ekranie – nie da się go nie zauważyć :). Pozostałe warianty, to mniejsze okienka popup, które różnią się tylko układem treści.
Na potrzeby artykuły wybieram szablon E-commerce
Po wybraniu szablonu, przechodzimy do Webform Builder, czyli narzędzia, które pozwoli nam nieco zmienić wygląd, układ i zachowanie naszego Popupa
Można wybrać dowolny kolor z dostępnej palety kolorów lub podać kod Twojego koloru. A jeśli chcesz, jako tło możesz ustawić własny obrazek. Co wygodne, obrazek można zaimportować podając jego adres URL.
Bezpośrednio z edytora, nie ma jednak możliwości ustawienia w CSS koloru-gradientu
Możesz ustawić kolor czcionki, rozmiar oraz rodzaj spośród kilku dostępnych. W tytule dodatkowo możesz ustalić Wagę, czyli czy czcionka ma być pogrubiona, czy normalna.
Do edycji wyglądu pól formularza służą opcje „Input” oraz „Etykieta”
Input
Pozwala edytować wygląd pola tekstowego. Można ustalić kolor tła pola, kolor czcionki i jej rodzaj oraz grubość i kolor obramowania pola.
Etykieta
Z etykiety można zrezygnować, pozostawiając w Ustawieniach formularza pole „Pokaż etykiety wejściowe” niezaznaczone. W etykiecie, również można edytować czcionkę
Przycisk wyślij, oznaczony w ustawieniach jako „Przycisk”. Analogicznie jak wcześniej można ustawić kolor tła i wygląd czcionki. Dodatkowo jest opcja „Background Hover”, czyli kolor tła, na jaki zmieni się przycisk po najechaniu go kursorem myszy.
Przycisk zamknij. Dodatkowo możemy ustawić jego „Typ”. Dostępne są 3 warianty:
Ikonka, Tekst, Ikonka + Tekst
Ikonka pojawia się w prawym górnym rogu, zaś tekst na samym dole okienka. Nie możemy zmienić pozycji ikonki, ani tekstu, za to można zmienić ich kolory i treść.
Obok przycisku „Design” są „Ustawienia”. Mamy tam możliwość zaznaczenia 2 opcji.
Pokaż etykiety wejściowe. Czyli, wyświetlanie etykiet (opisów pola) nad polem – tak będzie jeśli zaznaczymy opcję. Jeśli pozostanie odznaczona, to nazwa pola wyświetli się w polu, jako placeholder.
Pokaż checkbox potwierdzający. Możesz zadecydować, czy chcesz dodać do formularza pole z checkbox. Pole to służy to potwierdzenia akceptacji regulaminu, polityki prywatności. Zwykle ma postać „Wyrażam zgodę na…”. Niestety w treści tego pola nie można wstawić linku.
Aby edytować pola, trzeba kliknąć, na podglądzie formularza, w to pole. Wtedy pokażą się nieomawiane jeszcze opcje pól formualarza.
Można dodać kilka pól spośród dostępnych typów. Tutaj możesz również wybrać z listy swoje własne pole, które możesz dodać w podczas zarządzania subskrybentami – opcja „Własne Pola”. Dla każdego ustalić jego opis – etykietę. Oraz zaznaczyć, czy jest wymagane, czy też nie. Metodą drag&drop można ustalić kolejność wyświetlania pól a w razie potrzeby usunąć sobie niechciane pole.
W tym samym widoku wyświetlany jest również przycisk „wyślij” – tutaj możesz zmienić jego nazwę.
Również znajdziesz tutaj pole checkbox, o ile je włączyłeś w ustawieniach. Nie ma możliwości zmiany kolejności wyświetlania się pola checkbox. Również układ pól jest tutaj sztywno ograniczony – można to zmienić wybierając, na początku, inny szablon. Mając więcej niż jedno pole, przycisk „Wyślij” wpada na spód. Kiedy mamy tylko jedno pole, przycisk ten wyświetla się w jednej linii z polem.
Poniżej zrzut formularza, z własnym polem
Klikając w podglądzie na tytuł i opis przejdziemy do edycji treści tychże pól.
Można wprowadzić własną treść. Co więcej pole Tekst posiada prosty edytor WYSIWYG do zaawansowanej edycji tekstu. W tym opcja „kod źródłowy”, dzięki której można wprowadzić samodzielnie tekst HTML.
W podglądzie, podczas tworzenia formularza, na samej górze jest przycisk „Sukces”. Po kliknięciu go, możesz zająć się edycją tego co zobaczy użytkownik po zapisaniu się na listę.
Nie widzę tutaj możliwości zrobienia przekierowania użytkownika, po zapisaniu, na osobną stronę. Podziękowanie pojawi się dynamicznie w okienku popup.
Klikając na tekst, możesz zmienić tytuł, wiadomość, tekst na przycisku. Wygląd tego tekstu, tytułu i przycisku jest tożsamy z tym, który tworzyłeś na stronie „Popup” – tutaj możesz zmienić tylko treści.
W prawym, bocznym bloku, na górze jest ikonka monitora i smartfona. Możesz przełączyć widok, i otrzymasz podgląd w wybranym przez Ciebie formacie. W trybie widoku mobilnego, nie możesz edytować formularza a jedynie podejrzeć, jak wygląda on na telefonie.
W tym samym prawym bloku, na dole, jest link „Śledź zmiany”. Po jego kliknięciu, na dole podglądu pojawi się dodatkowe okienko z historią działań jakie podjęliśmy.
Okienko możesz zamknąć lub zminimalizować. A każdą widoczną w nim zmianę cofnąć.
Kliknij pomarańczowy przycisk „Zakończ edytowanie” a przejdziesz do ustawień zachowania się popupa. To bardzo istotne ustawienia, możesz wybrać tryb, widoczność i częstotliwość.
Tutaj możemy wybrać czy ma być opóźnienie w wyświetleniu się okienka oraz po jakim okresie ma to nastąpić.
Czyli okienko pokaże się, jeśli user przewinie stronę o X %.
Czyli opcja, która wyświetli okienko podczas ruchu kursora w górnym kierunku – karty.
Co ciekawe, można zaznaczyć wszystkie opcje naraz. Jednak po jednorazowym zamknięciu okienka nie pokaże się ono kolejny raz, chyba, że w częstotliwości wyświetlania wybierzemy opcje – pokazuj zawsze, ale o tym za chwilę.
Czyli jak często ma się pokazywać popup temu samemu użytkownikowi, jeśli się nie zapisał na listę. Możesz wybrać w przestrzeni czasowej, albo zaznaczyć, by pokazywał się za każdym razem.
Jeśli wklejasz kod globalnie na swoją stronę, czyli, że będzie widoczny na każdej podstronie, w tym miejscu możesz nieco zawęzić ten zakres. I zaznaczyć na których stronach chcesz pokazać popup albo na których nie chcesz.
Tzn. możesz pokazać popup na wszystkich podstronach, poza… konkretnymi adresami. Albo tylko na konkretnych adresach
Nie znalazłem informacji co oznacza opcja „Zastosuj surową równość” 🙂
Dalej mamy jeszcze opcje ukrycia popupa na telefonach lub tabletach
Po zapisaniu formularza wyświetli Ci się kod do pobrania i wstawienia na stronę. Musisz wstawić go w szablonie, na górze strony, przed zamknięciem sekcji head.
Jeśli korzystasz z WordPressa i lubisz wtyczki, to MailerLite przygotował dla Ciebie jedną, która ułatwi Ci instalację takiego formularza. Official MailerLite Sign Up Forms
Spójrz jeszcze na podgląd Twojego formularza
Aby w pełni działał, musisz go aktywować – zmienić status na aktywny. W podglądzie masz też całe podsumowanie ustawień i możliwość ich zmiany
Formularz popup, który tworzyłem, zainstalowałem na tym właśnie blogu – być może już go widziałeś? Przetestowałem go i działa, pojawia się w odpowiednim momencie… Brakuje tylko jasnego komunikatu w przypadku niezaznaczenia checkboxa
Omówiłem już chyba każdą funkcję i opcję w temacie tworzenia formularzy Popup w MailerLite. Jeśli czegoś brakuje, coś jest nie jasne, to napisz w komentarzu.
Moje 7, najlepszych, sprawdzonych
sposobów na efektywną pracę zdalną
Do wdrożenia jeszcze dziś!
