Zrozumienie stylów formularza rejestracyjnego

Czego się dowiesz?

Dowiedz się, jak używać kreatora formularzy rejestracyjnych Klaviyo, aby zaprojektować formularz, edytując ustawienia projektu dostępne w sekcji Style. Ustawienia stylu mają zastosowanie w całym formularzu rejestracyjnym, w tym we wszystkich krokach formularza i w jego komunikacie o powodzeniu.

Zadbaj o prosty projekt formularza rejestracyjnego. Powinien być czytelny, przejrzysty i mieć 1 główny cel. Dodatkowo warto zadbać o to, aby łatwo się go czytało i aby był intuicyjny.

Kilka słów na początek

Zanim zaczniesz stylizować formularz rejestracyjny, przejdź do karty Formularze rejestracyjne > Utwórz formularz rejestracyjny. Możesz dostosować gotowy szablon z biblioteki formularzy lub utworzyć zupełnie nowy szablon formularza rejestracyjnego. Dodaj dowolne bloki treści i pola wprowadzania, które chcesz uwzględnić, zanim zaczniesz stylizować.

Jeśli tworzysz formularz rejestracyjny tylko na urządzenia mobilne, zobacz podstawy: projektowanie formularzy mobilnych.

Typy formularzy

Na górze sekcji Style możesz wybrać typ formularza: wyskakujące okienko, pełna strona, rozwijane poziomo lub osadzone:

• Pop-upy pojawiają się na środku okna przeglądarki. Pop-up przyciąga uwagę i najlepiej sprawdza się przy ważnych ofertach lub kluczowych komunikatach. Pop-upy mają najwyższy wskaźnik konwersji spośród wszystkich typów formularzy.
• Wysuwane okna wsuwają się do okna przeglądarki z dowolnego wybranego kierunku. Podobnie jak wyskakujące okienka można ich używać, aby skłonić kogoś do wykonania działania lub przekierować go, ale ponieważ to mniej inwazyjna opcja, można jej używać do pasywnego zbierania informacji o osobach przeglądających witrynę.
• Formularze osadzone pojawiają się w miejscu, w którym wkleisz na swojej stronie podany wycinek kodu źródłowego. Formularze osadzone to najmniej inwazyjne formularze rejestracyjne i zwykle są używane w stopce strony do zbierania adresów e-mail.
• Formularze pełnoekranowe wyświetlają się w całym oknie przeglądarki, w pełni skupiając uwagę kupujących. Takie formularze zapewniają wysoką konwersję, ponieważ niełatwo jest je przeoczyć. Są przez to jednak bardziej inwazyjne, ponieważ, aby zamknąć formularz, osoby dokonujące zakupów muszą wejść z nim w interakcję.
  • Rozważ użycie formularza pełnoekranowego jako strony docelowej, aby powiększać listę subskrybentów.
• Banery wyświetlają się jako pasek u góry lub u dołu strony internetowej. Są mniej inwazyjne niż pop-upy lub formularze pełnoekranowe, zapewniają ciągłą widoczność i przyjazny dla urządzeń mobilnych design, który płynnie integruje się z Twoją stroną internetową. Baner może przewijać się razem ze stroną lub pozostać przypięty, możesz dodać bloki treści lub pola wejściowe bezpośrednio do baneru albo skonfigurować baner tak, aby kliknięcie powodowało otwarcie innego formularza z Twojego konta.
  • Aby po kliknięciu banera przez kupującego wyświetlił się inny formularz, kliknij przycisk w podglądzie i ustaw Akcja na Otwórz inny formularz, a następnie wybierz opublikowany formularz, który ma się wyświetlać. Pamiętaj, że nie jest to możliwe w przypadku formularzy osadzonych.

Obrazy tła i obrazy boczne

Aby dodać niestandardową grafikę do formularza rejestracyjnego, użyj obrazu bocznego lub obrazu tła. Obrazy boczne pojawiają się po lewej lub prawej stronie treści formularza, a obrazy tła są wyświetlane za polami formularza.

Podczas używania obrazu w formularzu należy pamiętać o kilku kwestiach:

• Dostępnych jest wiele typów formatów obrazów do wyboru. Pliki JPEG zapewniają dobrą równowagę jakości i rozmiaru w przypadku kolorowych obrazów, a pliki PNG pozwalają zachować ostrość obrazów z przezroczystością lub logo.
  • Dąż do rozmiaru pliku 50–100 KB w przypadku obrazów bocznych i poniżej 200 KB w przypadku obrazów tła, aby zapewnić wysoką jakość grafiki bez spowalniania czasu ładowania witryny.
• Jak w przypadku wszystkich obrazów wyświetlanych w internecie, większy rozmiar pliku powoduje wolniejsze ładowanie.
  • Pamiętaj, że obraz o pełnej szerokości w rozdzielczości 72 dpi często będzie większy niż 1 MB, a zmniejszenie rozmiaru obrazu może obniżyć jego jakość. Wybierając obrazy, rozważ kompromis między jakością obrazu a czasem ładowania.
• Aby uzyskać najlepsze rezultaty, pamiętaj o użyciu obrazu o odpowiednio wysokiej jakości.
  • W internecie najlepszą praktyką jest stosowanie rozdzielczości 72 dpi. Aby zachować równowagę między jakością obrazu a szybkością ładowania, staraj się, aby obrazy miały szerokość od 600 do 1000 px oraz wysokość mniejszą niż 2000 px w przypadku obrazów o pełnej szerokości. Obrazy, które nie mają pełnej szerokości wiadomości e-mail, mogą mieć mniej niż 600 px.
    • Pamiętaj, że jeśli używasz pełnoekranowego formularza rejestracyjnego, potrzebujesz większego obrazu w wysokiej rozdzielczości (np. o minimalnej szerokości 1980 px), aby dopasować go do większego formularza. Pamiętaj jednak, że może to nadal wpływać na czas ładowania.
