menu Pokaż opcje
comment

Jak stworzyć formularz popup na MailerLite

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.

Nowy formularz

W zakładce Formularze wybierz opcję „Dodaj nowy formularz”. Nazwij go jednoznacznie i kontynuuj.

mailerLite Formularz Popup

Rodzaj formularza: Popup

Jako rodzaj formularza, wybierz oczywiście Formularz Popup, czyli pierwszy wariant.

MailerLite Formularz Popup

Grupa odbiorców

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

MailerLite Formularz Popup

Wybór szablonu

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

Edycja formularza

Po wybraniu szablonu, przechodzimy do Webform Builder, czyli narzędzia, które pozwoli nam nieco zmienić wygląd, układ i zachowanie naszego Popupa

MailerLite formularz popup

Tło formularza

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

Tekst i tytuł formularza

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.

Wygląd pól formularza

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

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ść.

Ustawienia formularza

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.

Edycja pól formularza MailerLite

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

Edycja treści i tytułu

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.

Widok podziękowania

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.

Podgląd mobilny

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.

Śledzenie zmian

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ąć.

Zachowanie PopUpa

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ść.

Czekaj 5 sekund przed pokazaniem popup’a

Tutaj możemy wybrać czy ma być opóźnienie w wyświetleniu się okienka oraz po jakim okresie ma to nastąpić.

Pokaż kiedy użytkownik przewinie do…

Czyli okienko pokaże się, jeśli user przewinie stronę o X %.

Pokaż przed zamknięciem strony

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

Częstotliwość

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.

Widoczność

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

Instalacja kodu

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

Podsumowanie

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.

Kategoria: Tagi:

Może zainteresuje Cię również

Ta strona wykorzystuje pliki cookies. Korzystanie ze strony oznacza zgodę na ich zapis lub odczyt wg ustawień przeglądarki. Więcej informacji znajdziesz w polityce prywatności. OK, rozumiem