Round corners blockquote

Robisz wszystko, aby zbudować stronę internetową, która doprowadzi odwiedzających do konwersji. Studiując analizy, jesteś podekscytowany, widząc, że stworzona przez Ciebie podróż użytkownika jest odbierana przez tych odwiedzających raz po raz. Jednak coś powstrzymuje ich przed konwersją. Dowiedz się, co to jest w tym zaawansowanym Przewodniku po formularzach kontaktowych.

Formularz kontaktowy jest kluczowym elementem podróży odwiedzających.

Nawet jeśli skutecznie sprzedałeś je na dowolnej stronie internetowej, formularz kontaktowy może realistycznie zrujnować im doświadczenie, jeśli nie zostanie dobrze wykonany.

Zepsute przyciski, mylące pola, zbyt wiele kroków, zdezorganizowany interfejs … do diabła, nawet umieszczenie formularza kontaktowego może zakłócić wrażenia użytkownika.

Jest wiele rzeczy, które mogą pójść nie tak, a w tym artykule zrobimy wszystko, co w naszej mocy, aby edukować Cię, jak możesz uniknąć tych rzeczy.

W szczególności dajemy Ci nasze…

6 zasad budowania idealnego formularza kontaktowego

Ale trzymaj się, najpierw szybkie PSA…

Zanim przejdziemy dalej, powinieneś wiedzieć, że jest to zaawansowane spojrzenie na świat formularzy kontaktowych WordPress.

Jeśli chcesz prostego wprowadzenia, nasze pierwsze kroki z formularzami kontaktowymi post jest doskonałym miejscem na rozpoczęcie.

Następnie, gdy wiesz, że musisz utworzyć więcej formularzy kontaktowych dla swojej witryny, następnym krokiem jest wybór odpowiedniej wtyczki formularza kontaktowego, aby ułatwić życie.

Gdy już zrobisz te rzeczy, liczymy, że będziesz gotowy i przygotowany do zaawansowanego działania w formie (heh), które nastąpi później.

Moving on…

Loginy użytkownika. Zapisy do członkostwa. Subskrypcje e-mail. Prośby o wycenę. Kwestionariusze. Prośby o wsparcie. Formy zamówienia i płatności.

Istnieje wiele różnych sposobów korzystania z formularzy kontaktowych w witrynie WordPress. Nie zmienia to jednak zasad, których musisz przestrzegać, jeśli chcesz, aby Formularz kontaktowy działał dobrze.

Badanie Google eye-tracking opublikowane w 2014 r. wykazało, że przestrzeganie najbardziej podstawowych wytycznych dotyczących użyteczności w projektowaniu formularzy znacznie poprawi wrażenia użytkownika.

W szczególności, gdy formularz kontaktowy przestrzega wszystkich zasad, 78% użytkowników może je wypełnić i przesłać za jednym razem. Gdy formularz kontaktowy narusza te zasady, tylko 42% jest w stanie to zrobić za jednym zamachem.

Ciekawi cię, jakie są te zasady? Więc czytaj dalej.

Zasada # 1: skoncentruj się na wyrównaniu

Jak widać w niektórych innych zasadach tutaj, ludzie często są zaniepokojeni długością formularzy kontaktowych, co często prowadzi do złych wyborów projektowych.

Weźmy na przykład sprawę wyrównania.

Możesz zobaczyć taki formularz na stronie BrainTraffic i pomyśleć: “Hmmm… ale czy to nie za długo, aby go wypełnić?”

Perfect Contact Form - BrainTraffic AlignmentTo tylko pięknie skonstruowany formularz kontaktowy na stronie BrainTraffic.

Jednym ze sposobów na rozwiązanie tego “problemu” jest przesunięcie etykiet po lewej stronie i umieszczenie pól odpowiedzi po prawej stronie.

Jednak eksperci UX powiedzą, że jest to poważne Nie-Nie, ponieważ naraża skanowalność formularza.

To samo dotyczy sytuacji, gdy myślałeś o umieszczeniu pól obok siebieally.

Zasadniczo, jeśli odejdziesz od struktury etykiety na górze / pola pod it, stworzysz tarcie w środowisku użytkownika.

W 2010 roku wydano zbiór wytycznych dotyczących projektowania formularzy internetowych o nazwie “Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design”.

