Zrozumienie stylów dla formularza rejestracyjnego

Czego się dowiesz

Dowiedz się, jak korzystać z kreatora rejestracji formularzy Klaviyo, aby zaprojektować swój formularz, edytując ustawienia projektu dostępne w sekcji Style. Ustawienia stylu mają zastosowanie w całym Twoim formularzu rejestracyjnym, w tym we wszystkich krokach formularza i w jego komunikacie o powodzeniu. 

Zachowaj prosty wygląd swojego formularza rejestracyjnego. Powinien być przejrzysty, uporządkowany i mieć jeden główny cel. Dodatkowo, będziesz chciał, aby był on łatwy do czytania i śledzenia. 

Zanim zaczniesz

Przed stylizacją formularza rejestracyjnego przejdź do zakładki formularza rejestracyjnego > Utwórz formularz rejestracyjny .Możesz dostosować wbudowany, wstępnie zbudowany szablon z biblioteki formularzy lub utworzyć zupełnie nowy formularz rejestracyjny szablon. Dodaj dowolną zawartość i blok wejściowy, które chcesz uwzględnić przed stylizacją. 

Jeśli tworzysz formularz rejestracyjny przeznaczony wyłącznie dla urządzeń mobilnych, zobacz podstawy: projektowanie formularzy mobilnych.

Typy formularzy

W górnej części sekcji Style możesz wybrać typ formularza: popup, full page, menu rozwijane poziomo lub embed:

• Wyskakujące okienka pojawiają się na środku okna przeglądarki. Wyskakujące okienka przyciągają uwagę i najlepiej sprawdzają się w przypadku ważnych ofert lub krytycznych wiadomości. Wyskakujące okienka mają najwyższy wskaźnik konwersji spośród wszystkich typów formularzy. 
• Flyouty wsuwają się do okna przeglądarki z dowolnego kierunku, który wybierzesz. Te, podobnie jak wyskakujące okienka, mogą być używane do nakłonienia kogoś do wykonania czegoś lub przekierowania go, ale ponieważ jest to mniej inwazyjna opcja, możesz jej użyć do zbierania informacji o przeglądarkach w pasywny sposób.
• Osadzone formularze pojawiają się tam, gdzie wkleisz dostarczony wycinek kodu źródłowego na swojej stronie. Osadzone formularze są najmniej inwazyjnymi formularzami rejestracyjnymi i są zwykle używane w stopce witryny do zbierania adresów e-mail. 
• Pełnostronicowe formularze wyświetlają się w całym oknie przeglądarki, przyciągając pełną uwagę Twoich klientów. Są to formularze o wysokiej konwersji, ponieważ nie można ich łatwo przeoczyć, jednak czyni je to również bardziej inwazyjnymi, ponieważ kupujący muszą wejść w interakcję z formularzem, aby go zamknąć.
  • Rozważ użycie formularza na całej stronie jako strony docelowej, aby rozwinąć swoją listę subskrybentów. 
• Banery są wyświetlane jako pasek u góry lub u dołu strony internetowej. Są one mniej inwazyjne niż wyskakujące okienka lub formularze na całej stronie, oferując ciągłą widoczność i przyjazny dla urządzeń mobilnych projekt, który płynnie integruje się z Twoją witryną. Możesz ustawić baner tak, aby przewijał się wraz ze stroną lub pozostawał nieruchomy, dodać blok treści lub pole wejściowe bezpośrednio do banera lub skonfigurować baner tak, aby po kliknięciu na niego otwierał się inny formularz z Twojego konta. 
  • Aby uruchomić inny formularz, który pojawi się, gdy kupujący kliknie baner, kliknij przycisk w podglądzie i ustaw opcję Akcja na Otwórz inny formularz, a następnie wybierz formularz na żywo, który chcesz wyświetlić. Zauważ, że nie jest to możliwe w przypadku formularzy osadzonych.

Obrazy tła i obrazy boczne 

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

Używając obrazu w formularzu, musisz pamiętać o kilku rzeczach:

• Istnieje wiele rodzajów formatów obrazów do wyboru. Pliki JPEG dobrze równoważą jakość i rozmiar w przypadku kolorowych obrazów, podczas gdy pliki PNG pozwalają zachować ostry wygląd przezroczystych obrazów lub logo. 
  • Dąż do rozmiaru pliku 50-100 KB dla obrazów bocznych i mniej niż 200 KB dla obrazów tła, aby zapewnić wysoką jakość obrazów bez spowalniania czasu ładowania witryny.
• Podobnie jak w przypadku wszystkich obrazów wyświetlanych w Internecie, większe rozmiary plików prowadzą do wolniejszego czasu ładowania.
  • Zwróć uwagę, że obraz o pełnej szerokości w rozdzielczości 72 dpi będzie często większy niż 1 MB, a zmniejszenie rozmiaru obrazu może obniżyć jego jakość. Wybierając obrazy, weź pod uwagę kompromis między jakością obrazu a czasem ładowania.
• Upewnij się, że używasz obrazu o odpowiedniej jakości, aby uzyskać najlepsze wyniki. 
  
  • W sieci najlepszą praktyką jest stosowanie rozdzielczości 72 dpi. Aby zrównoważyć jakość obrazu i szybkość ładowania, staraj się utrzymywać obrazy o szerokości od 600 do 1000 pikseli i wysokości mniejszej niż 2000 pikseli w przypadku obrazów o pełnej szerokości. Obrazy o szerokości mniejszej niż pełna szerokość wiadomości e-mail mogą być mniejsze niż 600 pikseli.
    
    • Pamiętaj, że jeśli korzystasz z pełnostronicowego formularza rejestracyjnego, będziesz potrzebować większego obrazu o wysokiej rozdzielczości (np. o minimalnej szerokości 1980 pikseli), aby zmieścić formularz o większym rozmiarze. Pamiętaj jednak, że może to mieć wpływ na czas ładowania.
