Formularz zapisu na newsletter – Divi + MailerLite

Zdarza się czasem, że możliwości tworzenia formularzy w naszym systemie do newslettera nie do końca nam odpowiadają. Są takie systemy, w których wygląd formularzy jest kompletnie do bani (np. MailChimp). Są też takie, w których ustawienia wyglądu są bardziej zaawansowane, ale np. nie ma naszych fontów i ciężko uzyskać efekt spójny z naszą stroną internetową. W takich sytuacjach z pomocą przychodzi Divi, który posiada specjalny moduł z formularzem zapisu na newsletter. W dzisiejszym artykule pokażę Wam jak taki formularz skonfigurować 😉

Zacznijmy od tego, że musimy mieć jakąś stronę stworzoną w Divi – może to być strona lądowania, strona główna czy jakiś wpis. Następnie – w wybranym przez nas miejscu – musimy dodać moduł formularza zapisu na newsletter. W tym celu z listy modułów wybieramy Napisz Oптин (tak, ten moduł serio się tak nazywa, nie pytajcie mnie co autor miał na myśli). Gdy moduł już zostanie dodany do naszej strony, możemy przejść do jego konfiguracji. Ja zacznę od ustawień wyglądu.

Ustawienia wyglądu

Tak jak we wszystkich modułach w Divi – możliwości edycji wyglądu są naprawdę spore. W zakładce Zawartość -> Tekst możemy ustawić Tytuł, który pojawi się nad naszym formularzem zapisu. W polu Przycisk ustawiamy tekst przycisku zatwierdzającego przesłanie formularza. W polu Korpus możemy ustawić tekst, który pojawi się między tytułem a formularzem, a w polu Stopka możemy dodać tekst, który pojawi się pod przyciskiem zatwierdzającym przesłanie formularza.

W Zawartość -> Tło możemy ustawić tło dla całego modułu. Resztę ustawień wyglądu możemy ustawić w zakładce Design.

Układ graficzny

Jeśli wejdziemy w Design -> Układ graficzny, możemy zmienić sposób wyświetlania naszego formularza. Z listy rozwijanej oznaczonej jako Układ graficzny możemy wybrać jedną z czterech opcji:

• od lewej do prawej – wybierając tę opcję, otrzymujemy Tytuł i Korpus po lewej stronie, a formularz zapisu i Stopka po prawej (jeśli nasz moduł znajduje się w pojedynczej kolumnie),
• od prawej do lewej – jeśli wybierzemy tę opcję, formularz i Stopka znajdzie się po lewej stronie, a Tytuł i Korpus po prawej (jeśli nasz moduł znajduje się w pojedynczej kolumnie),
• od góry do dołu – przy tej opcji możemy wyświetlić wszystkie elementy formularza jeden pod drugim – zaczynając od Tytułu, a kończąc na Stopce,
• od dołu do góry – zaznaczając tę opcję, odwracamy kolejność wyświetlania elementów – w pierwszej kolejności wyświetla się Formularz, następnie Stopka, a na końcu Tytuł oraz Korpus.

W Design -> Układ graficzny -> Wymuś pełną szerokość możemy wymusić pełną szerokość poszczególnych pól formularza. Jeśli ta opcja jest wyłączona – dane pole będzie zajmowało połowę szerokości modułu. Jeśli ją zaznaczymy – zajmie 100% szerokości modułu. Ilość tych opcji zależy od tego ile mamy pól w swoim formularzu, a kolejność – od kolejności wyświetlania pól w formularzu.

Wymiarowanie

Jeśli nie chcemy, by nasz formularz zajmował pełną szerokość kolumny – możemy to zmienić w zakładce Design -> Wymiarowanie -> Maksymalna szerokość możemy zmienić maksymalną szerokość naszego formularza. Najlepiej ustawić sobie tę wartość w procentach. Trzeba też pamiętać, żeby – po ustawieniu szerokości na komputerze – nacisnąć ikonkę telefonu i ustawić odpowiednią szerokość również na urządzeniach przenośnych. Na filmie wideo możesz zobaczyć, że – mimo ustawienia na tabletach szerokości na 100% – na podglądzie formularz zajmuje 50% zawartości modułu. Okazuje się, ze to błąd wyświetlania na podglądzie, a na urządzeniach ten wygląd jest prawidłowy. Wyświetlanie ostateczne strony najlepiej jest sprawdzać w narzędziach zewnętrznych, takich jak Responsinator.

Kiedy zmniejszymy szerokość naszego modułu, pojawi nam się dodatkowa sekcja – Wyrównanie tekstu. Zaznaczając odpowiednią opcję, możemy wyrównać cały moduł do lewej lub do prawej, a także wyśrodkować.

 

