WordPress návody

Jak ve WordPress vytvořit a nastavit kontaktní formulář s antispam ochranou pomocí pluginu WPForms

WPForms
Autor příspěvku Tomáš Cirkl

Formuláře jsou důležitou součástí webových stránek. Slouží k jednoduchému kontaktování správce nebo majitele stránek návštěvníkem. WordPress sám o sobě formuláře vytvářet neumí a tak je třeba si pomoci pluginem.

Contact Form by WPForms je jednoduchý, uživatelsky přívětivý WordPress plugin, který umožňuje do stránek vkládat vlastní formuláře. Plugin je v základní verzi, která je na běžné formuláře naprosto dostačující, zdarma.

Najdete ho v oficiálním katalogu pluginů a můžete jej nainstalovat přímo z WordPress administrace.

WPForms plugin

WPForms plugin

Po instalaci a aktivaci přidá plugin do administrace novou položku WPForms.

Tvorba formuláře pomocí WPForms

Pro vytvoření nového formuláře běžte do WPForms → Add new.

Dostanete se na obrazovku, kde si můžete zadat jméno vytvářeného formuláře (pole Form name) a vybrat jak chcete začít:

  • Blank Form – prázdný formulář (pole formuláře si vložíte sami).
  • Simple Contact Form – jednoduchý kontaktní formulář (obsahuje předpřipravené pole Jméno, Příjmení, E-mail a Zpráva).
  • Newsletter Singup Form – formulář pro vložení e-mailu (obsahuje předpřipravené pole Jméno, Příjmení, E-mail).
  • Suggestion Form – rozsáhlejší formulář pro vložení návrhu.

Všechny předpřipravené vzory lze samozřejmě plně upravit.

Začněte vložením jména formuláře do pole Form name a z nabídky vyberte Simple Contact Form.

Vytváření formuláře WPForms

Vytváření formuláře WPForms

Dostanete se na stránku úpravy předpřipraveného formuláře. V pravé části vidíte náhled, jak bude formulář vypadat. Protože je v angličtině, bude třeba jeho pole přeložit.

Na náhledu formuláře klikněte na pole a v levé části se vám otevře jeho nastavení.

Nastavení pole formuláře

Nastavení pole formuláře

Především by vás měly zajímat položky:

  • Label – název pole ve formuláři.
  • Required – zaškrtnutím označíte položku jako povinnou a návštěvník ji musí vyplnit, jinak nepůjde formulář odeslat.

Postupně upravte label u všech položek formuláře.

Přidání pole do formuláře

V případě, že chcete do formuláře přidat další pole, tak to uděláte tak, že v levém horním rohu kliknete na záložku Add Fields.

Zobrazí se vám nabídka všech dostupný polí pro formulář.

Políčka formuláře, které je možné použít ve verzi zdarma:

  • Single line text – pole o jednom řádku.
  • Paragraph text – větší pole pro zadání delšího textu.
  • Dropdown – rozbalovací nabídka.
  • Multiple choice – přepínací možnosti.
  • Checkboxes – zaškrtávací políčka.
  • Name – speciální pole pro zadání jména.
  • E-mail – speciální pole pro zadání e-mailové adresy.
Standardní pole formuláře

Standardní pole formuláře

Pro přidání políčka do formuláře stačí chytnou vybraný typ pole a přetáhnout ho na jeho místo do náhledu formuláře. Pole se automaticky přidá a vy jej můžete začít upravovat podle svých potřeb.

Smazání pole formuláře

Pro smazání políčka formuláře musíte jednou kliknout nebo najet myší na jeho náhled ve formuláři.

V pravé části se zobrazí jeho nabídka. Pro smazání pole stačí kliknout na červený křížek a potvrdit smazání.

Smazání pole formuláře

Smazání pole formuláře

Nastavení formuláře

V případě, že máte upravený formulář tak, jak chcete, je třeba ještě přeložit tlačítko Submit, nastavit odesílací informace a e-mail, na který se bude formulář odesílat.

Na levé straně obrazovky je černá lišta s položkou Settings, klikněte na ni.

WPForms Settings u formuláře

WPForms Settings u formuláře

Najdete zde tři podsekce:

  • General – obsahuje základní nastavení formuláře.
  • Notifications – nastavení generovaného e-mailu.
  • Confirmation – nastavení zprávy po odeslání formuláře.

