Jak zoptymalizować formularze popup i rozwijane poziomo na urządzenia mobilne

Czego się dowiesz?

Dowiedz się, jak projektować formularz rejestracyjny na urządzenia mobilne zgodnie z najlepszymi praktykami Klaviyo, aby mieć pewność, że formularz pop-up i formularz rozwijany poziomo są zoptymalizowane pod kątem odwiedzających korzystających z urządzeń mobilnych.

Kupujący online coraz częściej używają urządzeń mobilnych do odkrywania nowych sklepów, przeglądania produktów i robienia zakupów, dlatego ważniejsze niż kiedykolwiek jest dopilnowanie, aby Twoja witryna wyglądała tak dobrze na urządzeniach mobilnych, jak na komputerach stacjonarnych — a to obejmuje również formularze rejestracyjne.

Kilka słów na początek

W Klaviyo możesz tworzyć formularze, które wyświetlają się na wszystkich urządzeniach (czyli są widoczne na komputerach i urządzeniach mobilnych), albo możesz tworzyć formularze tylko na urządzenia mobilne, które wyświetlają się wyłącznie na urządzeniach mobilnych.

Jeśli twój formularz jest ustawiony tak, aby wyświetlał się na wszystkich urządzeniach, Klaviyo automatycznie optymalizuje niektóre elementy, takie jak rozmiary czcionek i obrazy, aby poprawić jego wygląd dla osób robiących zakupy na urządzeniach mobilnych. W tym przewodniku omówimy dodatkowe sprawdzone praktyki, o których warto pamiętać. Użyj selektora widoku w prawym górnym rogu kreatora formularzy, aby przełączać się między widokiem na komputer i na urządzenia mobilne podczas tworzenia formularza. Ikona komputera pokaże, jak formularz wygląda dla osób robiących zakupy na komputerze, a ikona urządzenia mobilnego pokazuje to, co widzą osoby robiące zakupy na urządzeniach mobilnych.

W tym przewodniku omówimy najlepsze praktyki tworzenia formularzy typu popup i rozwijane poziomo, które wyświetlają się na urządzeniach mobilnych. Są one pomocne niezależnie od tego, czy twój formularz wyświetla się na wszystkich urządzeniach, czy tylko na urządzeniach mobilnych. Aby zapoznać się z bardziej szczegółowym omówieniem formularza rejestracyjnego na urządzeniach mobilnych, przejdź do podstawy: projektowanie formularzy na urządzenia mobilne.

Ogólne najlepsze praktyki dotyczące formularzy

Wiele najlepszych praktyk dotyczących formularzy na komputery stacjonarne ma zastosowanie także na urządzeniach mobilnych:

• Krótko i na temat: jeśli masz dużo pól, rozważ wielostopniowy formularz.
  • Jeśli formularz zbiera zgody na e-mail i SMS, zbieraj zgodę na e-mail w pierwszym kroku, a następnie zgodę na SMS w drugim kroku. Użyj Inteligentnej zgody opt-in, aby ułatwić wyrażenie zgody na urządzeniu mobilnym. Inteligentna zgoda opt-in wymaga włączenia SMS w Twoim koncie oraz płatnego planu SMS; wymagania dotyczące konfiguracji znajdziesz w podlinkowanym przewodniku.
• Upewnij się, że łatwo ją zamknąć, aby odwiedzający nie frustrowali się i nie opuszczali witryny.
  • Korzystanie z form teaser pozwala kupującym ponownie otworzyć formularz, który zamknęli. Ustaw teaser na Pokazuj po zamknięciu formularza lub Pokazuj przed wyświetleniem formularza i po jego zamknięciu.
• Jeśli Twój formularz jest ustawiony tak, aby wyświetlał się na wszystkich urządzeniach (czyli zobaczą go zarówno użytkownicy na komputerach, jak i na urządzeniach mobilnych) i zawiera obraz boczny, pozostaw ustawienie obrazu na Komputery w Edytuj style > Obraz boczny. Dzięki temu obraz boczny jest ukryty na urządzeniach mobilnych, co pozostawia więcej miejsca na treść formularza.
  

• Używaj zwięzłych etykiet dla każdego pola wejściowego (np. adres e-mail, numer telefonu itd.), które mieszczą się w jednym wierszu, aby kupujący mogli łatwo zobaczyć, o jakie informacje prosisz.

SEO i formularze mobilne

Warto wziąć pod uwagę najlepsze praktyki SEO na urządzenia mobilne, szczególnie podczas tworzenia formularzy na stronie głównej lub innych stronach docelowych. Formularze, które pojawiają się na popularnych stronach docelowych z bezpłatnych wyników wyszukiwania, nie powinny zasłaniać treści witryny ani zakłócać wrażeń odwiedzających; w przeciwnym razie algorytmy wyszukiwania mogą nałożyć karę na stronę. Dowiedz się więcej o inwazyjnych stronach przejściowych i SEO.

Aby tego uniknąć:

• Otwórz Targetowanie i sposób działania > Wyświetlanie. W sekcji Harmonogram ustaw Pokaż formularz na Na podstawie reguł, włącz Po opóźnieniu czasowym i wpisz opóźnienie w sekundach. Jeśli włączysz inne reguły harmonogramu, włącz Wyświetlaj tylko wtedy, gdy wszystkie wybrane warunki są spełnione, aby inna reguła harmonogramu nie wyświetliła formularza, zanim upłynie opóźnienie.
• Dodaj teaser i ustaw jego opcję wyświetlania na Pokazuj przed wyświetleniem formularza i po jego zamknięciu.