Pozostałe opcje wyglądu działają dokładnie tak samo, jak w innych modułach w Divi, więc nie będę ich tutaj opisywać. Przejdźmy do konfiguracji naszego formularza.

Konfiguracja

Konfiguracja formularza zapisu na newsletter w Divi składa się z kilku etapów. Musimy:

• wybrać, jakie elementy mają się w formularzu pojawić,
• połączyć formularz z naszym systemem do newslettera,
• dodać pole z checkboxem,
• skonfigurować double opt-in,
• zdecydować, jaką akcję chcemy wykonać po przesłaniu formularza i odpowiednio ją ustawić.

Nie przedłużając – bierzmy się do roboty!

Ustawienia pól formularza

Domyślnie w naszym formularzu zapisu na newsletter znajdują się trzy pola: Imię, Nazwisko oraz Adres mejlowy. Możemy to zmienić, przechodząc do zakładki Zawartość -> Pola. Pojawi nam się kilka opcji do wyboru:

• Pole nazwy – jeśli ją włączymy, znikną nam pola odpowiedzialne za podanie imienia i nazwiska – zostanie tylko pojedyncze pole na czyjąś nazwę,
• Pokaż pole imienia – pierwsze pole odpowiada za wyświetlanie pola „Imię” w formularzu,
• Pokaż pole imienia – drugie pole odpowiada za wyświetlanie pola „Nazwisko” w formularzu.

Poniżej mamy opcję Użyj niestandardowej szerokości – omówimy ją za chwilę, przy dodawaniu checkboxa.

Łączenie formularza zapisu na newsletter w Divi z systemem do mailingu

Ustawienia integracji z systemem do mailingu znajdziemy w zakładce Zawartość -> Konto e-mail. Najpierw w polu Dostawca wybieramy system, z którego korzystamy. Ja w tym filmie pokazuję jak wykorzystać Divi do stworzenia formularza dla MailerLite, więc wybieram MailerLite. Jeśli jeszcze nie łączyłyśmy swojego formularza zrobionego w Divi z dostawcą newslettera – musimy kliknąć przycisk Dodaj. Wyskoczy nam okno do wprowadzenia odpowiednich danych. W polu Nazwa konta podajemy nazwę swojego konta. Zaś w polu API Key podajemy nasz klucz API. W przypadku MailerLite ten klucz znajdziemy w menu głównym (nazwa firmy w prawym górnym rogu) -> Integracja -> Developer API -> Użyj.

Następnie w polu MailerLite Lista (nazwa zależy od Twojego dostawcy) wybieramy listę, do której mają zostać dodani subskrybenci, którzy zapiszą się przez ten formularz. Ta lista nie aktualizuje się na bieżąco – jeśli dokonasz jakiejś zmiany u swojego dostawcy newslettera, musisz na nowo dodać konto w formularzu.

Dodanie checkboxa

Żeby dodać checkbox, w pierwszej kolejności musimy dodać odpowiednie pole u swojego dostawcy newslettera. W przypadku MailerLite wystarczy wejść w zakładkę Subskrybenci -> Pola -> Dodaj nowe pole i dodać pole tekstowe. Jeśli masz newsletter gdzie indziej, Divi udostępniło odpowiednie instrukcje TUTAJ.

Gdy nowe pole mamy już dodane – wracamy do zakładki Zawartość -> Pola i aktywujemy opcję Użyj niestandardowej szerokości. Technicznie rzecz biorąc – powinien nam się pojawić znak +, dzięki któremu możemy dodać własne pole do formularza. Niestety – czasem pojawia się komunikat, że nie zostało zdefiniowane odpowiednie pole. W takim przypadku musimy zrobić dwie rzeczy:

1. Zapisać stronę i ją odświeżyć.
2. Jeśli to nie zadziała – połączyć ponownie system do newslettera z formularzem i odświeżyć stronę.

Po wykonaniu tych dwóch kroków, wszystko powinno już działać prawidłowo. Pojawia nam się znak +. Po jego kliknięciu możemy wybrać z listy pole, które jest naszym checkboxem. W Opcje pól wybieramy typ pola (Type), wklejamy regułkę i dodajemy link do polityki prywatności – analogicznie jak przy tworzeniu formularzy kontaktowych. Następnie zaznaczamy, że to pole jest wymagane (Required Field -> YES) i że ma być widoczne (Hidden Field -> NO).

