Jak vytvořit kontaktní formulář, který lidé skutečně odešlou

Kontaktní formulář je často poslední krok před obchodním rozhovorem. Přesto na webu bývá navržený jako povinná administrativa: dlouhý seznam polí, nejasné popisky, tlačítko Odeslat a po kliknutí žádná jistota, co se stalo.

Formulář, který lidé skutečně odešlou, musí být krátký, srozumitelný a důvěryhodný. Zároveň musí bezpečně zpracovat data, uložit poptávku do administrace a upozornit správného člověka. V tomto článku projdeme návrh od prvního pole až po CRM a následnou kontrolu.

Začněte tím, co potřebujete zjistit

Každé pole by mělo mít konkrétní důvod. Před návrhem formuláře si napište, jaké rozhodnutí podle odpovědi uděláte.

Příklad:

• Typ projektu: poptávku předáte správnému specialistovi.
• Termín: ověříte kapacitu a naléhavost.
• Rozpočet: zvolíte vhodný rozsah nebo balíček.
• Web nebo adresa projektu: můžete si připravit základní kontext.
• Popis potřeby: pochopíte problém před prvním hovorem.

Pokud podle informace nic nezměníte, pravděpodobně není nutné ji požadovat hned v prvním kontaktu. Můžete se na ni zeptat později.

Minimum pro první kontakt

U běžné firemní poptávky často stačí:

• jméno nebo název firmy,
• e-mail,
• stručný popis potřeby,
• volitelně telefon a typ projektu.

Telefon neoznačujte jako povinný, pokud ho nepotřebujete. Někteří lidé preferují e-mail a povinné telefonní číslo může zbytečně snížit počet odeslání.

Uveďte, proč se na telefon ptáte, například Telefon použijeme pouze pro rychlé upřesnění zadání. Kontext pomáhá rozhodnout se, zda údaj sdílet.

Kolik polí je příliš mnoho?

Neexistuje univerzální číslo. Důležité je množství přemýšlení, které formulář vyžaduje, a přínos pro další krok. Jedno dlouhé textové pole může být náročnější než několik jednoduchých výběrů.

Varovné signály:

• formulář žádá údaje, které jsou dostupné na webu firmy,
• všechna pole jsou povinná bez vysvětlení,
• návštěvník musí znát technické pojmy,
• rozpočet je povinný, i když je služba na začátku nejasná,
• formulář vyžaduje adresu, přestože není potřeba pro první kontakt,
• na mobilu zabere několik obrazovek bez informace o průběhu.

U delšího zadání zvažte postup ve dvou krocích. Nejprve základní kontakt, potom doplňující informace. Vždy ale vysvětlete, proč se další krok zobrazuje.

Volba mezi volným textem a výběrem

Volný text dává návštěvníkovi prostor popsat vlastní situaci, ale může být pro něj náročný. Výběr zase zjednoduší zpracování, ale nesmí ho nutit do nepřesné odpovědi.

Použijte výběr, když:

• potřebujete rozlišit několik stabilních typů projektů,
• odpověď ovlivní rozdělení nebo odhad poptávky,
• dokážete nabídnout srozumitelné možnosti.

Použijte text, když:

• každý projekt může být výrazně jiný,
• potřebujete pochopit problém vlastními slovy klienta,
• připravené možnosti by důležitou informaci zkreslily.

Často funguje kombinace: výběr typu projektu plus krátký text Co potřebujete vyřešit?.

Popisky musí být viditelné a jednoznačné

Placeholder typu Vaše jméno není náhradou za popisek. Po začátku psaní může zmizet a návštěvník později neví, co pole znamenalo. Každý ovládací prvek má mít viditelný název a případně krátkou instrukci.

Místo neurčitého:

• Jméno
• Zpráva
• Kontakt

použijte podle situace:

• Jméno a příjmení
• Pracovní e-mail
• Co potřebujete na webu nebo v systému vyřešit?
• Telefon pro případné upřesnění

