Každý, doslova každý by měl mít na svých webových stránkách, ať už se jedná o blog nebo firemní stránky, kontaktní formulář. V tomto návodu si krok za krokem ukážeme, jak si jeden takový vytvořit ve WordPressu.

Formulář nejen vytvoříme, ale také si ho upravíme pro naše potřeby, upravíme jeho vzhled, zkusíme vytvořit i ochranu proti spamu a v neposlední řadě si řekneme něco o ochraně osobních dat, z důvodu nových nařízení GDPR.

Proč mít kontaktní formulář na svých WordPress stránkách

Možná si říkáte, proč vůbec mít kontaktní formulář, na stránky vložím pouze emailovou adresu. Důvodů proč je hned několik.

  • Ochrana proti spamu – Nevyžádáná pošta, nejenže je to otrava, ale může být i pekelně nebezpečná. I přes to, že se to nezdá, emailová adresa je docela cenná informace. Kde jaký spambot prohledává na internetu webové stránky právě pro emailové adresy, aby pak mohly zasílat nevyžádané reklamy, viry či podvržené maily, které mohou ohrozit nejen váš počítač, ale potažmo firmu. S kontaktním formulářem svoji adresu veřejně neukazujete.
  • Dostanete, co potřebuje – Ať to zní sebevíc zajímavě, je to prosté. Jde hlavně o informace, které z kontaktního formuláře dostanete. Pokud by vám lidé psali pouze mail, nikdy je „nedonutíte“ napsat potřebné informace – například číslo objednávky, adresu nefunkční stránky… V kontaktním formuláři si připravíte kolonky přímo, které potřebujete a bez nich nepůjde zpráva odeslat.
  • Úspora času – Nejenže pro návštěvníka stránek je formulář pohodlnější, ale také úšetří čas. Dokonce i Vám. Navštěvník nemusí otevírat novou záložku s mailem. Vy naopak můžete po odeslání zprávy z kontaktního formuláře vypsat důležité upozornění, co bude dál následovat, že odpovíte do 1 hodiny, do druhého dne či týdne, navedete ho na své video, cokoliv, a to nemusíte hnout prstem.

Už to dál nebudu prodlužovat a vrhneme se na tvorbu vlastního kontaktního formuláře, který by mohl vypadat třeba jako na obrázku níže.

Jak přidat kontaktní formulář do WordPressu

V návodu Jak si vytvořit stránky jsme si řekli, že funkce do wordpressu se přídávají pomocí takzvaných pluginů, kterých je až neskutečně mnoho. Stejně tak i pro kontaktní formulář nalezneme několik pluginů, ať už placených nebo zdarma

Mohu zmínit ty nejčastěji používané, a to jsou:

  • Contact Form 7
  • WPForms
  • Formidable Forms
  • Ninja Forms
  • Gravity Forms

My si ukážeme Contact Form 7, který já používám rozhodně nejčastěji a je naprosto zdarma.

Naistalujeme plugin Contact Form 7

Vše začneme instalací pluginu. V administraci WordPressu klikneme na Pluginy -> Instalace pluginů a zadáme do vyhledávání Contact Form 7. Na prvním místě by se měl zobrazit správný plugin a klikneme na Instalovat. Až je hotovo, plugin aktivujeme kliknutím na Aktivovat.

Kontaktní formulář

Vytvoříme si svůj první kontaktní formulář

Po instalaci pluginu v administraci nalezneme novou položku Kontakt a v ní klikneme na vytvořit formulář. V novém okně se rovnou dostaneme k tvorbě formuláře.

Na první pohled to může působit složitě, pokud jste nikdy dříve neviděli HTML, ale není to nic složitého. Rozhodně to neznamená, že byste se museli začít učit programovat. Contact Form má funkce pro automatické vygenerování kódů, co budete potřebovat.

Začneme vyplněním názvu formuláře v prvním poli. Pojmenujte si ho tak, ať při větším počtu formulářů víte, o který jde. Například „formulář v zápatí“ nebo „kontaktni formular hlavni strana“…

Cokoliv mezi značkami <label></label> tvoří každé jednotlivé políčko ve formuláři, ať už se jedná o jméno nebo email. Mezi těmito značkami máte popis a pak samotný shortcode v hranatých závorkách.

Shortcode je specifikum WordPressu, jedná o značky, které usnadňují práci. Dlouhé psaní kódu v HTML, případně i PHP je nahrazeno tímto zkráceným zápisem. Za jednoduchou značkou [gallerie id=“215″] se může skrývat zobrazení celé galerie o stovkách obrázků.

Nyní náš formulář vypadá naprosto obyčejně a bude mít kolonky pro jméno, email, předmět, zprávu a tlačítko odeslat. My ale budeme chtít třeba kolonku pro výběr ze 3 typů služby. co nabízíme.

Klikneme si v editoru, kde chceme kolonku mít, například před předmětem. Poté v horním menu se nachází několik prvků, které si můžeme do formuláře vložit. Klikneme na rozbalovací položky. Vyskočí nám nové okno, kde si nastavíme název, zda bude nutné položku vyplňit, samotné možnosti výberu, zda chceme mít i prázdnou možnost či možnost vybrat více položek.

Pro přidání do formuláře klikneme na tlačítko Vložit značku. Jak vidíte, do formuláře se vložil shortcode, který říká, ať se uživateli stránek zobrazí políčko výběru. Může si vybrat žádný nebo všechny možnosti, ale není to nutné.

Kontaktní formulář

Určitě jste si všimli, že chybí značky <label></label> s popisem daného políčka. Nelamte si hlavu a jednoduše zkopírujte původní a změňte popis.