Dokładnie w ten sam sposób możemy dodać do naszego formularza inne pola, które nie są dodawane domyślnie – np. pole z datą urodzenia czy numerem telefonu.

Jeśli chcemy ukryć nazwę pola w formularzu, wystarczy przejść do menu WordPressa -> Wygląd -> Dostosuj -> Dodatkowy CSS i wkleić poniższy kod:

.et_pb_contact_field_options_title{
display:none;
}

Double opt-in

Teraz musimy się upewnić, że nasz formularz ma włączony double opt-in. W przypadku MailerLite musimy przejść do ustawień wtyczki (menu WordPressa -> MailerLite -> Settings) i sprawdzić czy ustawienie Double opt-in jest włączone(Enabled). Jeśli tak – musimy skonfigurować nasz mail z potwierdzeniem zapisu na newsletter. W tym celu przechodzimy do menu głównego MailerLite -> Ustawienia subskrypcji i sprawdzamy czy funkcja Double opt-in dla API i integracji jest włączona. Jeśli tak – konfigurujemy sobie w odpowiedni sposób Email Potwierdzający oraz Stronę Potwierdzającą z Podziękowaniem. Gotowe!

UWAGA! Dochodzą mnie słuchy, że ostatnio nie zawsze działa wysyłanie maila potwierdzającego zapis w MailerLite. Przyczyny takich problemów do tej pory miałam dwie:

1. Awaria – gdzie maile nie dochodziły wcale lub z dużym opóźnieniem. W takim przypadku warto zgłosić się do supportu MailerLite.
2. Reguły zabronione – np. w regułce {email} wkradła się spacja, ale powód może być też inny. Niestety – MailerLite nie zdradziło mi tej tajemnicy (napisali tylko o regułach niedozwolonych), więc jeśli nie dochodzą nam maile potwierdzające, najlepiej usunąć wszystkie reguły z danymi subskrybentów. Jeśli dalej nie działa – uderzać bezpośrednio do supportu, tu nic więcej zepsuć nie można.

Akcja po przesłaniu formularza

Po wypełnieniu formularza przez subskrybenta możemy zrobić dwie rzeczy – dostępne również w klasycznych formularzach zapisu – czyli:

1. Przekierować na inną stronę – w tym celu wchodzimy w zakładkę Zawartość -> Sekcja i w polu Sekcja wybieramy Przekieruj URL. Następnie w polu Przekieruj URL wklejamy link do strony, do której chcemy przekierować osobę, która wypełniła formularz. Zachęcam Was do korzystania z tego rozwiązania – osobna strona to miejsce, w którym możecie zaproponować One-Time Offer, ale również – dodać jakieś materiały edukacyjne i zachęcić do potwierdzenia zapisu. Z mojego doświadczenia wynika, że dodanie materiałów edukacyjnych pozytywnie wpływa na ilość potwierdzonych zapisów. Wszystko dlatego, że kontakt użytkownika nie kończy się na zapisie – może Was lepiej poznać i Was zapamiętać. Już nie mówiąc o możliwościach marketingowych – dzięki dodatkowej stronie możemy ustawić kampanię reklamową na Facebooku, ustawioną na konwersję, co pozytywnie wpływa na koszt reklamy.
2. Wiadomość o zakończeniu sukcesem – jeśli chcemy tylko wyświetlić wiadomość o pozytywnym przesłaniu formularza, w zakładce Zawartość -> Sekcja, wybieramy Wyświetl Captcha w polu Sekcja (błagam, niech ktoś zmieni tłumacza!!!). Następnie w polu Wiadomość podajemy własną wiadomość o poprawnym przesłaniu formularza. Możemy też zmienić wygląd tej treści – wystarczy wejść w zakładkę Design -> Wiadomość o zakończeniu sukcesem Tekst.

 

Jak zmienić napis w polach?

Powiedzmy sobie szczerze – napisy, które znajdują się w polach formularza zapisu na newsletter nie są najszczęśliwsze. Ale możesz to zmienić!

Wystarczy, że wejdziesz w menu WordPressa -> Divi -> Opcje szablonów graficznych -> Integracja -> Dodaj kod <head> do Twojego nagłówka -> i wkleisz ten kod:

<script type="text/javascript">
jQuery(function($){
$("#et_pb_signup_firstname").attr("placeholder", "Twoje imię");
$("#et_pb_signup_email").attr("placeholder", "Twój adres email");
});
</script>

W miejsce „Twoje imię” i „Twój adres email” wpisujesz to, co chcesz, żeby się w tym okienku znalazło.

 

W dzisiejszym artykule to wszystko. Twój formularz jest już gotowy!