Google wybrało te wytyczne w 2014 i przetestowało je za pomocą badania eye-tracking.

Perfect Contact Form - Google Eye TrackingZ tego eye tracking test jasno wynika, jak wiele pracy wkładamy w oczy odwiedzającym, gdy nie zwracamy uwagi na wyrównanie.

Wśród wielu znalezisk doszli do wniosku, że wyrównane do lewej strony formularze z etykietami umieszczonymi na każdym polu przyniosły lepsze wrażenia użytkownika.

Jeśli chcesz, aby formularze kontaktowe przestrzegały tej prostej zasady wyrównania, oto, co musisz zrobić:

  • Wyrównaj do lewej wszystkie etykiety, pola formularza i główny przycisk wezwania do działania.
  • Nigdy nie wyrównuj powiązanych pól w poziomie. Formularz można uporządkować logicznie, ale każde pytanie lub pole musi być ułożone pionowo.
  • Każde pole z pytaniami wielokrotnego wyboru (z mniej niż sześcioma opcjami) powinno być wyświetlane na pionowej liście punktorów lub pól wyboru, a nie w rozwijanym menu.

Perfect Contact Form - WPMU DEV Mobile ButtonNaprawdę ładny przykład wyrównania i projektowania mobilnych formularzy kontaktowych z WPMU DEV.

Ten projekt jest nie tylko świetny dla użytkownika, ale pomoże Twojej witrynie wypełnić lukę między komputerem a mobilnością (szczególnie ważne, gdy pracujesz nad aktualizacją witryn dla mobilnego indeksu Google).

Reguła # 2: Dołącz Wszystkie Odpowiednie Pola

Jeśli chodzi o projektowanie formularzy kontaktowych, można pomyśleć, że krótszy jest lepszy, prawda?

Nie zawsze tak jest. Najważniejsze jest to, że udostępniasz użytkownikom wszystkie niezbędne i odpowiednie pola.

Michael AAGAARD, starszy Optymalizator konwersji dla Unbounce, wygłosił prezentację w 2015 roku, w której zajął się tym właśnie pytaniem.

On i jego zespół chcieli wiedzieć, co by się stało, gdyby skrócili ten formularz kontaktowy:

Perfect Contact Form - Unbounce A:B Test 1Co zaskakujące, krótsza forma nie wypadła tak dobrze, jak dłuższa.

Jak widać, usunęli to, co uważali za niepotrzebne pola, aby usprawnić proces wypełniania formularza.

Jednak po zakończeniu testu odkryli 14% spadek konwersji przy krótszej formie.

Następnie badali, które pola miały najwyższe i najniższe interakcje w formularzu kontaktowym.

Korzystając z oryginalnego, dłuższego wzoru, zmienili te pola i zaktualizowali etykiety, aby wyjaśnić, jakiego rodzaju informacje były potrzebne.

Ponownie przeprowadzili test i zauważyli 19% poprawę leadów dzięki ponownie oznakowanej i zreorganizowanej wersji długiej formy:

2″width=” 600″height=” 316 ” />Unbounce stwierdził, że klucze do poprawy dłuższego formularza kontaktowego znajdują się w etykietach, a nie w długości formularza.

Jednak nie zawsze tak działają te testy.

Na przykład Expedia odkryła, że w formularzu kontaktowym pojawiło się pole “Firma”, które dezorientowało klientów.

Było to opcjonalne, ale użytkownicy niekoniecznie to rozumieli i z kolei wypełniali błędne informacje, które ostatecznie doprowadziły do odrzucenia ich zakupu.

Kiedy Expedia zdała sobie sprawę z problemu, usunęła pole i zobaczyła dodatkowe 12 milionów dolarów przychodu w następnym roku.

Sugerowałbym, aby podczas tworzenia własnego formularza kontaktowego zacząć od podstawowych pól, tak jak zrobił to QuickBooks tutaj:

Perfect Contact Form - QuickBooks FieldsPodczas rejestracji w QuickBooks uwzględniane są tylko najbardziej niezbędne pola.

Jeśli okaże się, że konwersje nie są zgodne z oczekiwaniami, przestudiuj analizy i sprawdź, czy możesz określić, które pola uniemożliwiają użytkownikom wypełnienie formularza.