Kontaktní formulář ve WordPressu

Nyní máme náš formulář upravený. Samozřejmě si můžete přídávat další možnosti a zkoušet, co vše formulář dovede. Pro naše potřeby to stačí.

Nastavení pluginu – jak bude vypadat odeslaný e-mail

Jakmile jsme s úpravami skončili, můžeme přejít k nastavení celého pluginu. V horním menu klikneme na E-mail. Zobrazí se nám, jak vlastně bude vypadat mail, který nám z kontaktního formuláře dorazí.

Kontaktní formulář Contact Form 7
  • Komu – emailová adresa, kam budou zprávy z formuláře odeslány, defaultně se vypní adresa administrátora, která je zadaná ve WordPressu, čárkou oddělujte více adres
  • Od – emailová adresa, ze které se bude zobrazovat, že email přišel, pro pořádek je dobré zadat adresu z vašich stránek. Můžete zde klidně napsat, že odesílá Bill Gates, ale aby se vám to nepletlo, až vám opravdu bude psát… Nebo můžete použít shortcode pro vyplněnou adresu z formuláře – [your-email]
  • Předmět – zde opět můžete napsat, co chcete. Například: Zpráva z formuláře, Kontaktní formulář a nebo použít shortcode [your-subject]
  • Obsah zprávy – samotný text zprávy, co vám příjde. Můžete použít shortcody a vypsat veškeré políčka z formuláře či přidat vlastní text

Název shortcodu si určujete sami, v předchozím okně, jste viděli [select pozdrav …], kde „pozdrav“ je název pole, který jsme si předtím sami vytvořili. Defaultně jsou ve stylu [your-name] pro jméno apod.

Nastavení zpráv formuláře

V další kolonce v horním menu jsou zprávy. Jsou to zprávy, které se nám zobrazí při odeslání formuláře. Můžou to být chybové zprávy, zprávy o odeslání, nápověda k vyplnění apod. Je jich tu docela dost, ale v podstatě nemusíte žádné měnit, jsou předvyplněny.

Kontaktní formulář ve wordpressu

Pokud však chcete třeba po odeslání něco sdělit, můžete si zprávy upravit dle libosti. Jakmile je vše upraveno, můžete ve spodní části kliknout na uložit.

Přídáváme formulář do stránek

Vše jsme si upravili, ale formulář jsme stále nepřidali do stránek. Můžeme si ho vložit vpodstatě kamkoli. A to pomocí shortcode.

Kontaktní formulář wordpress

Pod názvem našeho formuláře se nachází kód, který si zkopírujeme do příspěvku nebo stránky, kde chceme formulář mít. Také ho můžeme umístit do widgetu.

Do nového editoru stačí jednoduše zkopírovat a editor sám rozpozná, že vkládáte shortcode – zkrácený zápis, u starého to není o nic složitější – vložíte a funguje úplně stejně.

U widgetu je potřeba použít textový widget, aby se formulář zobrazil a nebyl zde vidět pouze shortcode.

Výsledný formulář by mohl vypadat nějak takto.

Výsledný kontaktní formulář

Ochrana osobních údajů

Ačkoliv by ochrana osobních údajů měla být samozřejmost, od nedávna je kvůli novému nařízení GDPR docela haló.

Musím podotknout, že mé právnícké vzdělání je na bodu mrazu, tak je důležité, případné otázky a vše kolem GDPR prodiskutovat s někým kompetentnějším!

Co tedy dělat a nedělat?!

  • Vložte do svých formulářů kolonku o souhlasu s použitím osobních dat
  • Své stránky zabezpečte pomocí SSL certifikátů (HTTPS), jak přejít na HTTPS jsem již psal.
  • Chtějte jen to nejdůležitější – pokud chcete získat jen mail, do svého email listu, je zbytečné potřebovat například datum narození, adresu apod.
  • Mějte na svých stránkách i zásady používání osobních údajů, kde máte popsáno, co přesně za údaje používáte a jak.

Ve zkratce je to k tomuto tématu vše, ale jakmile dostuji další informace k této problematice rozhodně o tom napíši článek. Do té doby doporučuji https://www.gdpr.cz/gdpr/

Ochrana proti spamu

Můžu s naprostou jistou říci, že jakmile si vytvoříte kontaktní formulář na stránkách do pár minut/hodin/dní vám začne chodit nevyžádaná pošta. Záleží na tom, jak moc stránky jsou navštěvované, kdy se k nim boti propracují.

Rozhodně můžu doporučit systém reCAPTCHA, který je naprosto spolehlivou ochranou. Stačí se registrovat na stránkách, kde se vám vygenerují klíče(site key a secret key), které poté zadáte ve WordPressu -> Kontakt -> Integrace -> reCAPTCHA a uložíte. Ochrana by se měla do formuláře automaticky vložit.

Další možností je tzv. kvíz. Ten je součástí Contact Formu. V editace vašeho formuláře v horním menu, stejně jako jsme vkládali další pole s výběrem, nalezneme položku kvíz.

Po kliknutí se nám zobrazí okno, kde nastavíme otázku a odpoveď stylem:

Hlavním městem České republiky je? | Praha

Jinými slovy napíšeme otázku, poté | a odpoveď. Můžeme jích mít více, aby se střídaly a píšeme je vždy na každý řádek.

A je hotovo!

Stejně jako předtím vložíme výsledný shortcode mezi značky <label></label>, doplníme popisek a formulář uložíme.

V dneším návodu jsme si ukázali, ja vložit kontaktní formulář do WordPressu, konkrétně Contact Form 7.

Pokud máte nějaké otázky klidně se na mě obraťte!

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *