Menu

Rozdziały

Spis treści

Narzędzie do wysyłki e-maili, dzięki któremu e-mail marketing jest prosty

Zarejestruj się bezpłatnieKarta kredytowa nie jest wymagana.

Kreator formularzy zapisu: projektuj formularze

Opublikowano: · Ostatnia aktualizacja: · Autor:

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.

Kreator formularzy zapisu: pełny widok edytora

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.

Kreator formularzy zapisu: wybór szablonu startowego

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.

Kreator formularzy zapisu: panel treści

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.

Zarejestruj się bezpłatnie

Bez karty kredytowej. Bez limitu czasu.