8 pięknych przykładów formularzy kontaktowych + jak dodać je do swojej witryny?

Pięć wskazówek, jak zaprojektować formularz kontaktowy

Zanim przejdziemy do prawdziwych przykładów formularzy kontaktowych, zróbmy krótki objazd i porozmawiajmy o tym, co składa się na świetny formularz kontaktowy. Ten objazd przygotuje scenę, gdy będziemy omawiać, co każdy przykładowy formularz kontaktowy sprawdza się w następnej sekcji.

Najprawdopodobniej masz formularz kontaktowy, ponieważ chcesz, aby ludzie go wypełnili. Jak więc sprawić, by więcej ludzi z niego korzystało? Oto kilka sprawdzonych metod…

1. Jasno zakomunikuj, do czego służy Twój formularz

Jeśli masz zapracowaną firmę lub witrynę, możesz mieć wiele formularzy kontaktowych do różnych zastosowań. Na przykład może to być:

• Formularz zapytania sprzedażowego

• Formularz obsługi klienta

• Formularz zamówienia online

• Formularz prośby o oddzwonienie

• Itp.

Istnieją dwa podstawowe podejścia do tego, a zobaczysz oba w poniższych przykładach formularzy kontaktowych z życia wziętych:

1. Oddzielne formularze. Utwórz osobne formularze dla każdego przypadku użycia i dodaj tekst, który dokładnie wyjaśni, co robi każdy formularz.

2. Pole rozwijane. Dodaj rozwijane pole u góry formularza, które zawiera listę różnych przypadków użycia i automatycznie kieruje formularz kontaktowy we właściwe miejsce.

Tak czy inaczej, użyj etykiet formularza i otaczającego go tekstu, aby cel każdego formularza kontaktowego był całkowicie jasny dla odwiedzających.

2. Ogranicz długość formularza, aby uzyskać więcej konwersji (ale nie zapomnij o jakości)

Mimo wszystko dane wydają się sugerować, że dłuższe formularze kontaktowe oznaczają mniej zgłoszeń.

Na przykład HubSpot przeanalizował ponad 40 000 stron docelowych i zauważył wyraźną korelację między współczynnikami konwersji a liczbą pól formularza.

Szczytowy współczynnik konwersji wynosi około trzech pól. Współczynnik konwersji stale spada aż do ośmiu pól formularza, zanim się spłaszczy:

Źródło

Mówiąc bardziej anegdotycznie, Marketo przetestował trzy formy z podobnymi wynikami do HubSpot:

• 5 pól — współczynnik konwersji 13,4%

• 7 pól — 12,0% współczynnik konwersji

• 9 pól — współczynnik konwersji 10,0%

Oczywiście uzyskanie większej liczby formularzy kontaktowych może nie być Twoim prawdziwym celem, więc nie jest to tak proste, jak zmniejszenie liczby pól w formularzach do absolutnego minimum.

Na przykład, chociaż możesz uzyskać więcej zgłoszeń poprzez zmniejszenie pól, te zgłoszenia mogą nie być tak wysokiej jakości, ponieważ bariera wejścia jest tak niska.

Ogólnie rzecz biorąc, dobrą zasadą jest wyeliminowanie wszystkich niepotrzebnych pól , ale nie eliminuj pól, które gromadzą ważne informacje tylko po to, by skrócić formularz, zwłaszcza jeśli te informacje służą do kwalifikowania potencjalnych klientów.

3. Użyj inteligentnej mikrokopii do wyjaśnienia pól

Jeśli Twój formularz kontaktowy zawiera więcej niż tylko standardowe pola „imię i nazwisko, adres e-mail, wiadomość”, istnieje ryzyko wprowadzenia w błąd odwiedzających.

Na przykład, jeśli masz pole „budżet”, może być niejasne, do czego służy ten budżet. Czy to dotyczy całego projektu? Czy to tylko konkretna część?

Aby uniknąć takich nieporozumień, możesz dodać „mikrokopię” do swojego formularza kontaktowego.

Mikrokopia to w zasadzie mały tekst wyjaśniający, który towarzyszy polam formularzy, aby były bardziej przejrzyste. Spójrz na przykład na poniższe pole Wielkość płatności (ten przykład też zobaczysz później):

4. Eksperymentuj z różnymi formatami

Kiedy większość ludzi myśli o formularzu kontaktowym, wyobrażają sobie ten sam podstawowy osadzony formularz, który widzisz na większości witryn. Ale jeśli chcesz ułatwić innym kontakt z Tobą, czasami warto poeksperymentować z różnymi metodami wyświetlania, takimi jak wyskakujące okienko lub pasek powiadomień.

Na przykład pływający przycisk kontaktu z boku witryny może być świetnym rozwiązaniem jako formularz kontaktowy pomocy technicznej. Ułatwia to użytkownikom skontaktowanie się z Tobą natychmiast po napotkaniu problemu, bez konieczności szukania Twojej strony kontaktowej:

5. Powiedz ludziom kolejne kroki i ustal oczekiwania

Twój projekt formularza kontaktowego nie jest gotowy, gdy ludzie klikną Prześlij!