Záložka General

  • Form Name – jméno kontaktního formuláře.
  • Form description – popisek formuláře.
  • Form CSS Class – možnost vložení vlastní třídy pro formulář.
  • Submit Button Text – text tlačítka pro odeslání.
  • Submit Button Processing Text – text, který se zobrazí při odesílání formuláře.
  • Submit Button CSS Class – pole pro přidání vlastní třídy k odesílacímu tlačítku.
  • Enable anti-spam honeypot – jedná se o ochranu proti spamovému odesílání formuláře. Funkce nevyžaduje žádné další nastavení.

Minimálně upravte text odesílacího tlačítka a text, který se zobrazí při odeslání.

General

General

Záložka Notifications

  • Notifications – zapne nebo vypne funkci odesílání formuláře do e-mailu.
  • Send To Email Address – e-mailová adresa, kam se formulář odešle ({admin_email} je proměnná za administrační e-mail ve WordPress).
  • Email Subject – předmět e-mailu.
  • From Name – jméno odesílatele e-mailu.
  • From Email – odchozí e-mailová adresa.
  • Reply-To – nastavená e-mailová adresa pro odpověď.
  • Message – tělo e-mailu ({all_fields} je proměnná pro všechny zadané pole formuláře).

Obvykle zde stačí jen upravit předmět e-mailu.

Notifications

Notifications

Záložka Confirmations

Zde najdete, co se stane po odeslání formuláře.

Na výběr máte ze tří možnosti u pole Confirmation Type:

  • Message – zobrazí se text.
  • Show page – přesměrování na stránku ve WordPress.
  • Go To URL – přesměrování na zadanou URL.

Podle vybrané možnosti zadejte text, vyberte stránku nebo vložte URL.

Confirmations

Confirmations

Jakmile budete mít vše nastaveno, tak v pravém horním rohu klikněte na tlačítko Save a formulář uložte.

Překlad chybových hlášek

Poslední věcí, kterou bude u formuláře třeba nastavit, je překlad anglických frází zobrazených při špatném zadaní pole.

Nastavení překladů najdete v WPForms → Settings a záložce Validation.

Hlášky, které můžete nastavit jsou:

  • Required – Toto pole je povinné.
  • Website URL – Prosím, zadejte platnou URL.
  • Email – Prosím, zadejte platný e-mail.
  • Number – Prosím, zadejte číslo.
  • Confirm Value – Zadaná hodnota není správná.

Nastavení se aplikuje pro všechny vytvořené formuláře.

Překlad chybových hlášek WPForms

Překlad chybových hlášek WPForms

Vložení formuláře do stránek

Vytvořený formulář vložíte do stránky pomocí shortcodu.

Shortcode najdete:

  • při úpravě formuláře v pravém horním rohu pod tlačítkem Embed,
  • ve výpisu všech formulářů v administraci v sekci WPForms → All forms a sloupečku shortcodes.
Embed

Embed

Přehled formulářů

Přehled formulářů

Zkopírovaný shortcode ve tvaru [wpforms id="123456"] stačí už jen vložit od obsahu na místo, kde chcete formulář zobrazit.

Formulář obsahuje předpřipravené styly a je responzivní, takže není ani nutné jej speciálně upravovat.

Vložený formulář do stránky

Vložený formulář do stránky

Nyní máte vše hotové a na stránce vložený vlastní kontaktní formulář.

WPForms PRO

V případě, že chcete o pluginu zjistit více, podívejte se na jeho oficiální stránky.

Mezi jeho nejlepší funkce, které obsahuje PRO verze určitě patří:

  • Ukládání odeslaných formulářů do databáze
  • Možnost tvorby vícekrokových formulářů
  • Podmíněná logika
  • Nahrávání souborů
  • Šablony formulářů
  • a spoustu dalšího…

Cena začíná od 79 USD, ale často na jeho nákup nadejte slevový kupón.

Seznam všech PRO funkcí a rozšíření najdete na této stránce.

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

3 komentáře

  • Dobrý večer, používám teď jako plugin pro formuláře Contact Form 7. Pokud bych přešla na WPForms, budu potřebovat vše nejspíš znovu nastavovat, že? A věděl byste, jestli je možné použít WP Forms i v Event Manageru?
    Děkuji, Lenka

Zanechat komentář

25% sleva na Divi šablonu a členství u Elegant Themes

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 3 roky. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.