Contact Form 7 – formuláře pro WordPress

Tématem tohoto článku je popis mimořádně užitečného a populárního pluginu Contact Form 7 pro redakční systém WordPress.

Libovolné webové stránky, ať už běží na WordPressu či na nějakém jiném publikačním systému, se typicky neobejdou bez webových formulářů, které umožňují návštěvníkům sdělit svůj názor na daný web, zkontaktovat provozovatele webu, popr. něco objednat atd. A to právě umožňuje plugin Contact Form 7 pro WordPress.

Stažení a instalace pluginu

Předpokládám, že zde není potřeba se příliš rozepisovat. Plugin Contact Form 7 stáhněte z webové adresy http://wordpress.org/extend/plugins/contact-form-7/ (v době psaní tohoto článku byla aktuální verze pluginu 2.0.7), uložte na váš disk, rozbalte, přes FTP nahrajte do složky wp-content/plugins a ve WordPressu aktivujte, nebo jej stáhněte a nainstalujte prostřednictvím WordPressu samotného (Pluginy -> Instalace pluginů); tato možnost existuje tuším od verze 2.8 WordPressu.

Jakmile máte plugin aktivovany, povšimněte si, že v levém sloupci administračního rozhraní WordPressu přibyla nová paletka s názvem Kontakt (ano, plugin Contact Form 7 podporuje i čestinu), viz následující obrázek.

Jak plugin funguje?

Nyní je ten pravý čas si říci něco o tom, jak plugin Contact Form 7 vlastně funguje. Je to velmi jednoduché – v podstatě lze říci, že v paletce Kontakt kliknete na odkaz „Přidej nový“, formulář nějak pojmenujete (pro účely tohoto článku jsem zvolil název Kontakt), nadefinujete si vzhled formuláře (tj. jednotlivá políčka formuláře, která budete chtít používat), specifikujete podobu e-mailu, který vám po odeslání takového formuláře přijde (popřípadě rovněž podobu e-mailu, který přijde danému uživateli, který formulář odeslal), a vše uložíte. Plugin Contact Form pak vygeneruje jednoduchý kód ve tvaru contact-form X "název-formuláře", který jednoduše vložíte do článku, stránky WordPressu, nebo widgetu. (Poznámka: tentou řádek kód je ve skutečnosti ještě obklopen hranatými závorkami [ a ]. Tyto hranaté závorky ovšem nelze v ukázce kódu použít, protože interval.cz tento plugin rovněž používá, čímž by se snažil vložit neexistující formulář).

Tvorba vlastního kontaktního formuláře

Pro účely tohoto článku si stanovíme následující zadání – na stránkách chceme mít klasický kontaktní formulář obsahující textové políčka pro zadání jména, příjmení a kontaktního e-mailu. Samozřejmě nesmí chybět textové pole pro samotný vzkaz a jako perličku na závěr doplníme triviální matematickou otázku, která v tomto případě poslouží jako jednoduchá captcha, abychom se vypnuli spamu.

Jdeme na to!

V administraci WordPressu klikněte v levém sloupci na paletku Kontakt (viz předchozí obrázek) a klikněte na červeně zvýrazněný odkaz „Přidej nový“. Následně byste měli vidět něco podobného, jako na následujícím obrázku:

Formulář prvně pojmenujeme. Klikněte na slovo Untitled a vložte místo něj slovo kontaktni-formular. Pak klikněte na tlačítko „Uložit“. Plugin vám okamžitě vygeneruje kód pro pozdější vložení do článku, stránky nebo widgetu WordPressu. V našem případě vypadá kód takto (opět bez hranatých závorek na začátku a na konci řádku):

contact-form 3 "kontaktni-formular"

Pole s názvem Formulář (viz obrázek výše) je rozděleno do dvou částí – levá část obsahuje kód formuláře, pravá slouží pro jeho vytváření. V levé části pole smažte kód výchozí formuláře, abychom mohli společně vytvořit nový. (Pravda, námi vytvářený kód bude prakticky stejný s tím výchozím kódem, ale jak jinak se chcete naučit vytvářet nové vlastní formuláře?) Jak jsem napsal dříve, náš ukázkový formuláře bude obsahovat políčka pro:

