Z rozevíracího seznamu vyberte prvek "Textové pole"

Pokud je vyžadována nějaká funkce, kterou přidáte, zaškrtněte políčko 1 a nezapomeňte to napsat do popisu.

Můžete přidat do vstupního pole Dodatečné informace pro snazší vyplnění formuláře. Zaškrtávací políčko 2 "Použít jako zástupný symbol?" a do pole vedle zadejte nápovědu. Když toto pole ve formuláři vyplníte, text popisku zmizí. Poté postupujte podle pokynů pluginu. Výsledkem je pole jako toto v hotové podobě:

Kód nezapomeňte vložit do šablony dopisu, jinak nebudou údaje z tohoto pole odeslány na mail! To platí nejen pro textová pole, ale také pro jakékoli další prvky.

E-mailem

Slouží k předání adresy poštovní schránky odesílatele do formuláře

URL

Umožňuje přidat do formuláře adresu webové stránky.

Telefonní číslo

Do tohoto pole lze zadat pouze čísla.

Číslo (spinbox)

Pole, kde můžete nastavit množství něčeho, například produktu. Množství se nastavuje pomocí šipek nahoru/dolů.

datum

Vloží do formuláře kalendář s možností výběru data. Používá se například k rezervaci pokojů v hotelu. Datum příjezdu, datum odjezdu.

Textové pole

Ano, nedivte se 🙂 Další textové pole. Tentokrát je toto pole velké a umožňuje do něj napsat velké množství textu. Například recenze, komentáře.

Rozbalovací nabídka

Když je pro něco mnoho možností a potřebujete vybrat nějakou položku z velkého seznamu, například seznam měst, ulic, zboží.

Seznam musí být umístěn do pole Volba, každá položka na nový řádek.

Zaškrtávací políčka

Zaškrtávací políčko nebo zaškrtávací políčko ve vývojářském žargonu je prvek, který vytváří zaškrtávací políčko. Toto pole má dva stavy – zaškrtnuté nebo nezaškrtnuté. Je možný vícenásobný výběr. Jsou umístěny pouze v řadě, pokud zaškrtnete políčko "Vylučovat zaškrtávací políčka?" pak lze vybrat pouze jednu možnost.

přepínače

Přepínače (slang. přepínače) se používají, když potřebujete vybrat jednu jedinou možnost z několika navrhovaných. Zaškrtnutím políčka "Napřed umístit štítek a poté zaškrtávací políčko?" umístění štítku a pole výběru se ve výchozím nastavení změní nejprve výběr, poté štítek.

Přijetí

potvrzení něčeho. Předpokládejte souhlas s přijetím výše popsaných podmínek.

Otázka

Toto je první linie obrany proti spamu, ta nejzákladnější. V nastavení napište nějakou otázku, můžete použít čísla, můžete použít písmena nebo obojí a uveďte správnou odpověď. Pokud je odpověď při vyplňování formuláře správná, bude formulář odeslán. Zelená označuje, která část tohoto vzorce bude zobrazena na webu před polem pro zadání odpovědi, červená označuje odpověď. Správná odpověď ve vzorci se píše za znaménkem | (svislý pruh)

Přidá do formuláře ochranu proti spamu.

Aby tato funkce fungovala, je vyžadován další plugin. Stáhněte, nainstalujte, aktivujte plugin.

Nemůžete změnit nastavení, zkopírovat a vložit 2 řádky před tlačítko Odeslat.

Odeslání souboru

K formuláři pro odeslání zprávy můžete připojit soubor. V nastavení můžete specifikovat maximální velikost v bajtech a povolené formáty pro nahrávání, např. .jpg .tiff .doc

tlačítko odeslat

Odeslání formuláře. V nastavení v sekci "Zkratka" - můžete zadat název tlačítka (Odeslat, odpovědět, odeslat 🙂)

Přizpůsobení vzhledu kontaktního formuláře 7

Protože pluginy mají vlastnosti aktualizace, změny vzhled formuláře budou vytvořeny v souboru stylu webu style.css

Kód je zodpovědný za zobrazení formuláře, jeho polí a dalších prvků:

Wpcf7 ( background-color:#ddd; ) /*barva pozadí formuláře */ .wpcf7 input, .wpcf7 textarea( padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size: 16px; výška řádku: 20px; okraj: 1px plný #C7C7C7; box-shadow: vsazený 2px 2px 8px #F9F9F9; -webkit-transition: všech 0,2s lehkost; -moz-přechod: všech 0,2s lehkost; -o-přechod : všech 0,2 s lehkost; přechod: všech 0,2 s lehkost; ) .wpcf7 .wpcf7-list-item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .wpcf7 .wpcf7-list-item input( border: none; padding-left: 0; margin-left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input: hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( background: #FDFDFD; outline: none; )

Co je zde co.

Vstup .wpcf7, textová oblast .wpcf7 - styl vstupního pole ( textové pole)

1. vycpávka- nastaví odsazení od obsahu k okraji prvku. Zde - odsazení od textu zadaného do pole k okraji pole. Hodnota je nastavena v pixelech na Xpx, kde X je počet pixelů. Příklad: padding: 5px 3px 6px 8px;
2. barva- barva textu.
3. rodina písem- písmo vstupních polí.
4. velikost písma- velikost písma
5. výška čáry- výška řádku
6. okraj- rámeček kolem vstupního pole
7. krabicový stín blokový stín. vložka označuje, že stín je vnitřní. Pokud chcete vnější stín, tuto hodnotu vynechejte. Druhá a třetí hodnota 2px 2px označují horizontální a vertikální prolnutí stínu, resp. Čtvrtá hodnota, 8px, určuje poloměr rozostření pro stín. Za páté - #F9F9F9 - barva stínu.

Přizpůsobení kontaktního formuláře 7 Tlačítko

Kontaktní formulář 7 Styl oznámení

Je odpovědný za hlášení chyb nebo úspěšných podání.

Wpcf7 .wpcf7-validation-errors( border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:# 349622; margin:0; padding:20px; ; -moz-border-radius: 10px; border-radius: 10px; color: white; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; background-color :#349622; padding:5px; padding- left: 5px; padding-right: 5px; border-radius:10px; width: 290px; color: white; /* Vržený stín */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3) ; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0,3); )

A nyní pro pohodlí celý kód s komentáři:

Wpcf7 ( background-color:#ddd; ) /*barva pozadí formuláře */ .wpcf7 input, .wpcf7 textarea( /* Tato část kódu je zodpovědná za styl vstupních polí, textové oblasti */ padding:5px; /* Nastaví odsazení z elementu pole před jeho obsah, můžete zadat libovolnou hodnotu, například 10px */ color:#1D1D1D; /* Barva textu ve vstupních polích */ font-family:Arial, Helvetica, sans-serif; /* Písmo textu ve vstupních polích */ font -size:16px; /* Velikost textu ve vstupních polích */ line-height: 20px; /* Line-Height ve vstupních polích */ border: 1px solid #C7C7C7; /* Ohraničení kolem polí. První hodnota je šířka v pixelech, druhá - styl boxu, třetí - jeho barva */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Box shadow 2px - x offset, 2px - y offset, 8px - shadow blur poloměr, #F9F9F9 - barva stínu */ -webkit-transition: všech 0,2 s lehkost; -moz-přechod: všech 0,2 s lehkost; -o-přechod: všech 0,2 s lehkost; přechod: všech 0,2 s lehkost; ) .wpcf7 . wpcf7-list- item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .w pcf7 .wpcf7-list-item input( border: none; padding-left: 0; okraj-levý: 0; ) .wpcf7 select( obrys: žádný; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* Tato část je zodpovědná za styl vstupních polí, když na ně umístíte ukazatel myši */ background: #FDFDFD; /* Pozadí vstupního pole když na něj najedete ukazatelem myši */ obrys : žádný; /* Vnější okraj pole pro zadávání textu */ ) o-přechod: 0; přechod: 0; ohraničení: žádný; /* Ohraničení kolem tlačítka */ pozice: relativní; barva: #fff; /* Barva textu */ text-transform: velká písmena; /* Transformace textu (velká písmena znamená, že se zobrazí text na tlačítku velká písmena) */ /* Zaokrouhlení rohů tlačítka. Hodnoty následujících tří vlastností musí být stejné, protože jsou stejné, pouze pro různé prohlížeče*/ -webkit-border-radius: 6px; /* Zaoblené rohy pro Chrome */ -moz-border-radius: 6px; /* Zaoblené rohy pro Mozilla FireFox */ border-radius: 6px; /* Zaoblené rohy pro všechny ostatní prohlížeče, včetně mobilních */ font-size: 14px; /* Velikost textu tlačítka */ font-weight: bold; /* Styl textu (tučné znamená tučné) */ padding-top: 11px; /* Horní výplň od okraje prvku k jeho obsahu */ padding-bottom: 10px; /* Odsazení od spodní části prvku k jeho obsahu */ padding-left: 35px; /* Padding nalevo od okraje prvku k jeho obsahu */ padding-right: 35px; /* Odsazení vpravo od okraje prvku k jeho obsahu */ /* gradient pozadí - Pozadí tlačítka přechodu */ barva pozadí: #000000; /* Barva pozadí tlačítka, pokud přechod není podporován prohlížečem */ /* V následujících vlastnostech musí být barvy zadány stejným způsobem, protože jsou stejné, pouze pro různé prohlížeče. Pojďme se podívat na první vlastnost. Část from(#676767), to(#3B3B3B) znamená, že potřebujeme zobrazit přechod, kde barva #676767) přechází do barvy #3B3B3B */ background: -webkit-gradient(linear, left top, left bottom , od(#676767), do(#3B3B3B)); pozadí: -moz-linear-gradient(top, #349622, #246416); filtr: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow - Stín tlačítka. Barva stínu zadaná v RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0,3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0,3); box-shadow: 0 2px 5px rgba(0,0,0,0,3); ) /* Při najetí – Styl tlačítka při najetí kurzorem myši. Vše je téměř stejné jako v předchozím bloku */ .wpcf7 input.wpcf7-submit:hover( kurzor: ukazatel; text-decoration: none; background-color: #000000; background: -webkit-gradient(linear, left top , vlevo dole, od(#246416), do(#349622)); pozadí: -moz-linear-gradient(top, #246416, #349622); filtr: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416 ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* Při kliknutí - styl tlačítka při kliknutí na něj téměř stejné jako v předchozím bloku */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* Barva textu tlačítka po kliknutí */ background-color: #000000; background : -webkit-gradient( lineární, vlevo nahoře, vlevo dole, od(#FF0000), do(#246416)); pozadí: -moz-linear-gradient(top, #FF0000, #246416); filtr: progid:DXImageTransform .Microsoft.gradient(startColorstr ="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImag eTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: žádný ) /* Zprávy CF7 - Styl zpráv o úspěšném odeslání, chybách atd. */ .wpcf7 .wpcf7-validation-errors( /* Styl zprávy pro chyby ověření */ border:none; /* ohraničení bloku zprávy */ background-color:#246416; /* Background */ color:#fff; /* Barva textu */ okraj:0; /* Vnější výplň */ výplň:20px; /* Vnitřní výplň */ /* Zaoblení rohů napříč prohlížeči – následující 3 vlastnosti */ -webkit-border-radius: 10px; -moz- border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Styl zprávy o úspěchu */ border:none; /* Ohraničení bloku zprávy */ background-color:#7ad33f; / * Pozadí */ okraj:0; /* Vnější výplň */ výplň:20px; /* Vnitřní výplň */ /* Zaoblení rohů napříč prohlížeči – následující 3 vlastnosti */ -webkit-border-radius: 10px; -moz- border-radius: 10px; border-radius: 10px; .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; barva: bílá; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; backgrou nd-color:#349622; padding:5px; padding-left: 5px padding-right: 5px; border-radius:10px; šířka: 290px barva bílá; /* Vržený stín */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0,3); box-shadow: 3px 3px 3px rgba(0,0,0,0,3); ) .wpcf7-form .fleft( float: left; ) .wpcf7-form .mright20( margin-right: 20px; ) .wpcf7-form .mright40( margin-right: 40px; ) .wpcf7-form .clear( clear: oba; )

Kontaktní formulář je základním atributem většiny stránek. To je důvod, proč je v adresáři WordPress tolik pluginů pro kontaktní formuláře. Jedním z nejoblíbenějších je Contact Form 7. Plugin umožňuje vytvářet formuláře jakéhokoli druhu; velmi flexibilní a snadno nastavitelné; se vyvíjí již mnoho let a obsahuje mnoho vývojů.

Vytváření a zobrazování kontaktních formulářů

Vytváření formulářů v admin

Po instalaci pluginu se objeví položka nabídky „Kontaktní formulář 7“, přes kterou můžete vytvářet a mazat formuláře.

Formulář na obrázku byl vytvořen automaticky při aktivaci pluginu.

Použijeme výchozí formulář, k tomu vytvoříme stránku "Kontaktujte mě" a vložíme tam krátký kód formuláře.

Přední strana webu

Nyní si článek uložíme a podíváme se, jak vypadá náš formulář (s motivem Twenty Sixteen):

Na obrázku je formulář za odeslaným dopisem (naznačuje to upozornění ve spodní části formuláře).

Přizpůsobení formuláře (vytváření složitých formulářů)

Výše uvedený příklad ukazuje, jak vložit hotový a velmi jednoduchý kontaktní formulář. A nyní se podíváme na to, jak vytvořit formu obtížnější. K tomu se vrátíme do administračního panelu, do správce formulářů a přejdeme k úpravě výchozího formuláře.

V horním poli - název formuláře (je viditelný pouze v administračním panelu), uveďte název, který je vám jasný, například: "Zpětná vazba o webu", "Formulář žádosti o zaměstnání", "Formulář zpětná vazba" atd.

Pod názvem je krátký kód. Používáme ho v záznamech, k zobrazení formuláře.

A níže jsou čtyři karty:

1. Šablona formuláře
2. Dopis
3. Další nastavení

Podívejme se na každou kartu zvlášť.

Šablona formuláře

Na této kartě můžete upravit pole a vzhled formuláře. Pracovní prostor je WP HTML editor. Jen místo obvyklých tlačítek vidíme tlačítka pro vkládání různých polí formuláře.

Rozložení formuláře

Pro rozvržení můžete použít html tagy a krátké kódy pluginů. Krátké kódy přidávají pole formuláře a značky html umožňují vytvořit libovolnou strukturu HTML. Náš výchozí formulář vypadá například takto:

Vaše jméno (povinné) Váš email (vyžadováno) Téma Zpráva

A když se zobrazí v příspěvku, změní se na tento HTML:

Syntaxe krátkého kódu

Klikneme na tlačítko "Text". Otevře se okno, kde můžeme zadat atributy pro textové pole. Určete a klikněte na „Vložit značku“.

Značka bude později převedena na textové pole s html kódem:

Krátké kódy lze pohodlně vytvářet pomocí konstruktoru krátkých kódů.

Konstruktor vám ale neumožňuje změnit shortcode (tam můžete vytvořit pouze shortcode). Existují dva způsoby, jak změnit krátký kód:

1. odstranit a vytvořit nový pomocí konstruktoru.
2. prostudujte si syntaxi a ručně opravte krátký kód pole.

S projektantem na to přijdete sami.

A zde budeme analyzovat syntaxi krátkého kódu.

Zvažte například značku textového pole s dalšími možnostmi:

Text (Požadované) Typ pole: text, výběr, heslo, číslo atd. (v tomto případě textové pole). Určuje, na jaký formulářový prvek bude náš tag převeden, což znamená, jaký druh dat bude přijímat. * Hvězdička činí pole povinným (formulář nebude odeslán a zobrazí se upozornění, že pole je nutné vyplnit). jméno klienta (Požadované) Název pole se používá jako atribut názvu ve vstupu a používá se také při vytváření šablony odesílaného dopisu. id:my-id Atribut id na vstupu s hodnotou moje-id. Používá se k dekoraci. třída: moje třída atribut třídy ve vstupu s hodnotou moje-třída. Používá se k dekoraci. zástupný symbol "(!LANG:Zadejte jméno" Использовать текст "Введите имя" как placeholder. !}

Dodržujte pořadí atributů tagu: nejprve přijde typ pole, poté jeho název a teprve potom další možnosti.

Typy polí

• Textová pole: text , email , tel , url , textarea
• Číselná pole: číslo , rozsah
• Datumová pole: datum
• Zaškrtávací políčka, rádia, seznamy: zaškrtávací políčko , rádio , vybrat
• Pole pro nahrání souboru: soubor
• CAPTCHA: captchac a captchar
• Ankety: kvíz
• Pole "Přijmout": přijetí
• Tlačítko Odeslat: Odeslat
• Vlastní typ pole

Šablona dopisu

V druhé záložce můžete doladit šablonu (layout) a vlastnosti odesílaného dopisu. V polích této záložky můžete použít speciální značky polí formuláře - to umožňuje odeslat údaje uvedené ve formuláři v dopise.

Značky se skládají z názvů polí ze šablony formuláře. Vytvořili jsme například textové pole s názvem: . Nyní můžete značku použít v šabloně e-mailu. V dopise bude místo tohoto tagu nahrazena hodnota pole zadaného uživatelem (celé jméno).

Záhlaví e-mailů:

Komu - emailová schránka kam bude e-mail odeslán. Můžete zadat libovolný počet polí oddělených čárkami.

Od - jméno a e-mail, od koho dopis přišel. Obvykle je zde uvedena pošta serveru (např [e-mail chráněný]).

Můžete zadat libovolnou poštu, ale pokud se poštovní doména liší od domény webu, formulář nebude bude testován a bude na tento parametr „nadávat“, ačkoli dopisy budou stále odesílány.

Předmět – název e-mailu. Bude zřejmé, z jakého formuláře byla data odeslána. Předmětem dopisu je například „Chyba na webu“, „Objednávka zpětného volání“ a podobně. Vyberte si název, abyste si usnadnili práci s přijatými dopisy.

• Dodatečné hlavičky - Reply-To: se zde standardně píše. Záhlaví Reply-To nám říká, že na tento e-mail lze odpovědět kliknutím na tlačítko „Odpovědět“. poštovní program a značka formuláře je název pole ze šablony. Místo této značky bude vložen uživatelsky zadaný e-mail. Získáte něco jako Reply-To: [e-mail chráněný].

Tělo dopisu

Toto je další důležitá část této karty. Zde je text dopisu. V textu používáme všechny stejné značky formuláře (názvy polí ze šablony formuláře).

Pojďme analyzovat výchozí písmeno:

Z:<>Předmět: Zpráva: -- Odesláno z webu Prozkoumání pluginu Contact Form 7 (http://test-wp.ru)

Měli jsme 4 pole, která uživatel vyplnil. Po odeslání e-mailu se značky změní na hodnoty a my obdržíme e-mail takto:

Od: Dmitry Předmět: Otázka ohledně kontaktního formuláře 7 Zpráva: Dobrý den! Mám dotaz ohledně pluginu Contact Form 7. Jak jej nastavím? -- Odesláno z webu Prozkoumání pluginu Contact Form 7 (http://test-wp.ru)

Nepovinná pole v těle e-mailu

Pokud uživatel pole nevyplní, ale použije se v těle dopisu, pak bude tělo dopisu neúplné. Například tělo říká Muž z města, ale uživatel pole nevyplnil, což znamená, že v dopise dostaneme Muž z města ... Takový řádek v dopise je nadbytečný. Chcete-li tento řádek z e-mailu odstranit, zaškrtněte políčko „Vyloučit výstup řádků s prázdnými značkami zpráv“. Všimněte si, že to bude fungovat pouze v případě, že text pole a krátký kód jsou na stejném řádku.

Možnost „Použít dopis ve formátu HTML“. Umožňuje používat HTML tagy v těle e-mailu. V tomto případě můžete použít omezený seznam HTML tagy protože ne všechny poštovní klienti nebo služby dokážou správně zpracovat složité značení HTML. Můžete použít: tabulky, odrážkové seznamy, tučnost, odstavce a tak dále. Další podrobnosti najdete na webu.

Kontaktní formulář 7 umožňuje odeslat dopis na dvě adresy a nastavení pro každý dopis je jiné. To může být užitečné, když potřebujete poslat e-mail správci webu pomocí kompletní informace a duplikát pro vedoucího, který obsahuje pouze údaje o objednávce.

Oznámení o odeslání formuláře

Na této záložce můžete upravit zprávy, které formulář zobrazí v konkrétní situaci: při úspěšném nebo neúspěšném odeslání dopisu nebo při výskytu chyby.

Značky šablony dopisů v těchto polích nefungují.

Další nastavení

Tato záložka je určena pro pokročilé uživatele a umožňuje pomocí JS kódu rozšířit možnosti formuláře. Například zavěsit události pro analýzu.

O využití této funkcionality budu hovořit v samostatném článku.

Každý majitel webu chce mít kontaktní formulář pro odesílání zpráv od uživatelů a jejich přijímání na poštu. Jedná se o takzvaný formulář zpětné vazby. To znamená, že návštěvník může poslat svůj dopis webmasterovi přímo z webu, aniž by otevřel svou poštovní schránku. Nejlepší plugin pro implementaci této funkce Kontaktní formulář 7 neposílá e-maily. Můj článek popisuje správné konfigurace pluginu Contact Form 7 aby vše fungovalo správně.

Jak funguje plugin Contact Form 7

Tento formulář se nachází na jakékoli stránce vašeho webu (stačí zkopírovat řádek a vložit jej do Správné místo). Návštěvník webu vyplní povinná pole (například své jméno, e-mail, zpráva) a plugin prostřednictvím jedné schránky (říkejme mu "odesílatel") odešle dopis do jiné poštovní schránky ( "příjemce").

to znamená, musíte zaregistrovat 2 schránky - odesílatele a příjemce. Je lepší vytvořit odesílatele v poště Yandex a příjemce je oficiální poštovní schránka vašeho webu.

Plugin Contact Form 7 již nějakou dobu přestal fungovat - neposílal dopisy, ale jednoduše zkroutil stahování. Našel jsem řešení – nainstaloval jsem další bezplatný plugin WPForms Lite. Je velmi snadné nastavit, nevyžaduje instalaci dalších pluginů pro konfiguraci odesílání zpráv, ale všiml jsem si, že to nefunguje s každým e-mailem. Na jednom mi dopisy nepřišly, ale na druhém se posílají.

Nastavení pluginu Contact Form 7. Pokyny

1) Registrujeme pole odesílatele na poště Yandex (jakýkoli, bez ohledu na to, jeho název není důležitý pro fungování pluginu a nebude viditelný pro návštěvníky). Bude sloužit jako překladiště dopisů.

2) Nastavení kontaktního formuláře pluginu Contact Form 7. Klikněte "Změna" a za "Šablona formuláře". Zde je příklad toho, jak by to mělo vypadat s povinnými poli: uživatelské jméno, e-mail, zpráva a tlačítko Odeslat:

Vaše jméno (povinné)

Váš email (vyžadováno)

Zpráva

3) tab "Dopis" je zodpovědný za vzhled dopisů, které obdržíte.

Komu- adresa poštovní schránky příjemce

Od koho – <адрес ящика отправитель>

Téma –

Tělo dopisu –

Obdržíte tedy dopis, kde budou uvedena všechna vyplněná pole formuláře zpětné vazby. Tím je konfigurace pluginu Contact Form 7 dokončena..

Pozornost! Aby plugin Contact Form 7 mohl odesílat e-maily, musíte nainstalovat další plugin WP-Mail-SMTP. Je to on, kdo propojí dvě poštovní adresy odesílatele a příjemce a provede systémové funkce pro odesílání dopisů.

Nastavení pluginu WP-Mail-SMTP. Návod

Z e-mailu- adresa schránky odesílatele

Ze jména– například název vaší organizace nebo vaše jméno

poštovní zásilka- funkce odesílání dopisů. Vyberte „Posílat všechny e-maily WordPress přes SMTP“

Hostitel SMTP- pro poštu Yandex smtp.yandex.ru

SMTP port- pro poštu Yandex 465

Šifrování– Použijte šifrování SSL

Autentizace– Ano: Použít ověřování SMTP

uživatelské jméno– přihlaste se u svého odesílatele pošty

Heslo- heslo u vašeho odesílatele pošty

Nastavení dokončeno. Uložte změny.

Jak umístit kontaktní formulář 7 na stránku

V nastavení kontaktního formuláře věnujte pozornost řádku nahoře:

Musí být zkopírován a vložen na jakoukoli stránku. Vše je připraveno.

Nevytváří žádné potíže, zejména podle mých pokynů. Vše funguje dobře a e-maily jsou odesílány. Také doporučuji, abyste si přečetli článek o tom nejlepším pro WordPress. Najdete tam spoustu zajímavých věcí.

Dobré odpoledne milí čtenáři blogu. Pokračujeme v tématu formulářů zpětné vazby na WordPress. A protože o nich mluvíme, navrhuji dnes mluvit o pluginu WP Contact Form 7. Dále vám řeknu krok za krokem nastavení pluginu a také stručně popíšu doplňky pro tento plugin.

Navigace na stránce:

Popis kontaktního formuláře WordPress 7

2) Aktivujte plugin Contact Form 7 ve WordPress admin.

3) Přejděte na nově vytvořenou kartu, jak je znázorněno na obrázku:

4) Klikněte na záložku "Přidat nový" a zadejte výchozí jazyk formuláře nebo vyberte požadovaný

5) Zadejte název kontaktního formuláře a klikněte na Uložit.

6) Nyní máme krátký kód, který již lze zkopírovat a vložit do příspěvku nebo postranního panelu za účelem zobrazení formuláře - contact-form-7 id="1252" title="(!LANG:Formulář číslo 1" (надо взять в квадратные скобки как на рисунке).!}

7) Takto vypadá náš formulář:

Samozřejmě to není moc krásné, ale nikdo se neobtěžuje vytvářet vlastní styly nebo vytvářet vlastní formuláře a vkládat tam vložky.

Jak zobrazit kontaktní formulář 7 na libovolném místě v šabloně

V odstavci 6 nastavení krok za krokem Ukázal jsem vám, jak můžete vzít krátký kód kódu CF7 a dále popsal, že tento kód lze zobrazit ve widgetu nebo v příspěvku, stránce. Kromě toho chci říci, že kontaktní formulář 7 můžete zobrazit kdekoli v šabloně. Chcete-li to provést, vložte následující jednoduchý kód:

To je vše, pokud jste udělali vše správně, získáte výstup Kontaktního formuláře 7 na libovolném místě šablony WordPress.

Přizpůsobení kontaktního formuláře 7 vstupních polí

Díky němu budete mít navíc takové boxy jako:

Konfigurace odpovědi na odpověď pro kontaktní formulář 7

V nová verze plugin CF7 4.4 a vyšší, vývojář doporučuje zadat do pole from (zde je na skinu níže)

správnou adresu, která odpovídá vaší doméně. Při pohledu z kůže a toto doporučení vytváří problém:

Jak odpovědět uživateli z maileru?

Pokud kliknete na odpověď, odpovíme na naši vlastní poštu, ve skutečnosti odpovíme sami. To je velmi nepohodlné, protože musíme ručně zkopírovat adresu uživatele do maileru a teprve potom reagovat.

Řešení tohoto problému je a jako vždy jednoduché. potřebujete v terénu Další hlavičky přidat kód:

Odpovědět:

Váš e-mail-sh je samozřejmě třeba nahradit krátkým kódem vaší pošty. Viz skin níže:

Nyní, když obdržíte dopis od WordPress, můžete kliknout na mailer a odpovědět a vaše odpověď bude odeslána na správný e-mail.

Pokud po těchto krocích narazíte na problém, měli byste si příspěvek přečíst kliknutím na odkaz. V pluginu Contact Form 7 jsou popsány hlavní problémy a příčiny potíží.

To je vše. Doufám, že rozumíte tomu, jak je plugin a jeho rozložení nakonfigurováno.

Tento materiál podrobně popíše konfiguraci kontaktního formuláře 7 - pluginu pro tak populární platformu pro vytváření a propagaci stránek na globálním webu, jako je WordPress. Tento softwarový nástroj umožňuje vytvářet a konfigurovat kontaktní formuláře.

Něco málo o WordPressu

Jeden z nejpopulárnějších a nejběžnějších nástrojů pro vývoj a obsah informační zdroje je WordPress. Zpočátku toto software byl zaměřen na tvorbu jednoduchých blogů. Pak ale specializovaní specialisté doplnili jeho funkcionalitu, což umožnilo vytvářet další internetové zdroje pomocí tohoto redakčního systému.

Silné a slabé stránky této platformy pro tvorbu a propagaci webových stránek

Výhody tohoto softwarová platforma takový:

Jednoduchost a otevřenost zdrojových kódů.

Působivé množství informací o pozadí.

Schopnost vyvinout jakýkoli tematický zdroj na internetu v co nejkratším čase.

Vysoký výkon bez dalších softwarových doplňků (plug-inů).

Ale nevýhody v tomto případě jsou následující:

Stránky vytvořené na základě "Wordpress" nebudou zvládat velké zatížení.

Při instalaci dalších miniprogramů nebo, jak se jim také říká, zásuvných modulů dochází ke snížení výkonu internetového zdroje.

a proč potřebují weby založené na platformě WordPress

Základní funkcionalita redakčního systému jako je WordPress je velmi skromná. Stačí vyvinout ty nejzákladnější blogy a webové stránky. Aby vývojáři nějak zlepšili situaci s funkčností softwarové platformy a dodali jí flexibilitu, musí nainstalovat speciální miniprogramy, kterým se v odborném žargonu říká plug-iny. Jedním z nich je Kontaktní formulář 7. Nastavení plug-inu umožňuje vytvořit formulář zpětné vazby s rozšířenou úrovní funkčnosti na konkrétní stránce redakčního systému.

Specializace "Kontaktní formuláře 7"

Jak již bylo zmíněno dříve, vytváření zpětné vazby mezi návštěvníkem a správcem internetového zdroje založeného na platformě Wordpress je hlavním úkolem Kontaktního formuláře 7. Nastavení pošty, úprava šablony, odesílání různých souborů není zdaleka úplný seznam možností. že tento mini program. Zároveň bude zatížení hardwarových prostředků webu relativně malé a jeho přítomnost nepovede k výraznému poklesu výkonu webu nebo blogu.

Pořadí instalace pluginu

Existují tři způsoby, jak nainstalovat pluginy na platformu WordPress:

Stažením archivu ZIP z globálního webu a jeho „nahráním“ do příslušného adresáře internetového zdroje.

Používání různých druhů FTP klientů.

Nejbezpečnější ze tří možností instalace pluginů je ta poslední. V tomto případě programovací kód je stažen z oficiálních stránek a rozhodně neobsahuje různé druhy škodlivých, nebezpečných fragmentů. Samotné pořadí instalace pluginu je v tomto případě následující:

Přejděte na administrační panel WordPress.

Poté se musíte přesunout do sekce "Pluginy".

V okně, které se otevře, vyberte „Přidat nový“.

Do vyhledávacího pole zadejte název pluginu – Kontaktní formulář 7 – a poté přesuňte ukazatel myši na tlačítko „Hledat“ a proveďte jediné kliknutí. Poté začne vyhledávací operace. software.

Po dokončení se zobrazí seznam nalezených pluginů. V tomto seznamu najdeme ten, který potřebujeme, a klikneme na tlačítko označené „Instalovat“, které se nachází naproti němu.

Poté redakční systém tento plugin automaticky stáhne a nainstaluje.

Dalším krokem je aktivace nainstalovaného softwaru. Chcete-li to provést, přejděte na kartu "Pluginy" a najděte v seznamu Kontaktní formulář7. Vedle je nápis: „Aktivovat“ a jednou na něj klikněte myší.

Aktualizujeme administrativní panel redakčního systému a mezi jeho položkami najdeme Kontaktní formulář7. To je podmínkou úspěšné instalace tohoto oblíbeného a funkčního pluginu.



Algoritmus pro nastavení "Kontaktní formuláře 7"

Nastavení kontaktního formuláře 7 se skládá z následujících položek:

Stvoření nový formulář nebo úpravou starého, který byl vytvořen při instalaci pluginu. Zkušenosti ukazují, že ve většině případů je lepší využít možnost vytvořit nový formulář.

V další fázi vyberte jazyk formuláře a nastavte jeho název.

Poté v případě potřeby překonfigurujte jeho šablonu.

Provedené změny uložíme.

Vytvoříme novou stránku s kódem získaným dříve.

V konečné fázi musíte přejít na web a zkontrolovat správnou funkci vytvořeného prvku rozhraní internetového zdroje.