• Dodaj tekst alternatywny do obrazu, aby wspierać dostępność dla wszystkich użytkowników korzystających z formularzy.

Ponieważ formularze rejestracyjne są renderowane w przeglądarkach (w przeciwieństwie do e-maili, które są renderowane przez ESP), jest mniej zaleceń dotyczących ich formatowania i dostosowywania. Przeglądarki mogą renderować obrazy wszystkich typów i rozmiarów, więc ogólnie trzymaj się obrazów w wysokiej rozdzielczości, rozsądnych rozmiarów plików i testuj wygląd na każdym typie urządzenia.

Dodaj obraz z boku

Aby dodać obraz z boku:

1. Przejdź do sekcji Style i przewiń do ustawień Obraz z boku.
2. Wybierz Obraz po lewej stronie lub Obraz po prawej stronie, w zależności od tego, gdzie obraz ma się pojawić.
   
3. Wybierz obraz. Domyślnie formularze z obrazami bocznymi są ustawione na szerokość 780 px i rozmiar średni; można to jednak dostosować w sekcji Obraz boczny na karcie Style, w zależności od rozmiaru formularza lub jeśli obraz ma być mniejszy albo większy.

Pamiętaj, że obrazy boczne są ustawiane na poziomie kroku, więc możesz ustawić osobne obrazy dla każdego kroku formularza rejestracyjnego. Więcej informacji o opcjach wyświetlania obrazów bocznych znajdziesz w naszym artykule jak dodać obrazy boczne w formularzach rejestracyjnych.

Dodaj obraz tła

Aby dodać obraz tła:

1. Włącz ustawienie Obraz tła w sekcji Tło formularza.
2. Prześlij obraz za pomocą przycisku Przeglądaj.
3. Dostosuj ustawienia wyświetlania do swoich preferencji.

Jeśli dodasz obraz z boku lub w tle do formularza, wyświetl podgląd wszystkich kroków formularza, w tym komunikatu o powodzeniu, wybierając każdy krok na górnym pasku menu. Domyślnie wysokość formularza dostosowuje się do treści i pól formularza w każdym kroku, więc niektóre kroki mogą być wyższe lub niższe niż inne. Gdy formularz zawiera obraz, część zawartości obrazu może zostać przycięta w krokach o mniejszych rozmiarach. Aby tego uniknąć, ustaw minimalną wysokość w obszarze Typ formularza w sekcji Style.

Opcje koloru i odstępów

Użyj ustawień Style formularza i Style pola wejściowego, aby ustawić kolory, kolory obramowania, dopełnienie i marginesy. Te ustawienia będą obowiązywać we wszystkich krokach formularza, chyba że zastosujesz sprzeczne ustawienia (np. dla tekstu lub kolorów) w ustawieniach stylu konkretnego bloku treści.

Czcionki i style tekstu

Edytuj tekst (np. czcionkę, rozmiar, kolor itp.) dla bloków treści (np. pola adresu e-mail lub numeru telefonu) w sekcji Style tekstu pola wejściowego.

Edytuj tekst dla konkretnego bloku treści, klikając blok w podglądzie formularza i używając menu opcji Tekst, które się pojawi. W edytorze formularzy Klaviyo wykorzystuje się standard kodowania UTF-8, co oznacza, że obsługiwane są znaki łacińskie, emotikony, znaki dwubajtowe i wiele innych.

Formularz rejestracyjny może używać bezpiecznych czcionek internetowych dostępnych natywnie w edytorach Klaviyo, jednej z naszych niestandardowych czcionek hostowanych przez Klaviyo lub możesz dodać własne niestandardowe czcionki. Dowiedz się, jak używać niestandardowych czcionek w formularzach rejestracyjnych.

Ikony zamykania

Możesz dostosować rozmiar, kolor i styl ikony zamykania formularza (X w prawym górnym rogu). Kliknij ikonę X w edytorze formularza, a następnie dostosuj ustawienia w edytorze po lewej stronie. Dowiedz się więcej o stylizowaniu ikony zamykania formularza.

Jeśli wybrano formularz pełnoekranowy, jedynym sposobem, aby klienci mogli zamknąć formularz, jest kliknięcie ikony zamknięcia. Pomaga to przyciągnąć uwagę, ale upewnij się, że ikona zamknięcia jest wyraźna i widoczna, aby klienci nie frustrowali się przerwaniem przez formularz pełnoekranowy.

Niestandardowy HTML i CSS

Edytor formularzy rejestracyjnych Klaviyo nie obsługuje obecnie niestandardowej treści HTML ani CSS. Aby znaleźć wskazówki i inspiracje dotyczące dostosowywania formularza za pomocą edytora Klaviyo, przejdź do forum Społeczności.

Rezultat

Masz już wiedzę, jak dostosować różne ustawienia stylu w edytorze formularzy, aby zaprojektować swój formularz rejestracyjny.

Kolejne kroki

Gdy już wystylizujesz formularz rejestracyjny, dowiedz się, jak skonfigurować zachowania formularza, w tym to, którzy odwiedzający mają widzieć formularz i kiedy ma się pojawiać. Przejdź do artykułu jak wybrać ustawienia targetowania formularzy i zachowań.

Po opublikowaniu formularza rejestracyjnego dostosuj e-mail z potwierdzeniem zgody opt-in, jeśli dla Twojej listy jest włączona podwójna zgoda opt-in. Następnie utwórz sekwencję powitalną, aby dostarczyć ofertę z formularza (np. rabat lub darmową wysyłkę przy pierwszym zamówieniu) i przedstawić nowych subskrybentów Twojej marce.