Zasada # 3: Uprość Wprowadzanie Danych

Niezależnie od tego, czy użytkownicy korzystają z formularza kontaktowego za pomocą komputera stacjonarnego lub urządzenia mobilnego, czy też potrzebują technologii wspomagającej, aby im w tym pomóc, formularz powinien być wyposażony w celu uproszczenia procesu wprowadzania danych.

Oto kilka technik, których powinieneś być świadomy:

Tabbing
W przypadku użytkowników komputerów stacjonarnych i osób z problemami z dostępnością upewnij się, że w formularzu kontaktowym jest włączona logiczna kolejność zakładek.

Maski Wejściowe
Zamiast zmuszać użytkowników do zgadywania, w jaki sposób chcesz sformatować określone pola, możesz je kodować za pomocą masek wejściowych, które automatycznie formatują je jako typy użytkowników.

Perfect Contact Form - Social Design House FormatPrzykład jak wygląda Maska wejściowa ze strony Social Design House.

Ten typ automatycznego formatowania prowadzi również do mniejszej liczby kliknięć (zwłaszcza jeśli pole takie jak numer telefonu lub karta kredytowa jest podzielone na wiele pól) i szybszego wypełniania formularzy.

Typy Wejść
Typy wprowadzania HTML pomogą użytkownikom zobaczyć odpowiednie opcje klawiatury podczas pisania na urządzeniach mobilnych, oszczędzając im konieczności wpisywania wszystkiego od zera (jak “.com” dla poczty e-mail).

Perfect Contact Form - Elluminati Adaptive KeyboardZobacz, jak klawiatura na dole tego formularza kontaktowego elluminati zmienia się w zależności od wybranego pola.

Autouzupełnianie Google
Zamiast kodować każde pole, aby automatycznie formatować według standardów, które musi spełnić, Włącz automatyczne wypełnianie za pomocą wtyczki autouzupełniania adresu Google.

Nie tylko pomoże Ci uniknąć problemów z błędami w pisowni i nieprawidłowo sformatowanymi adresami, ale oszczędzi odwiedzających od konieczności wpisywania większości tych informacji.

Logika Warunkowa
Jeśli martwisz się długością formularza kontaktowego–zwłaszcza jeśli jest on skierowany do różnych typów użytkowników i spełnia różne cele–możesz użyć logiki warunkowej, aby go skrócić.

Gdy użytkownik wybierze swój konkretny “warunek”, tylko wtedy będzie należy odsłonić odpowiednie części formularza.

Perfect Contact Form - Pixflow Expanded FormPo wybraniu ostatecznego pola użytkownicy otrzymują dodatkowe pola do wypełnienia, które są najbardziej odpowiednie dla ich żądania.

Wiele wtyczek formularza kontaktowego zawiera rozszerzenie. Na przykład, tutaj jest jeden dla Forminatora.

Forminator screenshot with conditional logic buttonTworzenie formularzy z logiką warunkową za pomocą Forminatora.

Bułka tarta
Bułka tarta lub pasek postępu formularza kontaktowego niekoniecznie musi upraszczać proces wypełniania formularza.

Pomaga to jednak zachęcić użytkowników do jego ukończenia, ponieważ pozostałe kroki są jasno określone.

Jeszcze raz, oto przykład paska postępu wykorzystującego element paginacji Forminatora:

Dodaj pasek postępu do formularzy, aby ułatwić użytkownikom poruszanie się po procesie wypełniania formularzy.

Zasada # 4: Przeliteruj Wszystko

Chociaż zdaję sobie sprawę, że ta zasada będzie sprzeczna z podstawowymi zasadami minimalizmu, jest to jedna, na którą należy zwrócić szczególną uwagę, aby uniknąć niepotrzebnego frustrowania odwiedzających.

Pozwól, że wyjaśnię: masz formularz kontaktowy, który wygląda na wystarczająco prosty.

Użytkownicy wypełniają je na podstawie sugestii etykiet i klikają przycisk przesyłania.

Potem otrzymują tę brzydką czerwoną wiadomość: “nie zrobiłeś tego dobrze! Wróć, popraw formularz i prześlij ponownie!”

Prawdopodobnie spotkałeś się z tym jako użytkownik i wiesz, jak frustrujące może to być, zwłaszcza jeśli niektóre z wprowadzonych informacji znikną po wyrzuceniu błędu.