Vytvoření nového formuláře

Ihned po aktivaci tento plugin vytvoří výchozí formulář pro dotazy návštěvníků webu nebo blogu. Samozřejmě jej lze upravit a správně nakonfigurovat. Ale bude mnohem snazší tento smazat a vytvořit nový pomocí plný set všechny potřebné funkce. Chcete-li to provést, musíte provést následující kroky:

Přejděte do nabídky tohoto pluginu a vyberte položku „Formuláře“.

V okně, které se poté otevře, musíte zaškrtnout políčko vedle položky "Kontaktní formulář1".

Poté nad ním v rozevíracím seznamu „Akce“ vyberte položku „Odstranit“.

V odpovědi se zobrazí otázka potvrzující provedené akce. Musíte potvrdit smazání formuláře a kliknout na tlačítko "Ano".

Dále vyberte položku nabídky: "Vytvořit nový" v administrativním panelu "Wordpress" "Kontaktní formulář7".

V okně, které se otevře, v rozevíracím seznamu vyberte jazyk rozhraní budoucího formuláře - "Ruština". Poté klikněte na tlačítko "Vytvořit".

Poté se ve výchozím nastavení vygeneruje počáteční kód nového formuláře zpětné vazby pro WordPress. Poté budete muset provést operace, jako je nastavení kontaktního formuláře 7.

Nastavte název formuláře

Po provedení všech výše uvedených akcí se objeví okno pro zadání názvu nového formuláře ve Stylu kontaktního formuláře 7. Toto přesné nastavení začíná na jedné straně touto jednoduchou operací. Ale název formuláře je lepší dát na základě optimalizace pro vyhledávače. Proto bude v tomto případě nejoptimálnější například „Formulář zpětné vazby“ nebo „Zeptejte se správce webu“. Jakmile se rozhodneme pro název tohoto prvku rozhraní, napíšeme jej do odpovídajícího pole okna dotazu.



Úprava šablony "Kontaktní formuláře 7"

Ve stejném okně s názvem vytvořeného formuláře jsou 4 záložky. První je šablona. Ve výchozím nastavení je zde vytvořeno pouze 5 prvků:

Místo, kam je zadáno jméno návštěvníka internetového zdroje.

Pole pro vytočení e-mailové adresy návštěvníka, který dotaz položil.

Další pole umožňuje zadat předmět otázky.

Posledním výchozím prvkem formuláře je tlačítko označené Odeslat.

