Kontaktní formulář na WordPress

Dneska si ukážeme jak si můžete přidat jednoduchý kontaktní formulář na WordPress. Využijeme k tomu plugin WPForms Lite v kterém si jej vytvoříme, následně vložíme jeho shortcode na samostatnou stránku. Existuje samozřejmě více možností jak to udělat, ale protentokrát zvolíme tu nejjednodušší.

Plugin WPForms Lite

Hlavní výhodou pluginu WPForms Lite, je že se s ním dobře pracuje. Jedná se o jednoduchý drag & drop, kde si jen do formuláře přetáhnete co potřebujete. Většina věcí už je přednastavena pro správné používání. Samozřejmě si s ním můžete více pohrát a individuálně vše nastavit. Pokud budete potřebovat něco více, je k dispozici i placen verze WPForms Pro. Pro jednoduchý kontaktní formulář nám však bude stačit.

kontaktni-formular-na-wordpress-01

 

Vybral jsem jej také z důvodu, že jej tvůrci pravidelně aktualizují a starají se o něj.

Instalace pluginu

Doporučuji využít klasický instalátor ve WordPress a vše si stáhnout z WordPress.org. Klikněte v levé luště na PluginyInstalace Pluginů a dejte vyhledat WPForms Lite. Následně klikněte na instalovat.

kontaktni-formular-na-wordpress-02

Instalace několik vteřin trvá. Pokud proběhne úspěšně klikněte na Aktivovat plugin.

kontaktni-formular-na-wordpress-03

Nepředpokládám, že by došlo k chybě. Celý plugin není zas tak velký ani nespotřebovává moc paměti. U českých webhostingů s ním nebudou problémy.

Vytvoření kontaktního formuláře

Po aktivaci pluginu WP Forms Lite se dostanete na uvítací obrazovku. Jak si můžete přečíst, sami tvůrci označují WPForms za nejjednodušší plugin pro začátečníky, kteří chtějí kontaktní formulář pro WordPress. Maskot pluginu vás kdyžtak provede tutoriálem 🙂

Ale teď jej nepotřebujeme. Pro vytvoření kontaktního formuláře stačí kliknout na WPForms – Add News. Popřípadě přímo z levého menu administrace.

kontaktni-formular-na-wordpress-04

WPForms má pro vytváření formulářů vlastní přehlednou administraci. Je poměrně přehledná. V našem případě využijeme předpřipravenou šablonu a klikneme na Simple Contact Form.

kontaktni-formular-na-wordpress-05

V levé části vidíme různé elementy, které si můžeme do našeho kontaktního formuláře přidat. Od textů, přes zaškrtávací políčka (checkbox) až po multivolbu (dropdown). Všechno tohle nám může pomoct vytvořit například jednoduchý objednávkový formuláře, ale to třeba příště.

V pravé části je už náhled na náš kontaktní formulář. Na jednotlivé části můžeme kliknout a upravit je.

kontaktni-formular-na-wordpress-06

Například když najedete na plochu kolem Name*, podbarví se a objeví Click to Edit. Drag to reorder. Můžete jednotlivé části přetahovat a editovat. V našem případě klikněte.

Objeví se vám možnost změnit obsah této části formuláře. Já jsem změnil Name* v Label na Kdo mě kontaktujte. Ve Format nastavil ať se jméno a příjmení spojí dohromady (Simple). Klidně si takto upravte i další části formuláře. Pokud nechcete, aby je uživatel musel vyplnit, tak zrušte zaškrtnutí u Required. Zároveň s tím zmizí i červená hvězdička.

kontaktni-formular-na-wordpress-07

Název formuláře a tlačítko pro odeslání se mění v Settings (tlačítko úplně v levém slupci) v General. Zde si pojmenujte kontaktní formuláře a přejmenujte tlačítko ze Submit například na Pošlete mi vzkaz.

kontaktni-formular-na-wordpress-08

