Chapters
- Kreator formularzy zapisu: projektowanie formularzy
- Twórz i publikuj strony docelowe
- Tworzenie i osadzanie formularzy zapisu
- Tworzenie i wyświetlanie formularzy popup
- Tworzenie i pozycjonowanie formularzy Slide-in
Contents
the email tool that makes email marketing simple
- Guides and Tutorials
- Kreator formularzy zapisu: projektowanie formularzy
Kreator formularzy zapisu: projektowanie formularzy
Published: · Last updated: · By Marcus Biel
In brief
Dowiedz się, jak w kreatorze formularzy Maildroppa wybierać szablony, układać treści, stylizować pola, przypisywać tagi i łączyć ścieżki zapisu.
Kreator formularzy zapisu to edytor wizualny wszystkich formularzy zapisu i stron docelowych w Maildroppa.
Możesz używać go do układania elementów, dodawania tekstu i obrazów, konfigurowania pól subskrybenta, zmiany kolorów i czcionek, przypisywania tagów oraz określania, co dzieje się po przesłaniu formularza. Podczas pracy kanwa pokazuje rezultat, więc nie musisz pisać kodu, aby zaprojektować kompletny proces zapisu.
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 są umieszczane bezpośrednio na stronie Twojej witryny.
- Popupy pojawiają się nad Twoją witryną i mogą być również otwierane z poziomu 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. Powiązane przewodniki opisują wyłącznie ustawienia i kroki charakterystyczne dla poszczególnych typów.
Otwieranie kreatora formularzy zapisu
Otwórz „Signup Forms” w Maildroppa. Następnie możesz kliknąć „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 jasną nazwę wewnętrzną. Nazwy takie jak „Newsletter na stronie głównej”, „Popup webinaru” czy „Letni lead magnet” są później łatwiejsze do rozpoznania niż ogólne nazwy, takie jak „Formularz 1”. Nazwa formularza pomaga zarządzać nim w Maildroppa i nie jest automatycznie wyświetlana odwiedzającym.
Poznawanie kreatora
Kreator jest podzielony na cztery główne obszary.
Górny pasek zawiera nazwę formularza i główne działania. Możesz z niego wrócić do przeglądu, wyświetlić podgląd projektu i zapisać go. Strony docelowe pokazują na tym pasku również elementy sterujące wersją roboczą i publikacją.
Lewy panel boczny zawiera sekcje „Layout”, „Content” i „Layers”. Używaj go do tworzenia struktury, dodawania nowych elementów i zarządzania wszystkim, co zostało już umieszczone na kanwie.
Kanwa to centralny obszar roboczy. Pokazuje bieżącą stronę lub formularz. Kliknij element, aby go zaznaczyć. Możesz także przeciągać elementy w inne miejsce lub dodawać nowe z lewego panelu bocznego.
Prawy panel boczny zawiera sekcje „Settings” i „Page settings”. „Settings” zmienia ustawienia zaznaczonego elementu. „Page settings” zmienia ogólne tło i domyślne ustawienia projektu.
Na mniejszych ekranach panele boczne otwierają się jako panele za pomocą przycisków „Content” i „Settings”. Dostępne funkcje pozostają takie same.
Rozpoczynanie od szablonu
Podczas tworzenia formularza kreator oferuje projekty startowe dopasowane do wybranego typu formularza. Możesz rozpocząć 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ą tego, co możesz później zmienić. Po wybraniu szablonu każdy element nadal można edytować, przenosić, duplikować, zmieniać jego styl lub usuwać.
Każdy typ formularza ma szablony dopasowane do swojego przeznaczenia. Na przykład strony docelowe zawierają kompletne projekty stron Newsletter, Lead Magnet, Webinar i Waitlist. Formularze osadzane, popupy i wysuwane okna mają własne kompaktowe projekty startowe.
Jeśli nie masz pewności, który szablon wybrać, wybierz ten, którego struktura jest najbardziej zbliżona do Twojego celu. Zmiana tekstu, kolorów i obrazów jest zwykle szybsza niż budowanie tej samej struktury na pustej kanwie.
Tworzenie układu
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 na kanwę. Następnie możesz umieszczać treści w każdej komórce.
Zaznacz pole lub kolumnę, aby dostosować jej rozmiar, odstępy, wyrównanie, tło, obramowanie i wewnętrzne marginesy w prawym panelu bocznym. W układach wielokolumnowych możesz także zmieniać względne szerokości kolumn.
Używaj układów do tworzenia przejrzystej kolejności czytania. Jedna kolumna dobrze sprawdza się w kompaktowych formularzach zapisu. Układ dwukolumnowy jest przydatny, gdy obraz, lista korzyści lub informacje o wydarzeniu powinny znajdować się obok formularza zapisu.
Dodawanie treści
Otwórz „Content” w lewym panelu bocznym, aby dodawać pojedyncze bloki treści. Możesz kliknąć blok, aby go wstawić, albo przeciągnąć go w wybrane miejsce na kanwie.
Kreator udostępnia następujące bloki treści:
Signup form — Zawiera pola subskrybenta i przycisk przesyłania. Projekt musi zawierać jeden blok formularza zapisu, aby można było zapisać go jako działający formularz. Gdy blok jest już obecny, nie jest oferowany jako dodatkowy blok treści.
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 kontrolować wymiary, proporcje, przycinanie, punkt centralny, obrót i odbicie.
Video — Dodaje film z YouTube lub Vimeo, adres URL osadzenia albo bezpośredni plik wideo. Możesz także skonfigurować obraz podglądu i wygląd przycisku odtwarzania.
List — Dodaje listę punktowaną lub numerowaną. Edytuj elementy i kontroluj kolor znaczników, odstępy, typografię oraz wyrównanie.
Button — Dodaje przycisk linku z możliwością konfiguracji tekstu, adresu URL, rozmiaru, szerokości, kolorów, obramowania, typografii i wyrównania.
Social links — Dodaje ikony z linkami do usług takich jak Facebook, Instagram, LinkedIn, TikTok, YouTube lub Twoja witryna.
Subscriber counter — Pokazuje bieżącą liczbę potwierdzonych subskrybentów. Możesz dodać przesunięcie, zmienić etykietę oraz nadać styl liczbie i tekstowi.
Spacer — Dodaje kontrolowaną pustą przestrzeń. Odstępy na komputerach i urządzeniach mobilnych można ustawić osobno.
Divider — Dodaje poziomą linię z możliwością konfiguracji koloru, grubości, szerokości, stylu, wyrównania i odstępów.
Strony docelowe udostępniają również kompletne sekcje wielokrotnego użytku. Wyjaśniono je w przewodniku po stronach docelowych.
Zaznaczanie i rozmieszczanie elementów
Kliknij element na kanwie, aby go zaznaczyć. Jego ustawienia pojawią się w prawym panelu bocznym.
Elementy sterujące na zaznaczonym elemencie lub w jego pobliżu pozwalają przenosić, duplikować lub usuwać element. Możesz także przeciągnąć element do innej komórki lub w inne miejsce. Wskaźnik położenia pokazuje, gdzie element zostanie wstawiony.
Otwórz „Layers”, gdy strona zawiera wiele zagnieżdżonych pól, kolumn i bloków treści. Panel Layers pokazuje pełną strukturę w formie listy. Możesz z niego:
- Zaznaczyć element
- Zmienić jego nazwę, aby łatwiej go rozpoznawać
- Przenieść go wyżej lub niżej
- Przeciągnąć go w inne miejsce
- Zablokować lub odblokować go
- Zduplikować go
- Usunąć go
Blokowanie jest przydatne, gdy gotowe tło, obraz lub sekcja nie powinny zostać przypadkowo przeniesione. Odblokuj warstwę, gdy chcesz ponownie ją edytować lub zmienić jej położenie.
Używaj poleceń „Undo” i „Redo” na pasku narzędzi kreatora, aby cofać lub ponawiać ostatnie zmiany projektu.
Edycja tekstu
Kliknij wewnątrz elementu tekstowego, aby edytować treść bezpośrednio na kanwie. 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 używać pogrubienia, kursywy, podkreślenia, przekreślenia, indeksu dolnego, indeksu górnego, wyrównania, list punktowanych lub numerowanych, linków i emoji. Ustawienia zaznaczonego tekstu pozwalają również dostosować typografię i kolory bez zmieniania wszystkich pozostałych elementów tekstowych.
Używaj globalnych ustawień typografii w sekcji „Page settings”, gdy wszystkie nagłówki, tekst główny, linki lub przyciski powinny mieć spójny styl. Używaj ustawień zaznaczonego elementu, gdy tylko jeden blok powinien wyglądać inaczej.
Konfigurowanie formularza zapisu
Zaznacz blok formularza zapisu na kanwie, aby otworzyć jego ustawienia. Dostępne sekcje obejmują pasek postępu, licznik subskrybentów, pola, ukryte tagi, kontener formularza, pola wejściowe i przycisk przesyłania.
Pola subskrybenta
Adres e-mail jest głównym polem formularza zapisu. Możesz także dodawać pola subskrybenta dostępne na Twoim koncie Maildroppa.
Dla każdego pola możesz zmienić etykietę i tekst zastępczy, określić, czy jest wymagane, oraz wybrać, czy etykieta pola ma być wyświetlana. Kolejność pól można zmieniać, przeciągając je lub używając elementów sterujących przenoszeniem.
Pytaj tylko o informacje, których rzeczywiście potrzebujesz. Krótsze formularze można szybciej wypełnić, natomiast dodatkowe pola są przydatne, gdy informacje będą wykorzystywane do segmentacji lub personalizacji.
Ukryte tagi
Ukryte tagi nie są wyświetlane odwiedzającym. Gdy ktoś zapisze się za pomocą formularza, Maildroppa automatycznie przypisze wybrane tagi temu subskrybentowi.
Jest to przydatne do identyfikowania źródła zapisu lub zainteresowania, które za nim stoi. Na przykład formularz webinaru może przypisywać tag „Webinar”, a formularz lead magnetu — tag dotyczący pobranego tematu.
Pasek postępu
Pasek postępu można wyłączyć albo wyświetlać jako wartość procentową lub wskaźnik dwuetapowy.
W przypadku wskaźnika procentowego możesz zmienić tekst, kolory, rozmiar i grubość czcionki oraz wyrównanie. W przypadku wskaźnika dwuetapowego możesz edytować etykiety obu kroków oraz wybrać kolory aktywnego i nieaktywnego stanu.
Wskaźnik postępu może pomóc wyjaśnić, że przesłanie formularza jest pierwszym krokiem, a potwierdzenie wiadomości Double Opt-in — drugim.
Licznik subskrybentów w formularzu
Formularz zapisu może wyświetlać bieżącą liczbę potwierdzonych subskrybentów przed przyciskiem przesyłania lub za nim.
Możesz dodać przesunięcie, wpisać etykietę, wybrać położenie oraz dostosować typografię i wyrównanie. Przesunięcie jest dodawane do liczby potwierdzonych subskrybentów wyświetlanej przez Maildroppa.
Ten licznik formularza różni się od samodzielnego bloku treści „Subscriber counter”. Użyj ustawienia formularza, gdy liczba powinna być bezpośrednio powiązana z obszarem przesyłania. Użyj bloku treści, gdy licznik powinien pojawić się w innym miejscu projektu.
Projekt formularza, pól i przycisku
Ustawienia „Signup Form Block” kontrolują kontener wokół pól, w tym jego tło, obramowanie, promień zaokrąglenia narożników i odstępy.
Ustawienia pól kontrolują tła pól, etykiety, tekst, teksty zastępcze, obramowania i odstępy. Przycisk przesyłania ma osobne ustawienia tekstu, typografii, kolorów, obramowania, wymiarów i wyrównania.
Możesz kliknąć pasek postępu lub przycisk przesyłania bezpośrednio na kanwie, aby natychmiast otworzyć ustawienia tej części.
Zmiana ogólnego wyglądu
Otwórz „Page settings” w prawym panelu bocznym, aby zmienić ogólny projekt. W przypadku formularzy osadzanych, popupów i wysuwanych okien ustawienia te dotyczą kanwy formularza, a nie kompletnej hostowanej strony.
Możesz skonfigurować główne tło, obraz tła, maksymalną szerokość i odstępy na urządzeniach mobilnych. Ustawienia wyglądu definiują wartości domyślne dla:
- Czcionki głównej i koloru tekstu
- Koloru linków, podkreślenia i koloru po najechaniu
- Czcionki nagłówków, koloru, grubości, rozmiaru i wysokości wiersza
- Przycisków
- Pól, obramowań, promieni zaokrąglenia narożników, odstępów i wewnętrznych marginesów
- Wewnętrznych marginesów strony mobilnej i punktu, w którym kolumny układają się jedna pod drugą
Te wartości domyślne pomagają zachować spójność projektu. W razie potrzeby poszczególne bloki nadal mogą je zastępować własnymi ustawieniami.
Łączenie procesu zapisu
Każdy formularz jest połączony z procesem zapisu. Proces zapisu kontroluje ścieżkę subskrybenta po przesłaniu formularza:
- Co odwiedzający zobaczy natychmiast po przesłaniu formularza
- Która wiadomość 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 proces albo utworzyć nowy.
Jeden proces zapisu może być używany przez kilka formularzy. Jeśli edytujesz współdzielony proces, zmiana wpłynie na każdy formularz, który go używa. Dlatego Maildroppa pozwala wybrać, czy chcesz edytować współdzielony proces, czy utworzyć osobną kopię dla bieżącego formularza.
Wyświetlanie podglądu i zapisywanie
Kliknij „Preview”, aby sprawdzić kompletny projekt i proces zapisu przed jego publicznym udostępnieniem. Podgląd jest przydatny do sprawdzenia długich tekstów, proporcji obrazów, kolejności pól, etykiet przycisków i ogólnego wyważenia formularza.
W przypadku formularzy osadzanych, popupów i wysuwanych okien kliknij „Save changes”, gdy chcesz zapisać bieżącą wersję.
Strony docelowe używają elementów sterujących wersją roboczą i publikacją na górnym pasku. Można je zapisać bez publikowania, a zmiany na już opublikowanej stronie pozostają nieopublikowane do czasu ich opublikowania. Kompletny proces opisano w sekcji Tworzenie i publikowanie strony docelowej.
Po zapisaniu wróć do przeglądu formularzy zapisu, aby aktywować formularz witryny i osadzić go na stronie albo zarządzać opublikowaną stroną docelową.
Przejdź do przewodnika dotyczącego Twojego typu formularza
Wspólna praca nad projektem jest już zakończona. Przejdź do przewodnika dotyczącego tworzonego formularza:
Ready to Send Better Emails?
Stop juggling bloated tools or overpriced plans. Maildroppa offers personal support, GDPR-level privacy, and powerful email marketing - starting free forever.
No credit card required. No time limit.