• Dodaj tekst alternatywny do obrazu, aby promować dostępność dla wszystkich użytkowników korzystających z formularzy. 

Ponieważ formularze rejestracyjne są renderowane w przeglądarkach (w przeciwieństwie do wiadomości e-mail, które są renderowane przez dostawców usług e-mailowych (ESP)), istnieje mniej zaleceń dotyczących ich formatowania i dostosowywania. Przeglądarki mogą renderować obrazy wszystkich typów i rozmiarów, więc generalnie trzymaj się obrazów o wysokiej rozdzielczości, zarządzalnych rozmiarów plików i testuj wygląd na każdym typie urządzenia. 

Dodaj obraz boczny

Aby dodać obraz boczny:

1. Przejdź do sekcji Style i przewiń do ustawień Obraz boczny.
2. Wybierz Lewy obraz lub Prawy obraz, w zależności od tego, gdzie ma być wyświetlany obraz.
   
3. Wybierz obraz. Domyślnie formularze z obrazami bocznymi mają szerokość 780 pikseli i średni rozmiar; można to jednak dostosować w sekcji Obraz boczny na karcie Style w zależności od rozmiaru formularza lub jeśli chcesz, aby obraz był mniejszy lub większy.

Pamiętaj, że obrazy boczne są ustawiane na poziomie kroku, więc możesz ustawić osobne obrazy dla każdego kroku formularza. Aby uzyskać więcej informacji na temat opcji wyświetlania obrazów bocznych, zapoznaj się z naszym artykułem na temat dodawania obrazów bocznych w formularzu rejestracyjnym. 

Dodaj obraz tła

Aby dodać obraz tła:

1. przełączenie na ustawienie Obraz tła w sekcji Tło formularza.
2. Prześlij obraz za pomocą przycisku Przeglądaj.
3. Dostosuj ustawienia wyświetlacza do swoich upodobań.
   

Jeśli dodasz obraz boczny lub obraz tła 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ść Twojego formularza dostosowuje się na podstawie zawartości i pól formularza na każdym kroku, więc niektóre kroki mogą być wyższe lub krótsze od innych. Jeśli Twój formularz zawiera obraz, niektóre treści graficzne mogą zostać obcięte w mniejszych krokach. Aby tego uniknąć, ustaw minimalną wysokość w sekcji Typ formularza w sekcji Style. 

Opcje kolorów i odstępów

Użyj ustawień Form Styles i pole wejściowe Styles, aby ustawić kolory, kolory obramowania, wypełnienia i marginesy. Ustawienia te będą miały zastosowanie do wszystkich kroków formularza, chyba że zastosujesz sprzeczne ustawienia (np. dla tekstu lub kolorów) w ustawieniach stylu określonego bloku zawartości.

Czcionki i style tekstu

Edytuj tekst (np. czcionkę, rozmiar, kolor itp.) dla swojego bloku treści (np. pola adresu e-mail lub numeru telefonu) w polu wejściowym Style tekstu.

Edytuj tekst dla określonego bloku zawartości, klikając blok w podglądzie formularza i korzystając z wyświetlonego menu opcji tekstowych. KlaviyoEdytor formularzy wykorzystuje standard kodowania UTF-8, co oznacza, że obsługuje znaki alfabetu łacińskiego, emotikony, znaki dwubajtowe i nie tylko.

Twój formularz rejestracyjny może korzystać z bezpiecznych czcionek natywnych dla edytorów 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 formularzu rejestracyjnym. 

Zamknij ikony

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

Jeśli zdecydowałeś się na użycie formularza na całej stronie, jedynym sposobem, w jaki Twoi klienci mogą odrzucić formularz, jest kliknięcie ikony zamknięcia. Jest to pomocne w zbieraniu ich uwagi; ale upewnij się, że ikona zamknięcia jest wyraźna i widoczna, aby kupujący nie byli sfrustrowani przerwaniem formularza na całej stronie.

Niestandardowy kod HTML i CSS

KlaviyoEdytor rejestracyjny formularzy nie obsługuje obecnie niestandardowej zawartości HTML ani CSS. Aby uzyskać wskazówki i inspiracje dotyczące dostosowywania formularza za pomocą edytora Klaviyo, odwiedź forum społeczności. 

Rezultat

Dowiedziałeś się już, jak dostosować różne ustawienia stylu w edytorze formularzy, aby zaprojektować swój formularz rejestracyjny.

Kolejne kroki

Po wystylizowaniu formularza rejestracyjnego dowiedz się, jak skonfigurować zachowanie formularza, w tym, którzy odwiedzający powinni zobaczyć formularz i kiedy powinien się pojawić. Zapoznaj się z naszym artykułem na temat wyboru ustawień kierowania i zachowania formularzy.

Po opublikowaniu formularza rejestracyjnego dostosuj wiadomość e-mail z potwierdzeniem zgody, jeśli opcja podwójnej zgody jest włączona dla Twojej listy. Następnie zbuduj sekwencję powitalną, aby dostarczyć ofertę swojego formularza (np. rabat lub bezpłatną wysyłkę przy pierwszym zamówieniu) i wprowadzić nowych subskrybentów do swojej marki.

Dodatkowe źródła

• Pierwsze kroki z formularzami rejestracyjnymi
• Jak testować A/B formularz rejestracyjny
• Szkolenie: tworzenie strategicznych formularzy rejestracyjnych