W3C doporučuje popisky formulářových prvků správně spojit s příslušným polem pomocí značky label nebo odpovídajícího přístupného názvu. Pomáhá to lidem používajícím klávesnici, hlasové ovládání i čtečku obrazovky. Viz [W3C návod k popiskům formulářů](https://www.w3.org/WAI/tutorials/forms/labels/).

Instrukce dejte před problémové pole

Pokud pole vyžaduje specifický formát nebo je potřeba něco připravit, napište to ještě před odesláním.

Příklady:

• Telefon uveďte včetně předvolby, například +420 735 634 873.
• Odkaz na web vložte ve tvaru https://example.cz.
• Pokud rozsah neznáte, napište pouze orientační představu.
• Do popisu nepřidávejte hesla ani citlivé přístupové údaje.

Instrukce musí být krátká. Dlouhé vysvětlení rozdělte do nápovědy nebo samostatné informace vedle pole.

Rozpočet a termín citlivě

Rozpočet může výrazně pomoci s kvalifikací, ale zároveň působit jako bariéra. Ne každý zákazník zná cenu řešení před první konzultací.

Možnosti:

• volitelné textové pole s orientační částkou,
• výběr rozsahu s možností nevím,
• otázka na prioritu místo přímého rozpočtu,
• rozpočet až v druhém kroku po vysvětlení balíčků.

U termínu rozlišujte co nejdříve od konkrétního data. Návštěvník nemusí znát interní plánování, ale může vědět, zda řeší urgentní problém nebo přípravu na další čtvrtletí.

Tlačítko musí popsat skutečný výsledek

Text Odeslat je technicky správný, ale neposkytuje mnoho kontextu. Použijte text, který odpovídá procesu:

• Odeslat poptávku
• Nezávazně popsat projekt
• Požádat o konzultaci
• Odeslat žádost o rezervaci
• Chci připravit nabídku

Neuvádějte Získat nabídku, pokud po odeslání následuje pouze potvrzení přijetí a nabídku teprve připravíte. Tlačítko má nastavit realistické očekávání.

Vysvětlete, co se stane po odeslání

Před formulářem uveďte krátkou informaci o dalším kroku. Návštěvník může mít obavu, že po odeslání začne nevyžádaný prodejní proces.

Užitečné mikrocopy:

• Odpovíme obvykle do jednoho pracovního dne.
• Nejprve si upřesníme zadání, potom navrhneme další postup.
• Formulář je nezávazný, nabídka vzniká až po domluvě rozsahu.
• Vaše údaje použijeme pouze pro vyřízení této poptávky.

Pište jen to, co skutečně dodržíte. Pokud odpovídáte do tří dnů, neslibujte odpověď tentýž den.

Úspěch a chyba musí být vidět

Po odeslání musí návštěvník poznat, zda operace proběhla. Úspěšná hláška nemůže být pouze malá zelená ikona, která zmizí nebo se zobrazí mimo obrazovku.

Úspěšná zpráva může obsahovat:

• potvrzení přijetí,
• stručné shrnutí dalšího kroku,
• orientační dobu odpovědi,
• alternativní kontakt v naléhavém případě,
• identifikátor poptávky, pokud se s ním pracuje.

Chybová zpráva má říct, co je špatně a jak to opravit. W3C doporučuje jasné textové upozornění, které identifikuje konkrétní pole a poskytuje návod k nápravě. Neoznačujte chybu pouze červeným rámečkem.

Formulář nesmí ztratit vyplněná data

Pokud návštěvník udělá chybu v jednom poli, neměl by vyplňovat celý formulář znovu. Po neúspěšném odeslání zachovejte platné hodnoty a vraťte pozornost k prvnímu chybnému poli.

Ověřte:

• že se chyba zobrazí u konkrétního pole,
• že pole zůstane označené jako chybné i bez barvy,
• že se zachová dříve vyplněný text,
• že klávesnice nebo čtečka dostane zprávu o chybě,
• že po opravě lze formulář odeslat bez dalších překvapení.

Validace v prohlížeči nestačí

Kontrola v JavaScriptu zlepšuje použitelnost, ale nelze ji považovat za bezpečnostní ochranu. Údaje musí být zkontrolované také na serveru před uložením nebo předáním dál.

Serverová validace má ověřit například:

• povinná pole a jejich minimální délku,
• formát e-mailu a telefonu podle očekávaného použití,
• maximální délku textu a velikost požadavku,
• povolené hodnoty u selectů a checkboxů,
• typ a velikost případných příloh,
• časový limit a počet požadavků.

OWASP doporučuje serverovou validaci všech vstupů, protože klientskou kontrolu lze obejít vypnutím JavaScriptu nebo upraveným požadavkem. Více detailů uvádí [OWASP Input Validation Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html).

Ochrana proti spamu bez zbytečné překážky

Veřejný formulář bude dříve či později cílem automatizovaných odeslání. Ochrana ale nesmí legitimního člověka donutit řešit složitou hádanku na každém kroku.

Podle rizika zvažte:

• časové omezení mezi zobrazením a odesláním,
• skryté honeypot pole, které běžný člověk nevyplní,
• omezení počtu požadavků z jedné IP nebo relace,
• ověření domény a CSRF ochranu,
• reputační nebo behaviorální kontrolu,
• captcha až jako další vrstvu při podezřelém chování.

Ochranu testujte i s klávesnicí a na mobilu. Pokud zablokuje běžné uživatele, ztráta konverzí může být větší než přínos.

Souhlas a osobní údaje

Formulář obvykle zpracovává osobní údaje. Uveďte, kdo je správcem, proč údaje sbíráte, jak dlouho je uchováváte a jak vás může člověk kontaktovat ohledně svých práv. Konkrétní právní text musí odpovídat vašemu procesu a měl by být zkontrolován odborníkem.

Rozlišujte:

• zpracování nutné pro vyřízení poptávky,
• dobrovolný souhlas s marketingovým e-mailem,
• analytické nebo reklamní měření,
• předání údajů do CRM nebo externího nástroje.

Marketingový souhlas nesmí být skrytý v textu nebo předzaškrtnutý bez jasného vysvětlení. U checkboxu napište, co se bude dít a jak často může komunikace přijít.

Kam poptávku uložit

Odeslání e-mailu samo o sobě není spolehlivá evidence. Zpráva může skončit ve spamu, ztratit se v osobní schránce nebo ji nebude možné přiřadit k projektu.

Robustní tok může vypadat takto:

1. server přijme a zvaliduje data,
2. poptávka se uloží do administrace s datem a stavem,
3. vytvoří se interní identifikátor,
4. odešle se notifikace odpovědné osobě,
5. zákazník dostane potvrzení,
6. poptávka se případně předá do CRM,
7. výsledek předání se zaznamená do logu.

Pokud CRM nebo e-mail dočasně neodpoví, poptávka nesmí zmizet. Uložte ji a umožněte bezpečné opakování dalšího kroku.

Předání do CRM a ochrana proti duplicitám

CRM integrace by měla řešit identifikaci kontaktu, vlastníka, stav a další krok. Neposílejte bez rozmyslu všechna pole z formuláře.

Předem definujte:

• které údaje se předávají,
• jak se hledá existující kontakt,
• kdy vzniká nový obchodní případ,
• jak se zabrání duplicitnímu odeslání,
• co se stane při výpadku CRM,
• kdo vidí osobní údaje a jak se logují chyby.

Jedna poptávka může mít ID na webu i v CRM. Vazbu uložte explicitně. Nespoléhejte pouze na shodu jména nebo e-mailu bez pravidel, protože stejný kontakt může poslat více různých projektů.

E-mailová notifikace není potvrzení doručení

Notifikace obsluze říká, že systém vytvořil e-mail. Neříká, že ho člověk přečetl nebo že zákazník dostal odpověď.

Interní e-mail by měl obsahovat:

• identifikátor a čas poptávky,
• jméno a kontakt,
• typ projektu,
• celý popis potřeby,
• zdroj nebo stránku formuláře,
• odkaz do administrace.

Odpovědná osoba by měla mít možnost změnit stav na přijatá, rozpracovaná, čeká na podklady, nabídka, vyhráno nebo ztraceno. Díky tomu lze měřit nejen počet formulářů, ale také jejich výsledek.

Automatická odpověď zákazníkovi

Automatická odpověď má potvrdit přijetí, ne nahradit osobní reakci. Nepište, že se ozvete dnes, pokud to neumíte dlouhodobě dodržet.

Potvrzení může obsahovat:

• poděkování a identifikátor poptávky,
• stručné zopakování dalšího kroku,
• očekávanou dobu reakce,
• alternativní kontakt,
• odkaz na relevantní službu nebo článek.

Testujte také SPF, DKIM, DMARC, doručitelnost a adresu, na kterou se odpověď vrací. Technicky úspěšné odeslání neznamená, že e-mail dorazí do hlavní schránky.

Mobil a klávesnice

Formulář musí fungovat na telefonu, kde se otevře klávesnice a část obrazovky zmizí. Uživatel nesmí ztratit přehled o poli, ve kterém píše, ani o tlačítku odeslání.

Ověřte:

• typ klávesnice podle pole, například e-mail nebo telefon,
• velikost dotykových prvků,
• mezery mezi poli a tlačítky,
• zachování obsahu při otočení nebo chybě,
• správné pořadí Tab klávesy,
• zobrazení chyb nad nebo u příslušného pole.

W3C doporučuje používat jasné popisky, instrukce, validaci a zpětnou vazbu. Přístupný formulář je většinou také přehlednější formulář pro všechny návštěvníky.

Testovací scénáře

Před spuštěním a po každé větší změně projděte:

• úspěšné odeslání minimálního formuláře,
• chybějící povinné pole,
• neplatný e-mail a telefon,
• příliš dlouhý text,
• opakované kliknutí na odeslání,
• pomalé připojení nebo timeout,
• zablokovaný spamový požadavek,
• přijetí do administrace,
• odeslání interního a zákaznického e-mailu,
• předání do CRM a opakování po výpadku,
• zobrazení na telefonu a ovládání klávesnicí.

U každého testu zaznamenejte, co viděl návštěvník a co se stalo v systému. Zelená hláška na webu nestačí, pokud se záznam neuložil.

Časté chyby kontaktních formulářů

• Formulář vyžaduje telefon, rozpočet i adresu bez důvodu.
• Popisky jsou pouze v placeholderu.
• Chyby se označují jen červenou barvou.
• Po neúspěšném odeslání zmizí vyplněný text.
• Úspěšná zpráva není na mobilu vidět.
• Data se posílají pouze e-mailem bez uložení.
• Server důvěřuje validaci v JavaScriptu.
• CRM integrace vytváří duplicitní kontakty.
• Do analytiky se posílá jméno, telefon nebo celý text poptávky.
• Odpověď slibuje čas, který tým nedokáže držet.

Kontrolní seznam formuláře

• Ví každé pole, proč existuje?
• Je formulář co nejkratší pro první kontakt?
• Jsou popisky viditelné a správně spojené s poli?
• Je jasné, která pole jsou povinná?
• Je text tlačítka konkrétní?
• Ví návštěvník, co se stane po odeslání?
• Jsou úspěšné a chybové stavy srozumitelné?
• Zachovají se data při chybě?
• Probíhá validace v prohlížeči i na serveru?
• Je formulář chráněný proti spamu a CSRF?
• Ukládá se poptávka do administrace?
• Je předání do e-mailu a CRM dohledatelné?
• Neodesíláte do analytiky citlivé osobní údaje?
• Funguje formulář na mobilu, klávesnici a čtečce?

Dobré formuláře začínají důvěrou

Návštěvník odešle formulář tehdy, když rozumí, co získá, proč se ptáte a co se stane dál. Krátký formulář bez potvrzení ale nestačí. Musí být také bezpečně zpracovaný, uložený a předaný člověku, který na něj naváže.

Začněte skutečným obchodním procesem. Zkraťte formulář na potřebné údaje, doplňte jasné instrukce, otestujte chyby a nastavte spolehlivou evidenci. Teprve potom řešte barvu tlačítka nebo animaci.

Chcete formulář, který neztrácí poptávky?

Pomůžeme vám navrhnout krátký formulář, nastavit validaci a ochranu proti spamu, uložit poptávky do administrace a bezpečně je propojit s e-mailem nebo CRM.

Popište nám, co se s vašimi poptávkami děje po odeslání.

Související články

• Kam na webu umístit výzvy k akci
• Jak měřit, zda firemní web skutečně funguje
• Jak budovat důvěru na webu bez prázdných marketingových frází