• jméno
• příjmení
• kontaktní e-mail
• vzkaz
• matematickou otázku (taková jednoduchá captcha)

Nyní klikněte na rozbalovací prvek „Generuj tag“ a z nabídky vyberte „Textové pole“. Následně byste měli vidět dialog jako na tomto obrázku.

Zatrhněte volbu „Vyžadované pole“ a do políčka „Jméno“ napište jmeno-navstevnika, čímž budeme schopni sami identifikovat účel tohoto políčka. Ostatní parametry můžete nechat prázdné, ale povšimněte si, že můžete specifikovat například i identifikátor (id) nebo třídu (class), pokud chcete formulář ostylovat pomocí CSS. Poté zkopíruje vytvořený kód pro toto textové pole formuláře do levé části formuláře. (Tento kód naleznete ve spodní části tohoto dialogu, kde se průběžně vytváří.)

Tento postup následně zopakujte pro všechna políčka našeho formuláře. Políčko pro příjmení vytvořte úplně stejně, pouze jej pojmenujte jako prijmeni-navstevnika. Pro políčko s e-mailem vyberte v rozbalovacím menu „Generuj tag“ volbu „E-mailové pole“ a pojmenujte jej obligátně jako email-navstevnika. Pro políčko pro vzkaz vyberte volbu „Pole pro psaní delšího textu (textarea)“ a pojmenujte jej jako vzkaz. Zatím prosté, že? Ale co s naší matematickou otázkou?

Pro ni v rozbalovacím menu „Generuj tag“ zvolte volbu „Příklad“ a pojmenujte ji jako matematicky-priklad. V sekci „Příklady“ pak vložte znění samotného příkladu, který má uživatel spočítat. (Uvědomte si ale, že bez správně odpovědi nebude možné formulář odeslat!). Pro specifikaci příkladu použijte následující jednoduchou syntaxi: příklad|odpověď. Tj. pokud chcete, aby uživatel spočítal, kolik je 10+5, vložte toto: Kolik je 10+5?|15. Volbu „Příklad“ lze samozřejmě použít i jiným způsobem než pro matematické příklady, například takto: Jaká je typická barva pomeranče?|oranžová (kde se ptáme na oranžovou barvu pomeranče), nebo Vložte tajné heslo|123456789 (kdy umožníme odeslat formulář pouze těm uživatelům, kteří znají tajný kód, v tomto případě 123456789).

Nakonec samozřejmě nezapomeňte na odesílací tlačítko formuláře – v rozbalovacím menu „Generuj tag“ se jedná o položku „Potvrzovací tlačítko“ – zde vyplňte pouze políčko „Popis“, například jako Odeslat). Pokud jste všechno udělali správně, měli byste mít v levé části formuláře tento kód:

[text* jmeno-navstevnika"]
[text* prijmeni-navstevnika]
[email* email-navstevnika]
[textarea* vzkaz]
[quiz matematicky-priklad "Kolik je 10+5?|15"]
[submit "Odeslat"]

Každou z těchto značek následně vložíme do značky <p&gtp>, aby formular alespoň trochu vypadal k světu a samozřejmě doplníme i textový popis formulářových prvků

<p>Jméno: [text* jmeno-navstevnika]</p>
<p>Příjmení: [text* prijmeni-navstevnika]</p>
<p>E-mail: [email* email-navstevnika]</p>
<p>Vzkaz: [textarea* vzkaz]</p>
<p>[quiz matematicky-priklad "Kolik je 10+5?|15"]</p>
<p>[submit "Odeslat"]</p>

Nyní máme formulář hotový, takže můžeme přejít k funkcionalitě, která zajistí přeposlání obsahu formuláře na náš e-mail. V sekci „Mail“ vyplňte svou e-mailovou adresu do políčka „Komu“. Do políčka „Od“ vložte toto: [email-navstevnika]

Zde malé odbočení – názvy jednotlivých formulárových políček, které jsme prostřednictvím tohoto pluginu vytvořili, například [email-navstevnika] či [jmeno-navstevnika] lze označit za „zástupce“, kteří se nahrazují za skutečné hodnoty, které byly zadány uživatelem do formuláře na webu. Když tedy do políčka „Od“ sekce „Mail“ pluginu vložím zástupce [email-navstevnika], plugin Contact Form 7 tohoto zástupce nahradí skutečným e-mailem uživatele, který vyplnil a odeslal formulář na našich stránkách.

Do políčka „Předmět“ vložte předmět zprávy. Ja jsem vložil obyčejný a nezáživný text Zpráva z webových stránek. Tato zpráva se použije jako předmět e-mailu, který vám přijde, když nějaký návštěvník vašich stránek vyplní a odešle formulář.

V tuto chvíli máme specifikováno, na jakou adresu přijde e-mail (tj. malbek@centrum.cz), od koho bude odeslán (bude uveden e-mail uživatele, který odeslal formulář), a jaký bude předmět e-mailu (tj. „Zpráva z webových stránek“). Ale zatím chybí to nejdůležitější – obsah samotného formuláře. To uděláme následovně – do políčka „Zpráva“ vložte následující kód:

Jméno: [jmeno-navstevnika]
Příjmeni: [prijmeni-navstevnika]
E-mail [email-navstevnika]
Vzkaz: [vzkaz]

Jak je vidět, nevkládáme nic jiného než ony výše zmiňované zástupce, kteří se nahradí za skutečný obsah formuláře. Sekce „Mail“ by v tuto chvíli měla vypadat následovně:

To bychom měli. Co dál? Je slušné zajistit, aby obsah odeslaného formuláře přišel nejenom na náš e-mail, ale také na e-mail uživatele, který formulář vyplnil a odeslal, jako potvrzení toho, že formulář byl odeslán úspěšně. To uděláme velmi jednoduše. Zatrhneme políčko „Použij mail (2)“ v sekci „Mail (2)“, čímž se nám zpřístupní možnosti jako v předchozí sekci „Mail“.

Zde do políčka „Komu“ vložte [email-navstevnika], do políčka „Od“ vložte svůj e-mail (v mém případě se jedná o e-mail malbek@centrum.cz) a jako „Předmět“ vložte text „Váš formulář byl úspěšně odeslán“. Do políčka „Zpráva“ pak vložte stejný kód, jaký jste vložili do předchozího pole „Zpráva“ v sekci „Mail“ a doplňte nějaký děkovný text:

Váš vzkaz byl úspěšně odeslán. Děkujeme.
Jméno: [jmeno-navstevnika]
Příjmeni: [prijmeni-navstevnika]
E-mail [email-navstevnika]
Vzkaz: [vzkaz]

A takto by to mělo vypadat:

Nyní jsme v podstatě se vším hotovi, protože zbývá jediné – kliknout na tlačítko „Uložit“ na konci stránky, čímž uložíme právě vytvořený formulář a zkopírovat zástupce contact-form 3 "kontaktni-formular" (opět zde chybí hranaté závorky, vysvětlení viz dříve v tomto článku) a vložit jej do nějakého klasického příspěvku WordPressu (což můžete vidět na následujícím obrázku) nebo stránky WordPressu:

A takto vypadá náš formulář ve vyplněném stavu na našich stránkách:

A na specifikovaný e-mail nám přijde následující zpráva:

Několik tipů na závěr

• Když při vytváření formuláře zatrhnete volbu „Použij e-mail s HTML obsahem“, můžete v políčku „Zpráva“ používat HTML značky pro naformátování obsahu e-mailu (jak pro vás, tak i pro uživatele). Můžete například používat HTML značky pro nadpisy (<h1>, <h2>…), odstavce (<p>), tučný text (<strong>), tabulky atd.
• V sekci „Zprávy“ pluginu můžete nadefinovat všelijaké systémové zprávy, pokud vám nevyhovují ty standardní. Například standardní zprávu „Vaše zpráva byla úspěšně odeslána. Děkujeme.“, která se objeví po úspěšném odeslání formuláře, můžete nahradit například za „Formulář byl úspěšně odeslán“ atd.