Więc zamiast pozostawiać użytkownikom zgadywanie, co należy naprawić i jak, nie pozwól, aby to dotarło do tego punktu.

Przeliteruj wszystko po drodze:

  • Zapewnij focus w terenie (zwłaszcza na urządzeniach mobilnych), aby użytkownicy wiedzieli dokładnie, gdzie są w trakcie wypełniania formularza.
  • Napisz wszelkie wymagania formatowania, jeśli nie używasz masek wprowadzania do automatycznego formatowania pól.
  • Jawnie określ, kiedy pole jest “Opcjonalne” (użyj słowa, a nie czerwonej gwiazdki).
  • Daj użytkownikom możliwość pokazania lub ukrycia pola hasła podczas jego wprowadzania.
  • Wyświetla komunikat o błędzie, gdy tylko użytkownik zaangażuje się w pole. Nie czekaj na to do samego końca.

Perfect Contact Form - Hubspot Error MessagesHubspot pokazuje właściwy sposób obsługi komunikatów o błędach w formularzu kontaktowym.

We wspomnianym badaniu Google eye-tracking śledzili użytkowników, którzy przystąpili do testu i stwierdzili, że brak formatowania był często określany jako skarga.

Google sugeruje dostarczenie jasnych wytycznych w całym formularzu, a także bardzo widocznych komunikatów o błędach. Ponadto etykiety te nie powinny być tylko standardową czerwoną czcionką.

Powinny być zarysowane, kolorowe i pogrubione.

Zasada # 5: trzymaj się z dala od wskazówek

Tekst podpowiedzi w formularzu kontaktowym wygląda następująco:

Perfect Contact Form - Target FieldWhile Target naprawił niektóre problemy związane z używaniem tekstu podpowiedzi w polach formularza, nadal może to nie wystarczyć dla użytkowników z problemami z dostępnością.

Zobacz, jak Target umieszcza etykiety w polu? W niektórych formularzach kontaktowych te etykiety / wskazówki po prostu znikają, gdy użytkownik kliknie pole.

Target radzi sobie z tym nieco inaczej i zamiast tego przenosi etykietę na górę pola (patrz “adres e-mail”).

Niezależnie od tego, jak jest to obsługiwane, eksperci od użyteczności-jak Nielsen Norman Group-powiedzą, że jest to zła praktyka projektowania, ponieważ:

  • Jest to problematyczne dla użytkowników, którzy są wielozadaniowi, rozpraszają się lub zbyt szybko przechodzą do następnego pola. Gdy wskazówka zniknie, użytkownicy muszą wycofać się z pola, aby na nowo odkryć, co jest potrzebne.
  • Wskazówki, które znikają, zabraniają użytkownikom cofania formularza, aby sprawdzić swoją pracę lub naprawić błąd bez całkowitego usuwania odpowiedzi, aby zobaczyć, co jest pod spodem.
  • Jaśniejszy szary tekst używany do podpowiedzi zastępczych nie jest idealny do łatwego czytania.
  • Pola z tekstem Podpowiedzi mogą być mylone z polami, które już wypełniły dane, pozostawiając użytkownikom ich pominięcie, przesłanie formularza i otrzymanie Komunikatu o błędzie.
  • Niektóre narzędzia czytnika ekranu nie są w stanie odczytać tekstu podpowiedzi zastępczej.

Według NNG, użytkownicy uważają puste pola za bardziej atrakcyjne niż te, które zawierają tekst podpowiedzi.

Chociaż umieszczenie tych etykiet lub deskryptorów nad polem może wydłużyć wygląd formularzy,poprawi to użyteczność.

Zasada # 6: spójrz na swoje przyciski

WPMU DEV ma już świetny przewodnik po projektowaniu lepszych przycisków, więc nie będę tego powtarzał. Zamiast tego chcę skupić się na kilku rzeczach, które możesz zrobić, aby poprawić przyciski formularza kontaktowego.

Na początek zawsze wyrównuj podstawowy CTA z polami formularza, nawet jeśli nie wydaje się to logiczne.

Na przykład, jeśli masz przycisk “Dalej” i “Wstecz”, “Dalej” powinien pojawić się po lewej stronie, ponieważ jest to działanie, które większość użytkowników zamierza podjąć.

