8 Exemple frumoase de formulare de contact + Cum să le adăugați pe site-ul dvs. web

Cinci sfaturi pentru a vă arăta designul formularului de contact

Înainte de a intra în exemplele reale de formulare de contact, să luăm o ocolire rapidă și să vorbim despre ceea ce face un formular de contact excelent. Acest ocol va stabili scena pe măsură ce vom discuta despre ce face fiecare exemplu de formular de contact în secțiunea următoare.

Cel mai probabil aveți un formular de contact pentru că doriți ca oamenii să îl completeze. Deci, cum puteți face mai mulți oameni să-l folosească? Iată câteva bune practici ...

1. Comunicați clar pentru ce este formularul dvs.

Dacă aveți o afacere sau un site web ocupat, este posibil să aveți mai multe formulare de contact pentru utilizări diferite. De exemplu, poate fi:

• Formular de anchete de vânzare

• Formular de asistență pentru clienți

• Formular de comandă online

• Formular de cerere de apel invers

• Etc.

Există două abordări de bază pentru a rezolva acest lucru și le veți vedea pe ambele în exemplele din formularul de contact din viața reală de mai jos:

1. Forme separate. Creați formulare separate pentru fiecare caz de utilizare și adăugați text care să clarifice exact ce face fiecare formular.

2. Un câmp derulant. Adăugați un câmp drop-down în partea de sus a formularului care listează diferitele cazuri de utilizare și direcționează automat formularul dvs. de contact la locul potrivit.

În orice caz, utilizați etichetele formularului și textul înconjurător pentru a face vizorul dvs. scopul fiecărui formular de contact absolut clar.

2. Limitați lungimea formularului pentru mai multe conversii (dar nu uitați de calitate)

Toate lucrurile fiind egale, datele par să sugereze că formularele de contact mai lungi înseamnă mai puține trimiteri.

De exemplu, HubSpot a analizat peste 40.000 de pagini de destinație și a observat o corelație clară între ratele de conversie și numărul de câmpuri de formular.

Rata de conversie de vârf este de aproximativ trei câmpuri. Rata de conversie scade constant până la opt câmpuri de formular, înainte de aplatizare:

Sursă

Pe o notă mai anecdotică, Marketo a testat trei forme cu rezultate similare cu HubSpot:

• 5 câmpuri - rata de conversie de 13,4%

• 7 câmpuri - rata de conversie 12,0%

• 9 câmpuri - rata de conversie 10,0%

Desigur, simpla obținere a mai multor trimiteri de formulare de contact s-ar putea să nu fie obiectivul tău real, deci nu este la fel de simplu ca reducerea numărului de câmpuri din formularele tale la minimum.

De exemplu, deși este posibil să obțineți mai multe trimiteri prin reducerea câmpurilor, aceste trimiteri ar putea să nu fie la fel de calitative, deoarece bariera la intrare este atât de mică.

În general, o regulă generală bună este să eliminați toate câmpurile inutile , dar nu eliminați câmpurile care colectează informații importante doar pentru a vă scurta formularul, mai ales dacă aceste informații servesc pentru a vă califica clienții potențiali.

3. Utilizați o microcopie inteligentă pentru a explica câmpurile

Dacă formularul dvs. de contact are mai mult decât câmpurile standard „nume, e-mail, mesaj”, riscați să confundați vizitatorii.

De exemplu, dacă aveți un câmp „buget”, este posibil să nu fie clar la ce servește acel buget. Este pentru întregul proiect? Este doar pentru o parte anume?

Pentru a evita o astfel de confuzie, puteți adăuga „microcopie” la formularul dvs. de contact.

Microcopia este în esență un mic text explicativ care însoțește câmpurile formularului pentru a le face mai clare. De exemplu, consultați câmpul Volum plăți de mai jos (veți vedea și acest exemplu mai târziu):

4. Experimentați cu diferite formate

Când majoritatea oamenilor se gândesc la un formular de contact, aceștia prezintă același formular de bază încorporat pe care îl vedeți pe majoritatea site-urilor web. Dar dacă doriți să facilitați contactul cu oamenii, uneori merită să experimentați diferite metode de afișare, cum ar fi un popup sau o bară de notificare.

De exemplu, dacă aveți un buton de contact flotant pe partea laterală a site-ului dvs., poate fi excelent pentru un formular de contact de asistență. Utilizatorii vă pot contacta foarte ușor imediat ce au întâmpinat o problemă, fără a le cere să vă caute pagina de contact:

5. Spune oamenilor următorii pași și stabilește-ți așteptările

Proiectarea formularului dvs. de contact nu este finalizată după ce oamenii au accesat Trimiteți!