V případě potřeby lze text v tomto poli upravit a přidat další prvky rozhraní. K tomu stačí vybrat libovolný kód textový prvek(například část kódu, kde je uveden předmět zprávy a zkopírujte jej pomocí kontextová nabídka ve stejném poli na jiné místo. Vpravo jsou parametry (podrobně o nich pojednáme v dalším odstavci), ve kterých vybíráme prvek, který nás zajímá. Poté se vedle rozevíracího seznamu zobrazí požadovaný kód. Dále zkopírujte tento kód a vložte jej místo kódu předmětu zprávy. Název prvku je zvolen podle vašeho uvážení.

Nastavení délek polí a další

Na stejném místě můžete změnit zadání v Kontaktním formuláři 7. Úprava šířky libovolného textového pole se provádí následovně:

Například potřebujete zvýšit počet znaků ve jménu návštěvníka internetového zdroje na 55. Standardně jich je 40.

Chcete-li to provést, přidejte čísla 60/55 v kódu na konci. Výsledkem bude kód. Po uložení změn bude délka tohoto pole rovna 60 a maximální částka znaky, které do něj lze zadat - 55.

Podobně můžete změnit velikost textového pole zprávy. Pouze v tomto případě je nutné změnit kód tohoto prvku následovně. V tomto případě je 40 počet písmen v jednom řádku a 30 je celkový počet výrazů v tomto prvku rozhraní v Kontaktním formuláři 7. Vzhled samotného formuláře je konfigurován přesně výběrem hodnot parametrů každého jednotlivce živel. Proto se doporučuje uvést v kódu každého prvku konkrétní hodnoty každého parametru uvedeného v této části.



Další záložky formuláře

Jak bylo uvedeno, první karta se nazývá Šablona formuláře. Další v tomto okně je "Dopis". Nastavuje parametry místa, kam se bude z tohoto internetového zdroje odesílat pošta. Na záložce "Upozornění" se tvoří text zprávy, který se zobrazí v případě úspěšného odeslání dopisu. Je zde také možnost připravit zprávu pro případ, že se pomocí prostředků nelze spojit se správcem stránek. Poslední záložka v Kontaktním formuláři 7 – „Další nastavení“. Obsahuje ty parametry, které se v praxi používají velmi, velmi zřídka. Můžete jej použít například k nastavení sledování textu zadaného uživatelem pomocí Yandex – metriky.

Pole, která lze pomocí tohoto pluginu přidat do tohoto formuláře

Přizpůsobení kontaktního formuláře 7 pro Wordpress vám umožňuje přidat do formuláře zpětné vazby následující prvky rozhraní:

• Testovací pole je univerzální prvek rozhraní, do kterého můžete zadat libovolnou sadu znaků.

  E-Mail - místo pro zadání názvu elektronické schránky.

  URL – pole pro zadání adresy webové stránky.

  Telefonní číslo – umožňuje zadat telefonní číslo v mezinárodním formátu.

  Prvek "Číslo (spinbox)" umožňuje vytvořit vstupní pole libovolné celočíselné hodnoty (například věk návštěvníka).

  Prvek "Číslo (Posuvník)" přidává do formuláře posuvník, pomocí kterého můžete vybrat číselnou hodnotu ze zadaného rozsahu.

  Položka "Datum" vytváří speciální vstupní pole, ve kterém můžete zadat požadované datum. Po aktivaci tohoto prvku rozhraní se níže zobrazí kalendář, ve kterém můžete ihned vybrat požadované datum.

  Položka rozbalovací nabídky „Textové pole“ je zase určena pro psaní textové části e-mailu.

  Další položka - "Rozbalovací nabídka" - umožňuje vybrat požadovaný parametr z pevného seznamu.

  Ale "CheckBoxes" je navrženo tak, aby vybralo jednu nebo více hodnot z daného seznamu.

  Prvek rozhraní „Radio Buttons“ je téměř shodný s předchozím. Jediný rozdíl je v tom, že v tomto případě si můžete vybrat pouze jeden správná možnost, zatímco "Zaškrtávací políčka" mohou mít více platných hodnot.

  Položka "Akceptace" umožňuje přidat do vytvořeného formuláře pouze jedno zaškrtávací políčko. Zpravidla slouží k seznámení se s případnými podmínkami a bez jejich přijetí nebude možné v budoucnu zasílat email.

  Položka "Menu" umožňuje vytvořit speciální sekci v rozhraní, která bude chránit vaši poštovní schránku před spamem. V tomto případě bude před odesláním nutné dát správnou odpověď na položenou otázku.

  Druhou možností zabezpečení je CAPTCHA. Po jeho výběru se do formuláře přidá samostatná sekce, ve které se zobrazí obrázek se symboly a doplňkové pole pro jejich zadání.

  Další položka je "Odeslání souboru". Umožňuje přidat k textu dopisu soubor s různými vysvětlivkami a komentáři pro správce zdroje.

  Poslední položka - "Tlačítko Odeslat" - umožňuje přidat odpovídající prvek rozhraní.

Uložte změny

Po nastavení potřebných hodnot a správné konfiguraci formuláře je třeba toto vše uložit. Chcete-li to provést, v okně pro úpravy pluginu se zvedneme do jeho horní části. Zde by mělo být tlačítko Uložit. Přesuňte na něj ukazatel manipulátoru a udělejte na něj jediné kliknutí. Jako odpověď se objeví kód formuláře, který vybereme pomocí stejného ukazatele myši a zkopírujeme. Dále se přesuňte na administrativní panel redakčního systému v položce „Stránky“. Poté vytvoříme novou stránku s potřebným názvem (například „zpětná vazba“, „Kontakty“ nebo „Zeptejte se správce zdroje“). Poté přeložíme vytáčecí kurzor do vstupního pole pro jeho kód. V tomto případě je nutné v panelu možností přepnout režim kódové volby na "Text". Poté vložte dříve získaný kód formuláře. Dále na pravé straně rozhraní najdeme tlačítko „Publikovat“ a najedeme na něj myší. V další fázi provedeme jedno kliknutí levým tlačítkem myši na tento prvek rozhraní redakčního systému.



Kontrola výsledku

Po provedení dříve uvedených manipulací by se mělo přidat rozhraní internetového zdroje nová stránka, na kterém se zobrazí prvky specifikované v Kontaktním formuláři 7. Nastavení rozhraní je v zásadě u konce. Je nutné pouze zkontrolovat správné nastavení softwaru. K tomu musíte jít domovská stránka webové stránky, blog nebo portál. Poté v seznamu stránek najdeme tu, na které byl umístěn formulář zpětné vazby. Jdeme na to, zadáme správné parametry do všech polí najednou a pošleme testovací dopis na naši poštu. Jako odpověď byste měli obdržet informační zprávu o úspěšném dokončení této operace. Pak s prázdná pole pokusu o odeslání dalšího e-mailu. Poté by se měla objevit zpráva, že je třeba nastavit všechny zaškrtnuté parametry formuláře. Pokud byly v obou případech získány výsledky uvedené dříve, pak vytvořený formulář zpětné vazby funguje správně.

Výhody a nevýhody pluginů. Alternativy

Vynikajícím řešením pro začínajícího vývojáře pro vytvoření formuláře zpětné vazby je miniprogram Contact Form 7. Nastavení odesílání pošty, vytváření prvků rozhraní a dalších důležitých prvků rozhraní je v tomto případě většinou automatizované a vyžaduje minimální uživatelské znalosti. Proto pro jednoduchý internetový zdroj vstupní úroveň a se začínajícím správcem - to je skvělé řešení. Koneckonců, jakýkoli plugin je dalším zatížením zdrojů webové stránky, což snižuje výkon. V důsledku toho pokročilejší uživatelé doporučují se od takových odstoupit lehká cesta vytvořit formulář zpětné vazby. Můžete si ho také vytvořit sami pomocí HTML, CSS a JS, i když s menší funkčností. Tím se sníží potřeba výpočetních zdrojů webu a výrazně se zvýší úroveň výkonu.



Výsledek

Tento článek popisuje krok za krokem nastavení kontaktního formuláře 7. Tento plugin má skutečně vysokou úroveň funkčnosti, můžete jej použít k vytvoření jakéhokoli formuláře zpětné vazby. Na druhou stranu použití dodatečného pluginu v rámci redakčního systému zvyšuje zátěž Hardware místo. Proto začínajícím správcům stránek založených na tomto redakčním systému doporučujeme používat tento plugin pro takové účely. Dobře, pokročilejší uživatelé se obejdou bez Contact Form 7. V tomto případě rozhodně nebudete muset plugin konfigurovat.