Aby zapewnić lepsze wrażenia użytkownika, chcesz dokładnie powiedzieć ludziom, co będzie dalej i jak długo to potrwa. Na przykład…

• Czy odpowiadasz na wszystkie pytania, czy tylko na niektóre?

• Jak długo zajmie Ci odpowiedź?

• Czy odpowiesz e-mailem lub inną metodą?

Jeśli ustalisz jasne oczekiwania, Twoi goście nie będą się zastanawiać, co się dzieje i czy Twój formularz w ogóle działa.

Osiem świetnych przykładów formularzy kontaktowych z prawdziwych stron internetowych

Teraz, gdy znasz już najlepsze praktyki, przyjrzyjmy się niektórym projektom formularzy kontaktowych w świecie rzeczywistym, aby zainspirować Cię i pokazać te najlepsze praktyki w działaniu.

1. Pasek

Formularz kontaktowy sprzedaży Stripe jest doskonałym przykładem tego, jak czasami zebranie dodatkowych informacji może sprawić, że formularze kontaktowe będą generować więcej kwalifikowanych potencjalnych klientów (nawet jeśli może to nieco obniżyć bazowy współczynnik konwersji).

Oprócz standardowych pól informacyjnych Stripe dodaje pole Wielkość płatności, aby mogli lepiej zrozumieć potencjalną jakość każdego potencjalnego klienta.

Poza tym istnieje kilka innych fajnych wyborów projektowych, w tym:

• Dowód społeczny — te logo z boku dodają dowód społeczny, wyświetlając wszystkie odnoszące sukcesy firmy korzystające ze Stripe.

• Mikrokopia — termin „Wielkość płatności” może być nieco mylący, więc Stripe dodaje pomocną mikrokopię wyjaśniającą, jak wypełnić pole.

• Cel — Stripe bardzo wyraźnie pokazuje, że ten formularz jest przeznaczony tylko do zapytań sprzedażowych. Dzięki temu ludzie nie będą próbowali używać go do wsparcia lub innych celów niezwiązanych ze sprzedażą.

2. Getsitecontrol

W Getsitecontrol nieco inaczej zajmujemy się projektowaniem formularza kontaktowego.

Zamiast tworzyć dedykowaną stronę „Skontaktuj się z nami”, do której odwiedzający muszą przejść, po prostu dołączamy link Skontaktuj się z nami, który otwiera wyskakujące okienko od razu – nie jest wymagane ponowne ładowanie strony.

Jest to naprawdę wygodne dla ludzi, ponieważ mogą…

• dostęp do naszego formularza kontaktowego z dowolnej strony w serwisie,

• wyślij wiadomość bez przerywania tego, co robili (jak czytanie tego posta na blogu!).

Formularz kontaktowy Getsitecontrol jest prosty i łatwy do wypełnienia. Ponadto wyraźnie informuje o kolejnych krokach po przesłaniu formularza, wraz z wezwaniem do działania, aby sprawdzić blog Getsitecontrol.

3. Kinsta

Kinsta ma jedną stronę „Skontaktuj się z nami”, która automatycznie prowadzi użytkowników do odpowiedniego formularza kontaktowego bez konieczności ponownego ładowania strony.

Kinsta wymienia pięć najpopularniejszych próśb o kontakt:

1. Ceny lub plany

2. Funkcje lub informacje techniczne

3. Poproś o migrację lub inne powiązane pytanie

4. Post gościnny, post sponsorowany lub prośba o link zwrotny

5. Coś jeszcze

Gdy użytkownicy wybierają swój cel, Kinsta wyświetla spersonalizowany formularz kontaktowy lub wiadomość.

Dzięki temu Kinsta może zbierać dokładnie te informacje, których potrzebują, bez obciążania odwiedzających obcymi polami.

Na przykład w formularzu kontaktowym dotyczącym cen lub planów Kinsta dodaje dodatkowe pola, aby zrozumieć, ile witryn i odwiedzających chce hostować dana osoba, ale te pola nie pojawiają się w formularzu „Wszystko inne”.

Kinsta stawia również na szczycie jasne oczekiwania – „Będziemy w kontakcie w ciągu jednego dnia roboczego”.

4. Kontrola wyboru

Choice Screening ma długi formularz kontaktowy. Na pierwszy rzut oka możesz pomyśleć, że zabije to współczynniki konwersji formularza. I to jest w pewnym sensie prawda — w ramach kontroli wyboru bez wątpienia otrzymamy mniej zgłoszeń formularzy niż w przypadku krótszego formularza.

Ale porozmawiajmy o tym, dlaczego czasami jest to w porządku i dlaczego jest to świetny przykład formularza kontaktowego.

Choice Screening działa w bardzo wyspecjalizowanej przestrzeni business-to-business. Próbują zdobyć kwalifikowanych potencjalnych klientów, którzy zmienią się w długoletnich klientów, a nie tylko przesyłanie formularzy kontaktowych.