Pentru a oferi o experiență mai bună utilizatorului, doriți să spuneți oamenilor exact ce se va întâmpla în continuare și cât va dura. De exemplu…

• Răspundeți la toate întrebările sau doar la unele?

• Cât timp îți va lua să răspunzi?

• Vei răspunde prin e-mail sau prin altă metodă?

Dacă stabiliți așteptări clare, vizitatorii dvs. nu se vor întreba ce se întâmplă și dacă formularul dvs. chiar funcționează.

Opt exemple excelente de formulare de contact de pe site-uri web reale

Acum că cunoașteți cele mai bune practici, să analizăm câteva modele de formulare de contact din lumea reală pentru a vă inspira propriile și pentru a vă arăta aceste bune practici în acțiune.

1. Dungi

Formularul de contact pentru vânzări de la Stripe este un exemplu excelent despre cum, uneori, colectarea unor informații suplimentare poate face ca formularele dvs. de contact să genereze clienți potențiali mai calificați (chiar dacă s-ar putea să scadă puțin rata de conversie de bază).

În plus față de câmpurile de informații standard, Stripe adaugă un câmp Volum plăți, astfel încât să poată înțelege mai bine calitatea potențială a fiecărui client potențial.

Dincolo de asta, există câteva alte alegeri de design frumoase, inclusiv:

• Dovadă socială - acele sigle din lateral adaugă dovezi sociale afișând toate afacerile de succes care utilizează Stripe.

• Microcopie - termenul „Volumul plăților” ar putea fi puțin confuz, așa că Stripe adaugă câteva microcopii utile care explică modul de completare a câmpului.

• Scop - Stripe arată foarte clar că acest formular este doar pentru cereri de vânzări. Acest lucru asigură faptul că nu îi determină pe oameni să încerce să-l folosească pentru asistență sau alte utilizări non-vânzări.

2. Getsitecontrol

Aici, la Getsitecontrol, gestionăm proiectarea formularului nostru de contact puțin diferit.

În loc să creăm o pagină dedicată „Contactați-ne” pe care vizitatorii trebuie să o navigheze, includem pur și simplu un link Contactați-ne care deschide o fereastră pop-up chiar acolo - apoi nu este necesară reîncărcarea paginii.

Acest lucru este foarte convenabil pentru oameni, deoarece pot ...

• accesați formularul nostru de contact din orice pagină de pe site,

• trimiteți un mesaj fără a întrerupe orice altceva făceau (cum ar fi citirea acestei postări de blog!).

Formularul de contact Getsitecontrol este simplu și ușor de completat. În plus, comunică în mod clar următorii pași după ce oamenii trimit formularul, împreună cu un CTA pentru a verifica blogul Getsitecontrol.

3. Kinsta

Kinsta are o singură pagină „Contactați-ne” care ghidează automat utilizatorii către formularul de contact adecvat, fără a le cere să reîncarce pagina.

Kinsta listează cele mai populare cinci solicitări de contact:

1. Prețuri sau planuri

2. Caracteristici sau informații tehnice

3. Solicitați o migrare sau orice întrebare conexă

4. Postare de invitat, postare sponsorizată sau solicitare de backlink

5. Altceva

Când utilizatorii își selectează obiectivul, Kinsta afișează fie un formular de contact personalizat, fie un mesaj.

Acest lucru permite Kinsta să colecteze exact informațiile de care au nevoie, fără a împovăra vizitatorii cu câmpuri străine.

De exemplu, în formularul de contact pentru prețuri sau planuri , Kinsta adaugă câmpuri suplimentare pentru a înțelege câte site-uri web și vizitatori doresc să găzduiască persoana respectivă, dar acele câmpuri nu apar în formularul „Orice altceva”.

Kinsta stabilește, de asemenea, așteptări clare în partea de sus - „Vom fi în contact într-o zi lucrătoare”.

4. Selectarea alegerii

Choice Screening are un formular de contact lung . La prima vedere, ați putea crede că acest lucru va distruge ratele de conversie ale formularului. Și acest lucru este un fel de adevărat - Screening-ul alegerii va primi, fără îndoială, mai puține trimiteri de formulare decât ar primi cu un formular mai scurt.

Dar să vorbim despre de ce uneori este ok și de ce acesta este un exemplu excelent de formular de contact.

Choice Screening operează într-un spațiu foarte specializat, de la o companie la alta. Încearcă să obțină clienți potențiali calificați care se vor transforma în clienți de lungă durată, nu doar în formularele de contact.

