Jak zbudować formularz o wysokiej konwersji za pomocą Elementora

Czy możesz sobie wyobrazić prowadzenie udanego biznesu bez jakiejkolwiek komunikacji? 

Nie ma mowy!

Utrzymanie właściwej komunikacji z klientami jest zawsze priorytetem #1 w rozwoju biznesu. Bez względu na to, co zrobisz, luki w komunikacji z pewnością zawalą Twój biznes.

Możesz rozwiązać ten problem jedynie poprzez dodanie formularzy internetowych do swojej witryny. Wiadomo, że formularze internetowe tworzą pomost komunikacji pomiędzy właścicielami i klientami. Niedawne studium Clutcha pokazuje, że 86% osób korzysta z różnych formularzy internetowych przynajmniej raz w tygodniu.

Jest ogromny, prawda?

Najwyższy czas zbudować dla swojej witryny formularz internetowy o wysokiej konwersji. Przejrzysty i zwięzły formularz internetowy pomoże Ci rozwijać firmę, generować potencjalnych klientów i poprawiać jakość konwersacji z klientami.

Jakie są najlepsze praktyki projektowania formularza internetowego?

W świecie online istnieją tysiące formularzy. Jednak to wszystko zdecydowanie nie jest na tyle dobre, aby przekonać odbiorców do wypełnienia formularza. 

Co zatem sprawia, że formularz internetowy jest dobry dla każdego? Cóż, istnieje pięć kluczowych elementów projektowania formularza o wysokiej konwersji. Przyjrzyjmy się tym –

1. Uwzględnij kluczowe komponenty

Każdy udany formularz internetowy musi zawierać kilka kluczowych elementów. Musisz uwzględnić te pola w formularzu internetowym. Przyjrzyjmy się tym kluczowym elementom.

• Struktura formularza

Struktura formularza odgrywa kluczową rolę w poprawie doświadczenia użytkownika (UX) i generuje więcej potencjalnych klientów. Pola wejściowe muszą być uporządkowane i powiązane ze sobą. Logiczne powiązanie pól zachęca do uzupełniania formularzy.

• Pola wejściowe

Profesjonalny formularz internetowy musi zawierać wiele pól wejściowych. Podstawowe pola to pola tekstowe, pola haseł, przyciski, pola wyboru, suwaki itp.

• Odpowiednia etykieta polowa

Odpowiednie pole pomaga użytkownikowi wprowadzić dane, aby zrozumieć, co powinien wpisać w polu. 

• Wiadomość zwrotna

Komunikat zwrotny pomaga użytkownikom zrozumieć, czy wprowadzili właściwe, czy błędne informacje w polu. Załóżmy, że użytkownik wpisuje swój numer telefonu w skrzynce e-mail, a następnie w formularzu kontaktowym powinna pojawić się wiadomość powiadamiająca użytkownika o tym błędzie.

• Przycisk akcji

Przycisk akcji służy do przesłania danych formularza. Ogólnie rzecz biorąc, przycisk ten znajduje się na dole formularza internetowego. Istnieje jednak kilka innych przycisków akcji, takich jak sprawdzanie poprawności tekstu, sprawdzanie poprawności liczb itp.

• Walidacja

Błądzić jest rzeczą ludzką. To bardzo normalne, że użytkownicy popełniają błędy podczas wypełniania tych formularzy. Ta kontrola weryfikacyjna pomaga użytkownikowi rozwiązać te problemy.

2. Pytaj tylko o to, co konieczne

Mniej znaczy więcej!

Projektując formularz internetowy, nie zalewaj go dużą liczbą pól wejściowych. Użytkownicy zawsze wolą krótsze formy. Ponieważ wypełnienie formularza zajmuje mniej czasu.

A raport HubaSgarnek pokazuje, że można zwiększyć współczynnik konwersji do 25%, zmniejszając liczbę pól wejściowych do trzech.

Współczynnik konwersji formularza według liczby pól wejściowych

Do formularza internetowego możesz dodać od pięciu do siedmiu pól wejściowych. Pamiętaj tylko, że wypełnienie formularza nie zajmuje użytkownikom więcej niż dwie minuty. Inne badanie przeprowadzone przez Clutch pokazuje, że 44% użytkowników nie chce spędzać na wypełnianiu formularza więcej niż dwóch minut.

Unikaj więc dodawania dodatkowych pól do formularza. Staraj się, aby było to tak proste i zwięzłe, jak to możliwe. Jeśli naprawdę chcesz dodać więcej pól, wypróbuj formularze wieloetapowe.

