Wczoraj przybliżyłam wam tematykę operatorów wysyłki newsletterów, wskazałam plusy i minusy najpopularniejszych z nich, a dziś przejdziemy do umiejętności praktycznych i pokażę wam, jak stworzyć wasz własny formularz zapisu do newslettera MailerLite w WordPress.

Niezbyt ładne formularze domyślne

MailerLite oferuje nam wbudowany w panel administracyjny edytor formularzy zapisu i jest to świetna opcja dla osób nieznających HTML czy CSS, która pozwoli stworzyć piękne formularze i wyskakujące okienka. Niestety, edytor ten ma swoje ograniczenia, bo możemy w nim wybrać tylko kilka domyślnych wyglądów i edytować kolory i fonty występujące na stronie.

Gdy chcemy przygotować formularz idealnie wpasowujący się w wygląd naszej strony (chociażby taki, jak ten na dole naszej strony głównej – choć pop-up mamy już domyślny), musimy napisać własny kod przy pomocy jednej z wtyczek do wysyłki wiadomości. Naszym ulubionym pluginem jest Contact Form 7 (darmowy i prosty w obsłudze), dlatego dziś pokażę wam integrację właśnie z tą wtyczką.

Pobieramy wtyczki

Jeśli jeszcze nie macie wtyczki Contact Form 7, pobierzcie ją z repozytorium WordPress – znajdziecie ją pod tym adresem. (Więcej o instalowaniu wtyczek WordPress już niedługo na blogu). Do połączenia MailerLite z Contact Form 7 potrzebujecie jeszcze drugiej wtyczki o nazwie Contact Form 7 Connector – pobierzecie ją tutaj. Warto wspomnieć, że dzięki temu drugiemu pluginowi, jesteśmy w stanie połączyć Contact Form 7 nie tylko z MailerLite, ale także z MailChimp i Zapier.

Konfiguracja

Zaczynamy od wejścia na nasze konto MailerLite i zalogowania się do profilu. W prawym górnym rogu klikamy na nasze zdjęcie profilowe i wybieramy z menu opcję Integracje.

W kolejnym kroku pojawi nam się lista możliwych integracji. Nie znajdziemy tu połączenia z Contact Form 7, więc wybieramy opcję na samej górze – Developer API.

Pojawi nam się tak zwany API key. Nie podawajcie go nikomu (chyba, że osobie, która wykonuje u was konfigurację). Skopiujcie go przyciskiem obok numeru.

Teraz możemy wrócić do naszego panelu na WordPressie. Logujemy się do panelu administracyjnego i z menu po lewej stronie wybieramy opcję CF7 Connector.

W zakładce General zaznaczamy pole przy usłudze, której NIE używamy. W tym przypadku zaznaczam MailChimp i pozostawiam MailerLite bez zaznaczenia. Zapisuję zmiany przyciskiem Save changes.

Następnie przechodzimy do zakładki MailerLite i wklejamy tam nasz API key. Klikamy Check API key, a po pomyślnym sprawdzeniu, Save changes.

Teraz pora na konfigurację wtyczki Contact Form 7. Z menu panelu administracyjnego WordPressa przechodzimy do zakładki Formularze.

Na samej górze klikamy Dodaj nowy (lub jeśli mamy już istniejący formularz, wybieramy go z listy i klikamy Edytuj). Pojawi nam się okno, w którym wprowadzamy kod HTML formularza:

Jak widzicie, nasz formularz ma klasę “newsletter”, którą następnie użyliśmy w plikach CSS szablonu (w naszym przypadku w polu Custom CSS), by edytować wygląd poszczególnych pól. Gdy kod jest wklejony, przechodzimy do zakładki Ustawienia dodatkowe.

Jeśli nie chcemy otrzymywać na naszą skrzynkę e-mail powiadomień o każdym subskrybencie (my nie chcemy, bo wszystkie powiadomienia otrzymujemy w panelu MailerLite), w tym polu wpisujemy wartość skip_mail: on. W przeciwnym wypadku pozostawiamy pole puste.

Teraz przechodzimy do właściwej integracji, wchodząc w zakładkę MailerLite.

Tu sprawdzamy, czy nasz API key zgadza się z podanym wcześniej, a później przypisujemy polom formularza właściwe zmienne. Name to imię, więc przypisujemy mu nazwę pola, do którego użytkownik ma wpisywać imię, domyślnie to [your-name]. Podobnie w polu Email -wpisujemy nazwę pola formularza służącego do wpisania adresu e-mail, domyślnie to [your-email]. Poniżej wybieramy listę subskrybentów – domyślnie macie na koncie tylko jedną, z czasem może być ich więcej, dlatego przypiszcie formularz do wszystkich używanych przez was grup.

Jeśli używacie pola zgody marketingowej, w polu Confirm field przypiszcie jego nazwę z formularza, u nas to p oprostu [mailerlite-zgoda]. Jeśli w waszej liście subskrybentów zbieracie dodatkowe informacje (np. nazwisko, nr telefonu?), zaznaczacie opcję Custom fields i przypisujecie poszczególnym polom nazwy z waszego formularza, analogicznie do imienia oraz adresu e-mail powyżej.


Mam nadzieję, że wszystkie wątpliwości zostały wyjaśnione 🙂 Nie zapomnijcie podzielić się tym artykułem ze znajomymi, jeśli uważacie go za przydatny.