Dzięki szczegółowej liście usług i licznym polam wyboru, formularz wyeliminuje osoby, które nie są jeszcze pewne, czego chcą, i przepuszcza tylko wykwalifikowanych leadów, którzy mają dużą szansę stać się klientami.

Można powiedzieć, że Choice Screening sprawdza swoich potencjalnych klientów za pomocą tego formularza kontaktowego!

5. Joel Klettke / Business Casual Copywriting

Joel jest profesjonalnym copywriterem, więc możesz się założyć, że jego projekt i kopia formularza kontaktowego będą na miejscu.

Sam formularz Joela jest prosty, ze standardowymi polami i kilkoma dodatkowymi polami kwalifikującymi dla budżetu danej osoby. Jednak to wszystko, co dzieje się obok formularza, sprawia, że ​​jest to tak dobry przykład formularza kontaktowego.

W tym tekście Joel świetnie sobie radzi z ustalaniem oczekiwań i kwalifikowaniem swoich leadów. Celowo odstrasza również klientów niskobudżetowych, omawiając swoje minimalne stawki. Chociaż Joel mógłby usunąć te wzmianki, aby uzyskać wyższy początkowy współczynnik konwersji, w rzeczywistości doprowadziłoby to do zmniejszenia odsetka kwalifikowanych potencjalnych klientów i po prostu do marnowania czasu Joela.

6. Neil Patel

Neil Patel prowadzi jedną z najpopularniejszych witryn marketingu cyfrowego na świecie, więc możesz być pewien, że otrzymuje wiele zgłoszeń do formularzy kontaktowych.

Aby pomóc skierować te zgłoszenia we właściwe miejsce, Neil zawiera menu rozwijane „Chciałbym o tym porozmawiać”, w którym ludzie mogą wybierać spośród wstępnie ustawionych opcji. Używa również mikrokopii w polu zastępczym, aby błagać ludzi, aby ich wiadomości były krótkie i na temat.

To jest proste – ale czasami proste to wszystko, czego potrzebujesz w projekcie formularza kontaktowego.

7. Laboratorium skupienia

Ok, ten jest zabawny, kapryśny i na pewno nie sprawdzi się w każdej firmie. Ale jeśli jesteś w kreatywnej przestrzeni (którą jest Focus Lab), stworzenie tak dziwacznego projektu formularza kontaktowego może pokazać, że potrafisz myśleć nieszablonowo.

Zamiast tworzyć tradycyjny formularz, Focus Lab wykorzystuje bardziej podejście w stylu Mad Libs, w którym odwiedzający wprowadzają swoje informacje w istniejącym akapicie. Korzystając z tego podejścia, Focus Lab jest również w stanie zebrać więcej informacji (takich jak cele i budżet) bez imponującego wyglądu, jaki może mieć bardziej tradycyjny projekt formularza kontaktowego.

8. CAMICB

CAMICB, skrót od Community Association Managers International Certification Board, oferuje certyfikację dla stowarzyszeń społecznych w USA.

Godną uwagi cechą formularza kontaktowego CAMICB jest to, że wykorzystuje on hybrydowe podejście do wyskakujących okienek/strony „Kontakt”. Gdy użytkownicy trafiają na stronę Kontakt , witryna CAMICB natychmiast otwiera prosty wyskakujący formularz kontaktowy, w którym odwiedzający mogą przesyłać swoje wiadomości.

Mając tylko trzy pola, CAMICB zachowuje swoją formę zwięzłą i rzeczową. Następnie podejście wyskakujące tworzy przyjemny interfejs, który nie rozprasza uwagi, w którym skupia się wyłącznie na formularzu.

To sprawia, że ​​przesyłanie zapytania jest tak bezproblemowe, jak to tylko możliwe.

Aby było jeszcze łatwiej , CAMICB wyświetla również rozwijany formularz kontaktowy, do którego użytkownicy mają dostęp w jego stopce:

Jak stworzyć własny, konfigurowalny projekt formularza kontaktowego?

Po przejrzeniu tych ośmiu przykładów formularzy kontaktowych prawdopodobnie masz kilka pomysłów na to, jak zastosować te zasady do własnych projektów formularzy kontaktowych.

Jeśli chcesz zacząć, [Getsitecontrol](/feedback-popup/ może sprawić, że zaczniesz działać w mgnieniu oka.

W przeciwieństwie do większości rozwiązań formularzy kontaktowych, Getsitecontrol umożliwia wybór spośród czterech elastycznych pozycji i dziesiątek szablonów formularza. Możesz utworzyć tradycyjne wyskakujące okienko, takie jak to, które widziałeś w CAMICB i witrynie Getsitecontrol. Możesz też wstrząsnąć rzeczami za pomocą wsuwanych elementów, pasków powiadomień, przycisków i nie tylko.

Będziesz mógł dodać tyle (lub tylko kilka) pól, ile potrzebujesz, aby uzyskać kwalifikujące się zgłoszenia, a także możesz wstawić mikrokopię, aby pomóc odwiedzającym wypełnić formularz.

Zarejestruj się w Getsitecontrol już dziś, a w ciągu kilku minut uzyskasz działający formularz kontaktowy.