3. Dbaj o to, aby formularz był przyjazny dla użytkownika

Musisz uprościć formularze, aby zapewnić użytkownikom płynniejszą obsługę formularzy. Twoim głównym celem jest pobieranie od użytkowników tylko wymaganych informacji. Nie zaśmiecaj formularza mniej ważnymi polami wejściowymi. 

Przy okazji, możesz uprościć formularze internetowe, zachowując następujące zasady.

• Być specyficznym – Pokaż użytkownikom szczegółowe instrukcje za pomocą symbolu zastępczego. Na przykład nie pisz po prostu „Imię” jako symbolu zastępczego. Zamiast tego wpisz konkretny symbol zastępczy, taki jak „imię” lub „nazwisko”.

• Podaj przykład - Istnieje kilka pól tekstowych, w których oprócz wpisywania konkretnego symbolu zastępczego należy podać przykład. Załóżmy, że wprowadziłeś pole wejściowe, które zbiera konkretną datę.

Jak wiadomo, na całym świecie istnieje wiele formatów daty, takich jak mm/dd/rr, dd/mm/rr, rr/mm/dd itp. W takim przypadku należy umieścić preferowany format w symbolu zastępczym.

• Użyj gwiazdek – Jeśli chcesz, aby pole wejściowe było obowiązkowe, umieść gwiazdkę w górnej części pola wejściowego. Prosty znak gwiazdki (*) wysyła użytkownikowi wiadomość, że musi wypełnić to pole. 

• Używaj wielkich liter – Musisz poprawić czytelność, używając wielkości zdań. To najważniejszy fakt, który należy sprawdzić, korzystając z przycisków CTA w formularzu internetowym.

4. Dołącz skuteczny przycisk CTA

Przycisk wezwania do działania służy do poprowadzenia użytkowników do następnego kroku. Istotną rolę odgrywa zmiana współczynnika konwersji. Musisz uwzględnić skuteczny przycisk CTA, który wyraża intencje użytkownika, a także prowadzi go do następnego kroku.

Projektując przycisk CTA, należy zwrócić uwagę zarówno na projekt przycisku, jak i na tekst. Projektując przycisk wezwania do działania, należy pamiętać o kilku kwestiach.

• Umieść przycisk w widocznym miejscu na swojej stronie internetowej
• Dodaj obiecujący kolor, który dobrze pasuje do Twojego projektu tła
• Spróbuj dodać styl 3D do swojego przycisku
• Dodaj uproszczoną ikonę obok tekstu przycisku

Oto powszechne praktyki projektowania przycisku CTA. Jednak tekst przycisku również powinien zostać zoptymalizowany.

Z badania Unbounce wynika, że korzystanie z tradycyjnych tekstów CTA powoduje zmniejszenie współczynnika konwersji o około 3%. Kilka tradycyjnych tekstów przycisków to „Prześlij”, „Zarejestruj się”, „Pobierz”, „Idź” itp. 

Unikaj tradycyjnych tekstów i staraj się dodawać unikalne teksty przycisków CTA, takie jak Kliknij tutaj, Dowiedz się więcej, Zacznijmy, Połączmy się itp. Przy okazji upewnij się, że tekst przycisku nie przekracza dwóch lub trzech słów.

5. Spraw, aby formularz był atrakcyjny wizualnie

Większość właścicieli witryn uważa, że formularze internetowe służą wyłącznie do gromadzenia danych. Nie ma potrzeby koncentrować się na projektowaniu. Jednak rzeczywistość jest zupełnie inna. 

Badania mówią, że użytkownicy biorą tylko 0,05 sekundy zdecydować, czy chce pozostać na stronie. Dlatego musisz zaprojektować oszałamiającą wizualnie formę, która w mgnieniu oka przekona użytkownika. 

Projektując oszałamiającą wizualnie formę, należy wziąć pod uwagę następujące fakty. 

• Liczba pól wejściowych – Zredukuj niepotrzebne pola wejściowe i utrzymuj formularz tak prosty, jak to możliwe. Lepiej będzie, jeśli formularz będzie zawierał pięć lub mniej pól wejściowych.
• Projekt – Zadbaj o wyraźny kontrast kolorów, pola wejściowe i formatowanie tekstu. 
• Usuń rozproszenie – Głównym celem formularza internetowego jest generowanie leadów lub rozpoczęcie rozmowy. Dlatego dobrą praktyką jest utrzymywanie formy w minimalnym kształcie poprzez usuwanie niepożądanych elementów rozpraszających. 