Optymalizacja wyskakujących okienek

Formularz pop-up pojawia się na środku ekranu kupującego, często zakrywając dużą część strony i utrudniając interakcję z innymi elementami strony, gdy formularz jest otwarty. To sprawia, że formularze pop-up są bardziej uciążliwe, ale też lepiej konwertują.

Aby zoptymalizować działanie wyskakujących okienek na urządzeniach mobilnych:

1. Wyłącz zamykanie formularza, gdy kupujący na urządzeniu mobilnym kliknie poza obszarem formularza, aby ograniczyć przypadkowe zamknięcia formularza.
   • Przejdź do Targetowanie i sposób działania > Wyświetlanie.
   • Przewiń w dół do Kliknij poza formularzem, aby zamknąć.
   • Odznacz Na urządzeniach mobilnych, aby dotknięcia poza wyskakującym okienkiem go nie zamykały.
     

2. Upewnij się, że ikona zamknięcia formularza (przycisk X) jest wystarczająco duża, nawet na małym ekranie, np. na urządzeniu mobilnym.
   • Kliknij ikonę zamykania w podglądzie formularza, aby dostosować jego rozmiar.
   • Sprawdź, jak formularz wygląda na Twoim urządzeniu mobilnym, aby upewnić się, że łatwo go znaleźć i kliknąć.
     Na przykład ikona zamykania w formularzu po lewej stronie może być trudna do kliknięcia na urządzeniu mobilnym. Natomiast ikona zamykania w formularzu po prawej stronie jest większa i łatwa do znalezienia.
     

3. Wyróżnij wizualnie wyskakujące okienko na tle reszty witryny, używając koloru nakładki, cienia lub obu tych elementów.
   • Wybierz Edytuj style, aby otworzyć panel Style.
   • W sekcji Kolor nakładki wybierz półprzezroczysty kolor, aby skierować uwagę na formularz i przyciemnić treści w witrynie, gdy formularz jest otwarty.
   • Skonfiguruj cień, aby dodać delikatne cieniowanie wokół formularza i oddzielić go od otaczającej treści.
4. Dostosuj marginesy formularza, aby bardziej przypominał formularz pop-up na urządzeniach mobilnych i nie rozciągał się od krawędzi do krawędzi.
   
   1. Kliknij Edytuj style, a potem przewiń w dół do sekcji Margines.
   2. Zwiększ marginesy poziome w zależności od tego, jak formularz wygląda w podglądzie mobilnym.

Optymalizowanie wysuwanych okienek

Gdy pojawi się formularz rozwijany poziomo, osoby odwiedzające stronę na urządzeniach mobilnych nadal mogą wchodzić w interakcję z Twoją witryną za formularzem, chyba że włączono opcję Nakładka mobilna. Mogą zamknąć formularz, wypełnić go lub zostawić otwarty i dalej przeglądać stronę. Ogólnie rzecz biorąc, dzięki temu formularze rozwijane poziomo są mniej inwazyjne niż wyskakujące okienka.

Aby zoptymalizować formularz rozwijany poziomo pod kątem urządzeń mobilnych:

1. Ustaw formularz tak, aby wysuwał się z góry lub dołu ekranu.
   • Wybierz Edytuj style, aby otworzyć panel Style.
   • Wybierz Pozycja rozwijanego poziomo na urządzeniach mobilnych, a następnie wybierz Zadokuj u dołu lub Zadokuj u góry.
     Na urządzeniach mobilnych w orientacji pionowej Twój formularz będzie rozwijał się poziomo od górnej lub dolnej krawędzi ekranu i zakryje część ekranu na całej jego szerokości. W orientacji poziomej używa standardowego położenia rozwijanego poziomo.
     

2. Wizualnie oddziel formularz rozwijany poziomo od reszty witryny, używając nakładki mobilnej, cienia lub obu tych elementów.
   • Wybierz Edytuj style, aby otworzyć panel Style.
   • Przewiń do ustawień nakładki mobilnej i cienia.
   • Włącz nakładkę mobilną, aby zablokować interakcję z resztą Twojej witryny, gdy formularz rozwijany poziomo pozostaje otwarty. Nakładka nie pojawia się, gdy formularz rozwijany poziomo jest wyświetlany na komputerze.
   • Włącz Cień, aby dodać subtelne cieniowanie wokół formularza i odróżnić go od otaczających treści. Pamiętaj, że ustawienia Cienia wpływają zarówno na wersję mobilną, jak i komputerową formularza.
     

Kolejne kroki

Gdy będziesz gotowy(-a), aby wprowadzić zmiany na żywo:

1. Kliknij Opublikuj lub zaplanuj w edytorze formularzy.
2. Usuń wszystkie alerty blokujące. Jeśli pojawią się opcje planowania, wybierz Opublikuj teraz. Aby opublikować zmiany, kliknij Opublikuj teraz.

Sprawdź opublikowany formularz na urządzeniu mobilnym, upewniając się, że spełniasz jego warunki kierowania i wyświetlania.

Gdy zoptymalizujesz formularze pod kątem urządzeń mobilnych, wypróbuj testy A/B projektów formularzy, aby lepiej zrozumieć preferencje odwiedzających witrynę.

Dodatkowe źródła

• Formularze rejestracyjne: pierwsze kroki
• Zrozumienie ustawień odrzucania formularza
• Podstawy: projektowanie formularzy mobilnych
• Jak pozyskiwać zgodę na wysyłkę SMS-ów za pomocą formularza z funkcją Dotknij i napisz?