Staraj się również nie używać przycisków “Resetuj”, “Wyczyść” lub “Anuluj”. Wielu użytkowników dostaje się do dolnej części formularza i automatycznie kliknij pierwszy przycisk, który zobaczą, myśląc, że jest to przycisk przesyłania.

Jeśli stracą wszystkie odpowiedzi przez błędne naciśnięcie niewłaściwego przycisku, może okazać się, że nie będą chcieli ponownie przesłać.

W tym teście A / B z Unbounce odkryli, że kopiowanie oparte na wartości (nawet jeśli jest dłuższe) było bardziej skuteczne w konwersji użytkowników.

Perfect Contact Form - Unbounce A:B Test 3Tekst CTA może być dłuższy, ale użytkownicy zareagowali znacznie bardziej pozytywnie na wiadomość opartą na wartościach.

Zaktualizowana Kopia otrzymała ponad 31% więcej konwersji niż oryginalna wiadomość.

Na koniec użyj znaków zaufania wokół przycisków formularza kontaktowego, gdy ma to sens.

Oświadczenie CoSchedule o braku karty kredytowej jest dobrym przykładem tego:

Perfect Contact Form - CoSchedule ButtonOgólnie rzecz biorąc, świetnie wyglądający formularz, który dobrze radzi sobie z użyciem tekstu “trust mark”, który zachęca użytkowników do klikania bez wahania.

Ale bądź ostrożny. Jeśli używasz znaku zaufania, gdy nie jest potrzebny, może to być błędned użytkownicy wierzą, że muszą przekazać poufne informacje, gdy tak nie jest, jak pokazuje ten test A / B z Behave:

Perfect Contact Form - Behave A:B TestMożna by założyć, że znak zaufania TRUSTe pomoże zwiększyć konwersje, ale w tym przypadku tak nie jest.

Wersja B otrzymała prawie 13% więcej zgłoszeń niż Wersja A, ponieważ pieczęć zabezpieczająca doprowadziła użytkowników do przekonania, że w końcu będą musieli przesłać płatność lub inne poufne informacje za pośrednictwem strony internetowej.

Czas na zastosowanie ationu w (formie)

Formularze kontaktowe nie są uniwersalne.

Każda strona internetowa (i firma stojąca za Stroną Internetową) ma inny cel, a zatem formularze kontaktowe w niej muszą działać specjalnie, aby pomóc w osiągnięciu tego celu.

Jeśli chcesz poprawnie wykonać powyższe zasady podczas pracy nad tymi celami, masz dwie opcje.

Możesz znaleźć wtyczkę WordPress, która pomoże Ci stworzyć niestandardowy formularz kontaktowy WordPress lub możesz zbudować własny.

Wtyczka taka jak WPMU DEV ‘ s Forminator daje Ci to, co najlepsze z obu światów (i jest darmowa!).

Zainstaluj wtyczkę i wybierz szablon na początek, a następnie stwórz formularz, aby dopasować go do konkretnych potrzeb, korzystając z szeregu zaawansowanych opcji i ustawień dostosowywania.

Niezależnie od tego, co zdecydujesz, pamiętaj, że użytkownicy niekoniecznie boją się długich formularzy kontaktowych, chodzi bardziej o to, jak dobrze stworzyłeś dla nich doświadczenie w formularzu.

You May Also Like

14 najlepszych wtyczek i narzędzi SEO WordPress, których powinieneś używać

W artykule: Rzeczy, które musisz wiedzieć o wtyczkach i narzędziach SEO WordPress…

Jak wyłączyć pasek administracyjny WordPress dla wszystkich użytkowników z wyjątkiem administratorów

W artykule: Co to jest pasek administracyjny WordPress? Samouczek wideo Metoda 1.…

Wtyczki 9 najlepszych gwiazdek dla WordPress w 2021 roku (w porównaniu)

W artykule: Po co używać wtyczki Star Rating do WordPressa? 1. WPForms…

5 elementów samochodu, które należy sprawdzić przed wyjazdem na wakacje

W artykule: 1. Przebieg rozrządu2. Płyny eksploatacyjne3. Opony4. Klimatyzacja5. Zawieszenie i hamulceCo możemy…