Tak powinieneś zaprojektować formularz internetowy, aby zbudować idealną więź z klientami. Nadszedł czas, aby dowiedzieć się, jak zbudować formularz o wysokiej konwersji za pomocą Elementora. 

Zaczynajmy.

Jak zbudować formularz o wysokiej konwersji za pomocą Elementora

Czas porzucić przestarzałe formularze internetowe i zastąpić je eleganckimi. Faktem jest, że budowanie formularza o wysokiej konwersji za pomocą Elementora nie jest tak skomplikowane, jak myślałeś. Wystarczy użyć kilku narzędzi i gotowe.

Warunki wstępne

• • Witryna oparta na systemie WordPress
• • Elementora
• • MetForm

Przejdźmy do procedury krok po kroku budowy formularza wysokokonwertującego.

Krok #1: Skonfiguruj swoje środowisko

Zakładam, że kiedy trafiłeś na tę stronę, masz już witrynę WordPress. Zatem w tej kwestii nie ma nic do dodania. Zainstalujmy pozostałe wtyczki. Zacznę od instalacji MetForma.

Zaloguj się do panelu administracyjnego WordPress i przejdź do Wtyczki > Dodaj nowe. Następnie wyszukaj MetForm i zainstaluj go. 

Instalacja może zająć trochę czasu, w zależności od serwera. Po instalacji nie zapomnij aktywować wtyczki.

Instalowanie MetForma

Rozumiesz? Brawo!

Teraz zainstaluj wtyczkę Elementor, wykonując dokładnie podobny proces.

Krok #2: Utwórz nową stronę

Przejdź ponownie do panelu administracyjnego. Teraz idź do Strony > Dodaj nowe aby utworzyć nową stronę formularza kontaktowego.

Teraz dodaj nazwę do nowo utworzonej strony. Na przykład zamierzam zbudować formularz kontaktowy. Dlatego nazwałem go „Skontaktuj się z nami”. Powinieneś także dodać odpowiednią nazwę swojej strony internetowej, która najlepiej odzwierciedla cel Twojej strony internetowej.

Nie będziemy jednak używać domyślnego edytora WordPress, czyli tzw Gutenberga zbudować naszą formę. Do zbudowania tego wspaniałego motywu użyjemy Elementora. Dlatego musimy otworzyć stronę za pomocą Elementora. Aby edytować naszą stronę za pomocą Elementora, po prostu kliknij „Edytuj za pomocą Elementora” i gotowe. Nawiasem mówiąc, załadowanie Elementora może zająć kilka sekund. Bądź cierpliwy!

Dodanie nowej strony

Przy okazji, możesz także dodać formularz na swoich istniejących stronach. Na przykład dodaję formularz do nowej strony. W dalszej części tego artykułu pokażę Ci proces dodawania formularza do istniejącej treści.

Krok #3: Wstawianie MetForm

Znajdź widżet MetForm z panelu Elementora znajdującego się po lewej stronie. Następnie przeciągnij i upuść ten widżet narzędzia do tworzenia formularzy Elementor na swoją stronę internetową. 

Wstawianie MetForma

Krok #4: Edycja formularza

Teraz kliknij przycisk „Edytuj formularz” w celu dalszej edycji. Jeżeli korzystasz z dodatku MetForm Elementor po raz pierwszy, musisz kliknąć przycisk „Nowy" przycisk. Otworzy się nasza gotowa biblioteka formularzy. W naszej bibliotece mamy ponad 30 predefiniowanych formularzy. 

Teraz kliknij żądany formularz i kliknij przycisk „Edytuj formularz”, który znajduje się na dole tej strony. Następnie wybrany formularz zostanie otwarty na stronie ustawień.

Formularz edycji

Nawiasem mówiąc, jeśli chcesz, możesz także zbudować nowy formularz od zera. Wybierz pusty dokument, aby od podstaw zaprojektować własny formularz.

Krok #5: Dodawanie lub usuwanie pól wejściowych

Wybrany formularz będzie widoczny na stronie ustawień formularza. Możesz dodać lub usunąć dowolne z tych pól wejściowych z formularza. MetForm umożliwia jednak użytkownikowi dodanie nieograniczonej liczby pól wejściowych do formularza. Dodatek MetForm Elementor zawiera ponad 40 różnych pól wejściowych, które można dodać do formularza.

Dodawanie lub usuwanie pól wejściowych