Cu lista sa detaliată de servicii și numeroase casete de selectare, formularul va elimina persoanele care nu sunt încă siguri de ceea ce doresc și vor permite doar clienților potențiali calificați să aibă șanse mari să se transforme în clienți.

Ați putea spune că Choice Screening își examinează potențialii clienți cu acest formular de contact!

5. Joel Klettke / Business Casual Copywriting

Joel este un redactor profesionist, așa că puteți paria că proiectul formularului său de contact și copierea vor fi la îndemână.

Forma lui Joel în sine este simplă, cu câmpurile standard plus câteva câmpuri suplimentare de calificare pentru bugetul unei persoane. Totul se întâmplă lângă formular care face din acest exemplu un formular de contact atât de bun.

În acest text, Joel face o treabă excelentă de a stabili așteptări și de a-și califica clienții potențiali. De asemenea, el alungă în mod intenționat clienții cu buget redus discutând tarifele sale minime. În timp ce Joel ar putea elimina aceste mențiuni pentru a obține o rată de conversie inițială mai mare, acest lucru ar duce de fapt la un procent mai mic de clienți potențiali calificați și ar sfârși prin a pierde timpul lui Joel.

6. Neil Patel

Neil Patel conduce unul dintre cele mai populare site-uri de marketing digital din lume, astfel încât să puteți fi destul de sigur că primește o mulțime de trimiteri de formulare de contact.

Pentru a ajuta la trimiterea acestor trimiteri la locul potrivit, Neil include un meniu derulant „Aș dori să vorbesc despre” , unde oamenii pot alege dintr-o gamă prestabilită de opțiuni. De asemenea, el folosește niște microcopii în caseta de substituent pentru a implora oamenilor să-și păstreze mesajele scurte și la obiect.

Acesta este simplu - dar uneori simplu este tot ce aveți nevoie în proiectarea formularului de contact.

7. Focus Lab

Ok, acesta este distractiv, capricios și cu siguranță nu va funcționa pentru fiecare afacere. Dar dacă vă aflați într-un spațiu creativ (care este Focus Lab), crearea unui design capricios de formular de contact ca acesta poate arăta că sunteți capabil să gândiți în afara casetei.

În loc să creeze o formă tradițională, Focus Lab folosește mai mult o abordare în stil Mad Libs în care vizitatorii își introduc informațiile într-un paragraf existent. Folosind această abordare, Focus Lab este, de asemenea, capabil să colecteze mai multe informații (cum ar fi obiectivele și bugetul) fără aspectul impunător pe care l-ar putea avea un design de formular de contact mai tradițional.

8. CAMICB

CAMICB, prescurtare pentru Community Association Managers International Certification Board, oferă certificare pentru asociațiile comunitare din SUA.

Aspectul notabil al formularului de contact CAMICB este că folosește o abordare hibridă popup / „Contactați-ne”. Când utilizatorii aterizează pe pagina Contactați-ne , site-ul web CAMICB deschide instantaneu un simplu formular de contact pop-up în care vizitatorii își pot trimite mesajele.

Cu doar trei câmpuri, CAMICB își păstrează forma scurtă și la obiect. Apoi, abordarea pop-up creează o interfață frumoasă, fără distrageri, în care accentul este în întregime pe formular.

Acest lucru face ca trimiterea unei anchete să fie cât mai lipsită de fricțiuni.

Și pentru a face lucrurile și mai ușoare , CAMICB afișează, de asemenea, un formular de contact glisabil pe care utilizatorii îl pot accesa în subsolul său:

Cum să creați propriul design de formular de contact personalizabil

După ce răsfoiți cele opt exemple de formulare de contact, probabil că aveți o grămadă de idei care se ridică în jurul modului în care puteți aplica aceste principii propriilor modele de formulare de contact.

Dacă doriți să începeți, [Getsitecontrol] (/ feedback-popup / vă poate pune în funcțiune în cel mai scurt timp).

Spre deosebire de majoritatea soluțiilor de formulare de contact, Getsitecontrol vă permite să alegeți dintre patru poziții flexibile și zeci de șabloane pentru formularul dvs. Puteți crea un popup tradițional precum cel pe care l-ați văzut cu CAMICB și site-ul web Getsitecontrol. Sau, puteți agita lucrurile cu diapozitive, bare de notificare, butoane și multe altele.

Veți putea adăuga cât mai multe (sau cât mai puține) câmpuri de care aveți nevoie pentru a obține trimiteri calificate și puteți, de asemenea, să inserați o microcopie pentru a ajuta vizitatorii să vă completeze formularul.

Înscrieți-vă astăzi la Getsitecontrol și puteți avea un formular de contact funcțional în doar câteva minute.