Formulář je vytvořený, ale ještě je třeba jej nastavit.

Nastavení kontaktního formuláře

V Settings v Notification je důležitá část. Musíte si totiž vybrat, kam se bude formulář posílat. Vše je přednastaveno tak, aby vám přišla informace na email administrátora WordPress {admin_email}. Já si tam nastavil vlastní a trochu počeštil. Samozřejmě můžete si s tím daleko více pohrát. Možností je neomezeně.

kontaktni-formular-na-wordpress-09

A zbývá nastavit, co se stalo po odeslání zprávy. Na výběr máte zobrazení zprávy (Message), ukázat jinou stránku (Show Page) anebo přesměrování (Go to URL (Redirect)). Já zvolil jen vypsání zprávy.

kontaktni-formular-na-wordpress-10

Tak a je hotovo. Stačí už jen uložit kliknutím na oranžové tlačítko SAVE.

Vložení kontaktního formuláře do stránky

Po kliknutí na SAVE se formulář uloží potřebujte ale znát shortcode pro jeho vložení na samostatnou stránku. Klikněte na </>EMBED. Objeví se vám shortcode. Ten si zkopírujte.

kontaktni-formular-na-wordpress-11

Teď už jen stačí vytvořit klasickou stránku a vložit do ní shortcode. Samozřejmě můžete jí doplnit textem, obrázky, prostě vším co WordPress umožňuje.

kontaktni-formular-na-wordpress-12

Stránku pak stačí vložit do menu. Popřípadě můžete shotcode dát i do textového widgetu, ale WPForms má pro vás připravený speciální widget. Takže kontaktní formulář může být i v postranním sloupci.

Výsledek

Tohle je výsledek. Speciální stránka s kontaktem. Pokud chcete políčka zvětšit, zmenšit anebo předvyplnit textem stačí přejít do administrace, tam kde jste si formulář vytvořili, a u nich najdete Advanced Options (viz. obrázek 7). Tam také můžete využít CSS.

kontaktni-formular-na-wordpress-13

Takto vypadá vzkaz po úspěšném odeslání formuláře. Na stránce by asi bylo dobré vypnout ikonky sociálních sítí a samozřejmě komentáře. Ale s tím už si jistě pohrajete.

kontaktni-formular-na-wordpress-14

To by mělo být vše. Máte hotový a funkční kontaktní formulář pro WordPress.

Výhody kontaktního formuláře

Většinou si na stránky dáváme kontakt formou emailové adresy, na kterou nám mohou návštěvníci napsat. Problém je, že ne vždy má návštěvník možnost poslat nám email. Například je zrovna na mobilním telefonu. Než se dostane domů, může jeho nadšení vyprchat a přijdete například o zakázku.

Ne každý má také rád vystavený svůj email veřejně na webu. Po čase jej získá nějaký robot a začne vám chodit spam.

Asi největší výhodou je, že ve formuláři si můžete nastavit formát emailu, který dorazí. Snadno si můžete vytvořit filtr, který reakce bude dávat do zvláštního adresáře.

Možné problémy

Kontaktní formulář se vám odešle jako email přes PHP funkci mail(). Pokud tuto funkci máte na webhostingu zakázanou anebo omezenou je třeba využít služby třetí strany. K WPForms se dají doinstalovat addony (plugin). Jeden z nich je i napojení na MailChimp, což je skvělá služba na rozesílání newsletterů. V kombinací s WPForms jsem jí však zatím nezkoušel.

WPForms umožňuje zapnout ochranu reCaptcha proti robotům, kteří by dokázaly formulář vyplnit.

Narazil jsem i na problém u pluginů na zrychlování načítání stránek. Konkrétně Speed Booster Pack při nastavení Javascriptu na defer neumožňoval odeslat zprávu (ochrana proti spamu nefungovala). Je třeba dát WPForms výjimku.

Autor Ginoza

Pracuji na zákaznické podpoře jednoho známého webhostingu.

Napsat komentář

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