MetForm oferuje wiele bezpłatnych i płatnych pól do wprowadzania tekstu. Rzućmy okiem na kilka z tych pól wejściowych.

Tu są bezpłatny pola wejściowe –

Oprócz bezpłatnych pól wejściowych oferujemy również kilka płatnych pól wejściowych. To są -

Możesz uwzględnić wszystkie te pola wejściowe, używając MetFormPro.

Krok #6: Dostosowywanie pól wejściowych

Do tego czasu prawdopodobnie nie będziesz już dodawać wymaganych pól wejściowych. Czas więc dostosować te pola. 

Dostosowując pola wejściowe, możesz dostosować prawie każdy element tych pól wejściowych. Na przykład -

• Tekst etykiety
• Pozycja etykiety
• Tekst zastępczy
• Tekst pomocy
• Utwórz pole wymagane
• Komunikat ostrzegawczy itp

Oto przegląd tych działań.

Dostosowywanie pól wejściowych

Krok #7: Dodawanie stylu i typografii

Po sfinalizowaniu formularza nadszedł czas na dostosowanie stylu i typografii pól wejściowych. Na karcie Styl możesz dostosować następujące rzeczy:

Przyjrzyj się procesowi dodawania stylu do pól wejściowych. W tym przykładzie dostosowałem pole „Imię”. W podobny sposób możesz dostosować inne pola wejściowe, które dodałeś do formularza.

Stylizacja i typografia

Po zakończeniu dostosowywania kliknij przycisk „AKTUALIZUJ I ZAMKNIJ" przycisk. Po naciśnięciu przycisku spersonalizowany formularz zostanie automatycznie umieszczony na Twojej stronie internetowej.

Zakończenie formularza

Bingo!

Właśnie zakończyłeś proces dodawania idealnie wyglądającego formularza za pomocą tego dodatku do formularza Elementor.

Jak zbudować formularz internetowy od podstaw, korzystając z MetForm?

O budowie formularza dowiedzieliśmy się już z wykorzystaniem gotowych formularzy MetForm. Jeśli jednak chcesz zbudować formularz od zera, możesz to zrobić również za pomocą MetForm.

Aby ułatwić ten proces, stworzyliśmy dla Ciebie samouczek wideo. Obejrzyj poniższy film, aby poznać cały proces tworzenia formularza od podstaw.

Mamy nadzieję, że dzięki temu filmowi uda Ci się zbudować formularz. Jeśli masz jakieś pytania lub niejasności dotyczące procesu, daj nam znać. 

Jak ponownie wykorzystać formularz zaprojektowany przez MetForm Elementor Addon?

Kolejną ważną zaletą korzystania z MetForm jest to, że możesz użyć formularza ponownie, kiedy tylko zajdzie taka potrzeba. Zawsze, gdy projektujesz formularz. Automatycznie tworzy krótki kod. Po prostu zbierz ten krótki kod i opublikuj go na wybranej stronie internetowej. Automatycznie opublikuje formularz w tym miejscu.

Aby znaleźć swoje poprzednie formularze, przejdź do MetForm > Formularze i znajdziesz wszystkie formularze, które zaprojektowałeś w tej konkretnej domenie.

Lista formularzy MetForm

Po prostu skopiuj krótki kod i wklej go na innej stronie swojej domeny. Ten proces jest gładki jak masło. Jeśli jednak nadal masz problemy z tym procesem, sprawdź poniższą procedurę.

Ponowne użycie formularza

Widzieć? Aby ponownie wykorzystać formularz zbudowany za pomocą MetForm, nie musisz robić prawie nic. Po prostu skopiuj krótki kod i wklej go w dowolnym miejscu formularza.

Przy okazji, możesz także skopiować i wkleić ten formularz na innej stronie internetowej w tej samej przeglądarce. Aby ukończyć tę akcję, musisz jednak użyć dodatku ElementsKit Elementor. Ten moduł kopiowania i wklejania między domenami jest naprawdę wybawieniem dla osób posiadających wiele witryn internetowych.

Ostatnie słowa

Budowanie formularza o wysokiej konwersji jest naprawdę męczącym zadaniem i zabija mnóstwo czasu. Dzięki dodatkowi MetForm Elementor budowanie formularzy stało się znacznie łatwiejsze i całkiem proste. 

Jeśli ten samouczek okazał się przydatny, udostępnij go swoim bliskim. Jeśli napotkasz jakiekolwiek problemy podczas korzystania z MetForm, napisz do nas. Dotrzemy do Ciebie tak szybko, jak to możliwe.