Rozdziały
- Kreator formularzy zapisu: projektuj formularze
- Twórz i publikuj strony docelowe
- Twórz i osadzaj formularze zapisu
- Tworzenie i wyświetlanie formularzy popup
- Twórz formularze Slide-in i ustawiaj ich pozycję
Spis treści
Narzędzie do wysyłki e-maili, dzięki któremu e-mail marketing jest prosty
Kreator formularzy zapisu: projektuj formularze
Opublikowano: · Ostatnia aktualizacja: · Autor: Marcus Biel
W skrócie
Poznaj wizualny kreator Maildroppa: wybieraj szablony, układaj treści, zmieniaj wygląd pól, przypisuj tagi, łącz procesy zapisu, sprawdzaj podgląd i zapisuj.
Kreator formularzy zapisu to wizualny edytor wszystkich formularzy zapisu i stron docelowych w Maildroppa.
Możesz w nim tworzyć układy, dodawać tekst i obrazy, konfigurować pola subskrybenta, zmieniać kolory i czcionki, przypisywać tagi oraz określać, co dzieje się po przesłaniu formularza. Obszar roboczy pokazuje efekty na bieżąco, więc zaprojektujesz cały proces zapisu bez pisania kodu.
Maildroppa używa tego samego kreatora dla czterech typów formularzy:
- Strony docelowe to kompletne, samodzielne strony, które publikujesz i udostępniasz za pomocą linku.
- Formularze osadzane umieszczasz bezpośrednio na stronie swojej witryny.
- Popupy pojawiają się nad treścią witryny i można je również otwierać za pomocą elementu strony.
- Wysuwane okna pojawiają się przy wybranej krawędzi lub w wybranym miejscu okna przeglądarki.
Ten przewodnik wyjaśnia wszystkie funkcje wspólne dla tych typów formularzy. Przewodniki dostępne pod linkami opisują wyłącznie ustawienia i kroki charakterystyczne dla poszczególnych typów.
Otwórz kreator formularzy zapisu
Otwórz „Signup Forms” w Maildroppa. Następnie kliknij „Create Form”, aby utworzyć nową stronę docelową, formularz osadzany, popup lub wysuwane okno.
Aby kontynuować pracę nad istniejącym formularzem, kliknij jego nazwę albo wybierz „Edit Form” z menu działań oznaczonego trzema kropkami w przeglądzie formularzy zapisu.
Nadaj formularzowi zrozumiałą nazwę wewnętrzną. Nazwy takie jak „Newsletter na stronie głównej”, „Popup webinaru” czy „Letni lead magnet” łatwiej później rozpoznać niż ogólne określenia w rodzaju „Formularz 1”. Nazwa ułatwia zarządzanie formularzem w Maildroppa i nie jest automatycznie wyświetlana odwiedzającym.
Poznaj kreator
Kreator jest podzielony na cztery główne obszary.
Górny pasek zawiera nazwę formularza i najważniejsze opcje. Możesz stąd wrócić do przeglądu, wyświetlić podgląd projektu i go zapisać. W przypadku stron docelowych na tym pasku znajdują się również opcje wersji roboczej i publikacji.
Lewy panel boczny zawiera sekcje „Layout”, „Content” i „Layers”. Służy do tworzenia struktury, dodawania nowych elementów i zarządzania wszystkim, co znajduje się już w obszarze roboczym.
Obszar roboczy zajmuje środkową część kreatora i pokazuje bieżącą stronę lub formularz. Kliknij element, aby go zaznaczyć. Możesz też przeciągać elementy w inne miejsce lub dodawać nowe z lewego panelu bocznego.
Prawy panel boczny zawiera sekcje „Settings” i „Page settings”. W „Settings” zmieniasz ustawienia zaznaczonego elementu, a w „Page settings” — ogólne tło i domyślne ustawienia wyglądu.
Na mniejszych ekranach panele boczne otwierasz przyciskami „Content” i „Settings”. Dostępne funkcje pozostają takie same.
Zacznij od szablonu
Podczas tworzenia formularza kreator proponuje projekty startowe dla wybranego typu formularza. Możesz zacząć od pustego projektu, użyć standardowego formularza albo wybrać gotowy szablon.
Szablony zapewniają początkowy układ, kolory, typografię i przykładową treść. Nie ograniczają późniejszych zmian. Po wybraniu szablonu nadal możesz edytować, przenosić, duplikować i usuwać każdy element, a także zmieniać jego styl.
Każdy typ formularza ma szablony dopasowane do swojego przeznaczenia. Na przykład strony docelowe oferują kompletne projekty stron Newsletter, Lead Magnet, Webinar i Waitlist. Formularze osadzane, popupy i wysuwane okna mają własne, kompaktowe projekty startowe.
Jeśli nie wiesz, który szablon wybrać, postaw na ten, którego struktura najlepiej odpowiada celowi formularza. Zmiana tekstu, kolorów i obrazów zwykle zajmuje mniej czasu niż budowanie tej samej struktury od zera.
Utwórz układ
Otwórz „Layout” w lewym panelu bocznym, aby dodać nowy wiersz komórek. Dostępne układy obejmują:
- Jedną komórkę
- Dwie, trzy lub cztery równe komórki
- Dwie komórki w proporcji 2:1
- Dwie komórki w proporcji 1:2
Kliknij układ, aby dodać go w bieżącym miejscu wstawiania, albo przeciągnij go do obszaru roboczego. Następnie możesz umieścić treści w każdej komórce.
Zaznacz kontener lub kolumnę, aby w prawym panelu bocznym dostosować rozmiar, odstępy, wyrównanie, tło, obramowanie i marginesy wewnętrzne. W układach wielokolumnowych możesz też zmieniać proporcje szerokości kolumn.
Dobierz układ tak, aby treść miała czytelną kolejność. Jedna kolumna dobrze sprawdza się w kompaktowych formularzach zapisu. Układ dwukolumnowy przydaje się, gdy obok formularza ma się znaleźć obraz, lista korzyści lub informacja o wydarzeniu.
Dodaj treści
Otwórz „Content” w lewym panelu bocznym, aby dodawać pojedyncze bloki treści. Kliknij blok, aby go wstawić, albo przeciągnij go w wybrane miejsce w obszarze roboczym.
Kreator udostępnia następujące bloki treści:
Signup form — Zawiera pola subskrybenta i przycisk wysyłania formularza. Aby zapisać projekt jako działający formularz, musisz umieścić w nim jeden blok formularza zapisu. Po dodaniu tego bloku nie można wstawić kolejnego.
Text — Dodaje nagłówki, akapity lub inny sformatowany tekst.
Image — Dodaje obraz z adresu URL, przesłanego pliku lub biblioteki multimediów Maildroppa. Możesz podać tekst alternatywny, dodać link oraz ustawić wymiary, proporcje, przycięcie, punkt centralny, obrót i odbicie.
Video — Dodaje film z YouTube lub Vimeo, z adresu URL do osadzenia albo bezpośrednio z pliku wideo. Możesz też ustawić obraz podglądu i wygląd przycisku odtwarzania.
List — Dodaje listę punktowaną lub numerowaną. Możesz edytować jej pozycje oraz ustawić kolor znaczników, odstępy, typografię i wyrównanie.
Button — Dodaje przycisk z linkiem. Możesz ustawić jego tekst, adres URL, rozmiar, szerokość, kolory, obramowanie, typografię i wyrównanie.
Social links — Dodaje ikony z linkami do serwisów takich jak Facebook, Instagram, LinkedIn, TikTok i YouTube lub do własnej witryny.
Subscriber counter — Pokazuje bieżącą liczbę subskrybentów z potwierdzonym zapisem. Możesz dodać do niej wartość przesunięcia, zmienić etykietę oraz dostosować wygląd liczby i tekstu.
Spacer — Dodaje pustą przestrzeń o wybranym rozmiarze. Odstępy na komputerach i urządzeniach mobilnych można ustawić osobno.
Divider — Dodaje poziomą linię. Możesz ustawić jej kolor, grubość, szerokość, styl, wyrównanie i odstępy.
Strony docelowe udostępniają również kompletne sekcje wielokrotnego użytku. Opisuje je przewodnik po stronach docelowych.
Zaznacz i rozmieść elementy
Kliknij element w obszarze roboczym, aby go zaznaczyć. Jego ustawienia pojawią się w prawym panelu bocznym.
Opcje widoczne na zaznaczonym elemencie lub obok niego pozwalają go przenieść, zduplikować lub usunąć. Możesz też przeciągnąć element do innej komórki lub w inne miejsce. Wskaźnik położenia pokazuje, gdzie zostanie wstawiony.
Otwórz „Layers”, gdy strona zawiera wiele zagnieżdżonych kontenerów, kolumn i bloków treści. Panel „Layers” pokazuje pełną strukturę w formie listy. Możesz w nim:
- Zaznaczyć element
- Zmienić jego nazwę, aby łatwiej go rozpoznać
- Przenieść go wyżej lub niżej
- Przeciągnąć go w inne miejsce
- Zablokować lub odblokować go
- Zduplikować go
- Usunąć go
Blokada chroni gotowe tło, obraz lub sekcję przed przypadkowym przeniesieniem. Odblokuj warstwę, gdy chcesz ją ponownie edytować lub zmienić jej położenie.
Używaj poleceń „Undo” i „Redo” na pasku narzędzi kreatora, aby cofać lub ponawiać ostatnie zmiany w projekcie.
Edytuj tekst
Kliknij wewnątrz elementu tekstowego, aby edytować treść bezpośrednio w obszarze roboczym. Pasek narzędzi tekstu udostępnia style akapitów i nagłówków oraz typowe opcje formatowania.
W zależności od zaznaczonego tekstu możesz korzystać z pogrubienia, kursywy, podkreślenia, przekreślenia, indeksu dolnego i górnego, wyrównania, list punktowanych lub numerowanych, linków i emoji. Ustawienia zaznaczonego tekstu pozwalają też dostosować typografię i kolory bez zmieniania pozostałych elementów tekstowych.
Używaj globalnych ustawień typografii w sekcji „Page settings”, gdy wszystkie nagłówki, tekst główny, linki lub przyciski mają mieć spójny styl. Jeśli tylko jeden blok ma wyglądać inaczej, skorzystaj z ustawień zaznaczonego elementu.
Skonfiguruj formularz zapisu
Zaznacz blok formularza zapisu w obszarze roboczym, aby otworzyć jego ustawienia. Dostępne sekcje obejmują pasek postępu, licznik subskrybentów, pola, ukryte tagi, kontener formularza, pola wprowadzania danych i przycisk wysyłania formularza.
Pola subskrybenta
Adres e-mail to główne pole formularza zapisu. Możesz też dodawać pola subskrybenta dostępne na koncie Maildroppa.
Dla każdego pola możesz zmienić etykietę i tekst zastępczy, określić, czy jest wymagane, oraz zdecydować, czy jego etykieta ma być widoczna. Kolejność pól zmienisz, przeciągając je lub używając opcji przenoszenia.
Pytaj tylko o informacje, których rzeczywiście potrzebujesz. Krótsze formularze wypełnia się szybciej. Dodatkowe pola przydają się wtedy, gdy zebrane dane posłużą do segmentacji lub personalizacji.
Ukryte tagi
Ukryte tagi nie są widoczne dla odwiedzających. Gdy ktoś zapisze się przez formularz, Maildroppa automatycznie przypisze wybrane tagi temu subskrybentowi.
Pomaga to rozpoznać źródło zapisu lub zainteresowania danej osoby. Na przykład formularz webinaru może przypisywać tag „Webinar”, a formularz lead magnetu — tag związany z tematyką pobranego materiału.
Pasek postępu
Pasek postępu możesz wyłączyć albo wyświetlać jako wskaźnik procentowy lub dwuetapowy.
W przypadku wskaźnika procentowego możesz zmienić tekst, kolory, rozmiar i grubość czcionki oraz wyrównanie. Dla wskaźnika dwuetapowego możesz edytować etykiety obu kroków oraz wybrać kolory stanu aktywnego i nieaktywnego.
Wskaźnik postępu pomaga wyjaśnić, że przesłanie formularza to pierwszy krok, a potwierdzenie zapisu za pomocą wiadomości e-mail w procesie double opt-in — drugi.
Licznik subskrybentów w formularzu
Formularz zapisu może wyświetlać bieżącą liczbę subskrybentów z potwierdzonym zapisem przed przyciskiem wysyłania formularza lub za nim.
Możesz dodać wartość przesunięcia, wpisać etykietę, wybrać położenie oraz dostosować typografię i wyrównanie. Wartość przesunięcia jest dodawana do wyświetlanej przez Maildroppa liczby subskrybentów z potwierdzonym zapisem.
Ten licznik różni się od samodzielnego bloku treści „Subscriber counter”. Użyj ustawienia formularza, gdy liczba ma być bezpośrednio powiązana z obszarem wysyłania formularza. Wybierz blok treści, gdy licznik ma się znaleźć w innym miejscu projektu.
Wygląd formularza, pól i przycisku
Ustawienia „Signup Form Block” określają wygląd kontenera wokół pól, w tym jego tło, obramowanie, promień zaokrąglenia narożników i odstępy.
Ustawienia pól określają ich tła, etykiety, tekst, teksty zastępcze, obramowania i odstępy. Przycisk wysyłania formularza ma osobne ustawienia tekstu, typografii, kolorów, obramowania, wymiarów i wyrównania.
Kliknij pasek postępu lub przycisk wysyłania formularza bezpośrednio w obszarze roboczym, aby od razu otworzyć ustawienia tego elementu.
Zmień ogólny wygląd
Otwórz „Page settings” w prawym panelu bocznym, aby zmienić ogólny wygląd projektu. W przypadku formularzy osadzanych, popupów i wysuwanych okien ustawienia te dotyczą obszaru formularza, a nie całej hostowanej strony.
Możesz ustawić główne tło, obraz tła, maksymalną szerokość i odstępy na urządzeniach mobilnych. Ustawienia wyglądu określają wartości domyślne dla:
- Czcionki tekstu głównego i jego koloru
- Koloru linków, podkreślenia i koloru po najechaniu kursorem
- Czcionki, koloru, grubości, rozmiaru i interlinii nagłówków
- Przycisków
- Kontenerów, obramowań, promieni zaokrąglenia narożników, odstępów i marginesów wewnętrznych
- Marginesów wewnętrznych strony na urządzeniach mobilnych i progu szerokości, przy którym kolumny układają się jedna pod drugą
Te wartości domyślne pomagają zachować spójność projektu. W razie potrzeby możesz je zastąpić ustawieniami poszczególnych bloków.
Połącz formularz z procesem zapisu
Każdy formularz jest połączony z procesem zapisu. Proces ten określa, co dzieje się po przesłaniu formularza:
- Co odwiedzający zobaczy bezpośrednio po przesłaniu formularza
- Która wiadomość e-mail z potwierdzeniem zapisu double opt-in zostanie wysłana
- Co stanie się po potwierdzeniu adresu e-mail przez subskrybenta
Otwórz ustawienia procesu zapisu w nagłówku kreatora, aby zobaczyć aktualnie przypisany proces. Możesz wybrać inny istniejący proces, edytować wybrany albo utworzyć nowy.
Z jednego procesu zapisu może korzystać kilka formularzy. Jeśli edytujesz wspólny proces, zmiana obejmie każdy formularz, który z niego korzysta. Dlatego Maildroppa pozwala zdecydować, czy chcesz edytować wspólny proces, czy utworzyć osobną kopię dla bieżącego formularza.
Sprawdź podgląd i zapisz projekt
Kliknij „Preview”, aby sprawdzić cały projekt i przebieg zapisu przed udostępnieniem formularza publicznie. Podgląd pozwala ocenić długie teksty, proporcje obrazów, kolejność pól, etykiety przycisków i wizualną równowagę formularza.
W przypadku formularzy osadzanych, popupów i wysuwanych okien kliknij „Save changes”, aby zapisać bieżącą wersję.
Strony docelowe korzystają z opcji wersji roboczej i publikacji na górnym pasku. Możesz je zapisać bez publikowania. Zmiany na już opublikowanej stronie również pozostają nieopublikowane, dopóki ich nie opublikujesz. Cały przebieg pracy opisuje przewodnik Tworzenie i publikowanie strony docelowej.
Po zapisaniu wróć do przeglądu formularzy zapisu, aby aktywować i osadzić formularz w witrynie albo zarządzać opublikowaną stroną docelową.
Przejdź do przewodnika dla wybranego typu formularza
To już wszystkie kroki projektowania wspólne dla każdego typu formularza. Kontynuuj pracę z przewodnikiem dotyczącym formularza, który tworzysz:
Chcesz wysyłać lepsze e-maile?
Zrezygnuj z narzędzi przeładowanych funkcjami i zbyt drogich planów. Maildroppa oferuje indywidualne wsparcie, ustawienia uwzględniające prywatność i rozbudowane możliwości e-mail marketingu. Zacznij od planu bezpłatnego bezterminowo.
Bez karty kredytowej. Bez limitu czasu.