Z rozbaľovacieho zoznamu vyberte prvok "Textové pole"

Ak je potrebná nejaká funkcia, ktorú pridáte, zaškrtnite políčko 1 a nezabudnite to napísať do popisu.

Môžete pridať do vstupného poľa Ďalšie informácie aby bolo vyplnenie formulára jednoduchšie. Začiarknite políčko 2 „Použiť ako zástupný symbol?“ a do poľa vedľa zadajte nápovedu. Keď vyplníte toto pole vo formulári, text popisu zmizne. Potom postupujte podľa pokynov doplnku. Výsledkom je pole, ako je toto v hotovej podobe:

Nezabudnite vložiť kód do šablóny listu, inak sa údaje z tohto poľa neodošlú na poštu! To platí nielen pre textové polia, ale aj pre akékoľvek iné prvky.

Email

Používa sa na odovzdanie adresy poštovej schránky odosielateľa do formulára

URL

Umožňuje pridať adresu webovej stránky do formulára.

Telefónne číslo

Do tohto poľa je možné zadať iba čísla.

číslo (spinbox)

Pole, kde môžete nastaviť množstvo niečoho, napríklad produktu. Množstvo sa nastavuje pomocou šípok nahor/nadol.

dátum

Do formulára vloží kalendár s možnosťou výberu dátumu. Používa sa napríklad na rezerváciu izieb v hoteli. Dátum príchodu, dátum odchodu.

Textové pole

Áno, nečudujte sa 🙂 Ďalšie textové pole. Tentoraz je toto pole veľké a umožňuje doň napísať veľa textu. Napríklad recenzie, komentáre.

Rozbaľovacia ponuka

Keď je pre niečo veľa možností a potrebujete vybrať nejakú položku z veľkého zoznamu, napríklad zoznam miest, ulíc, tovaru.

Zoznam musí byť umiestnený v poli Choice, každá položka na novom riadku.

Začiarkavacie políčka

Začiarkavacie políčko alebo začiarkavacie políčko v žargóne vývojárov je prvok, ktorý vytvára začiarkavacie políčko. Toto pole má dva stavy – začiarknuté alebo nezačiarknuté. Je možný viacnásobný výber. Sú umiestnené iba v rade, ak začiarknete políčko "Vylučovať začiarkavacie políčka?" potom je možné vybrať iba jednu možnosť.

prepínače

Prepínače (slang. prepínače) sa používajú, keď potrebujete vybrať jednu možnosť z niekoľkých navrhovaných. Začiarknutím políčka "Najskôr umiestniť štítok a potom začiarknuť políčko?" umiestnenie štítka a výberové pole sa štandardne zmení najskôr výber, potom štítok.

Prijatie

potvrdenie niečoho. Predpokladajte, že súhlasíte s podmienkami popísanými vyššie.

Otázka

Toto je prvá línia obrany proti spamu, tá najzákladnejšia. V nastavení napíšte nejakú otázku, môžete použiť čísla, môžete použiť písmená alebo oboje a uveďte správnu odpoveď. Ak je odpoveď pri vypĺňaní formulára správna, formulár bude odoslaný. Zelená označuje, ktorá časť tohto vzorca sa zobrazí na stránke pred poľom na zadanie odpovede, červená označuje odpoveď. Správna odpoveď vo vzorci sa píše za znak | (vertikálna lišta)

Pridáva do formulára ochranu proti spamu.

Na fungovanie tejto funkcie je potrebný ďalší doplnok. Stiahnite si, nainštalujte, aktivujte doplnok.

Nemôžete zmeniť nastavenia, skopírovať a vložiť 2 riadky pred tlačidlo odoslať.

Odosielanie súboru

K formuláru na odoslanie správy môžete pripojiť súbor. V nastaveniach môžete určiť maximálna veľkosť v bajtoch a povolené formáty na nahrávanie, napr. .jpg .tiff .doc

tlačidlo odoslať

Odoslanie formulára. V nastaveniach v časti "Skratka" - môžete zadať názov tlačidla (Odoslať, odpovedať, odoslať 🙂)

Prispôsobenie vzhľadu kontaktného formulára 7

Keďže doplnky majú vlastnosti aktualizácie, zmeny vzhľad formuláre budú vytvorené v súbore štýlu témy webu style.css

Kód je zodpovedný za zobrazenie formulára, jeho polí a ďalších prvkov:

Wpcf7 ( background-color:#ddd; ) /*farba pozadia formulára */ .wpcf7 input, .wpcf7 textarea( padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size: 16px; výška riadku: 20px; orámovanie: 1px plný #C7C7C7; box-shadow: vložka 2px 2px 8px #F9F9F9; -webkit-transition: všetko 0,2 s ľahkosť; -moz-prechod: všetko 0,2 s ľahkosť; -o-prechod : všetkých 0,2 s ľahkosť; prechod: všetkých 0,2 s ľahkosť; ) .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( obrys: 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; obrys: none; )

Čo je tu čo.

Vstup .wpcf7, textová oblasť .wpcf7 - štýl vstupného poľa ( textové pole)

1. vypchávka- nastaví odsadenie od obsahu k okraju prvku. Tu - odsadenie od textu zadaného do poľa po okraj poľa. Hodnota je nastavená v pixeloch na Xpx, kde X je počet pixelov. Príklad: padding: 5px 3px 6px 8px;
2. farba- farba textu.
3. font-family- písmo vstupných polí.
4. veľkosť písma- veľkosť písma
5. line-height- výška riadku
6. hranica- rám okolo vstupného poľa
7. krabicový tieň blokový tieň. vložka označuje, že tieň je vnútorný. Ak chcete vonkajší tieň, túto hodnotu vynechajte. Druhá a tretia hodnota 2px 2px označujú horizontálne a vertikálne prelínanie tieňa, resp. Štvrtá hodnota, 8px, určuje polomer rozostrenia pre tieň. Piata - #F9F9F9 - farba tieňa.

Prispôsobenie kontaktného formulára 7 Tlačidlo

Kontaktný formulár 7 Štýl upozornenia

Zodpovedá za hlásenie chýb alebo úspešných podaní.

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ý tieň */ -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 teraz, pre pohodlie, celý kód s komentármi:

Wpcf7 ( background-color:#ddd; ) /*farba pozadia formulára */ .wpcf7 input, .wpcf7 textarea( /* Táto časť kódu je zodpovedná za štýl vstupných polí, textových oblastí */ padding:5px; /* Nastaví výplň z elementu pole pred jeho obsah, môžete zadať ľubovoľnú hodnotu, napríklad 10px */ color:#1D1D1D; /* Farba textu vo vstupných poliach */ font-family:Arial, Helvetica, sans-serif; /* Písmo textu vo vstupných poliach */ font -size:16px; /* Veľkosť textu vo vstupných poliach */ line-height: 20px; /* Line-Height vo vstupných poliach */ border: 1px solid #C7C7C7; /* Border okolo polí. Prvá hodnota je šírka v pixeloch, druhá - štýl rámčeka, tretia - jeho farba */ tieň v rámčeku: inset 2px 2px 8px #F9F9F9; /* tieň rámčeka 2px - odsadenie x, 2px - odsadenie y, 8px - polomer rozostrenia tieňa, #F9F9F9 - farba tieňa */ -webkit-transition: všetkých 0,2 s ľahkosť; -moz-prechod: všetkých 0,2 s ľahkosť; -o-prechod: všetkých 0,2 s ľahkosť; prechod: všetkých 0,2 s ľahkosť; ) .wpcf7 .wpcf7-list- item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .w pcf7 .wpcf7-list-item input( border: none; padding-left: 0; ľavý okraj: 0; ) .wpcf7 select( obrys: žiadny; 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 ( /* Táto časť je zodpovedná za štýl vstupných polí, keď na ne umiestnite kurzor myši */ background: #FDFDFD; /* Pozadie vstupného poľa keď naň umiestnite kurzor myši */ obrys : žiadny; /* Vonkajší okraj poľa na zadávanie textu */ ) o-prechod: 0; prechod: 0; okraj: žiadny; /* Ohraničenie okolo tlačidla */ poloha: relatívna ; color: #fff; /* Farba textu */ text-transform: veľké písmená; /* Transformácia textu (veľké znamená, že text na tlačidle sa zobrazí veľké písmená) */ /* Zaoblenie rohov tlačidla. Hodnoty nasledujúcich troch vlastností musia byť rovnaké, pretože sú rovnaké, iba pre rôzne prehliadače*/ -webkit-border-radius: 6px; /* Zaoblené rohy pre Chrome */ -moz-border-radius: 6px; /* Zaoblené rohy pre Mozilla FireFox */ border-radius: 6px; /* Zaoblené rohy pre všetky ostatné prehliadače vrátane mobilných */ font-size: 14px; /* Veľkosť textu tlačidla */ font-weight: bold; /* Štýl textu (tučné znamená tučné) */ padding-top: 11px; /* Vrchné odsadenie od okraja prvku po jeho obsah */ padding-bottom: 10px; /* Odsadenie od spodnej časti prvku k jeho obsahu */ padding-left: 35px; /* Padding naľavo od okraja prvku k jeho obsahu */ padding-right: 35px; /* Odsadenie vpravo od okraja prvku k jeho obsahu */ /* gradient pozadia - Pozadie tlačidla prechodu */ farba pozadia: #000000; /* Farba pozadia tlačidla, ak prehliadač nepodporuje prechod */ /* V nasledujúcich vlastnostiach musia byť farby špecifikované rovnakým spôsobom, pretože sú rovnaké, len pre rôzne prehliadače. Poďme sa pozrieť na prvú vlastnosť. Časť from(#676767), to(#3B3B3B) znamená, že potrebujeme zobraziť prechod, kde z farby #676767) je prechod na farbu #3B3B3B */ background: -webkit-gradient(linear, left top, vľavo dole, od( #676767), do (#3B3B3B)); pozadie: -moz-linear-gradient(top, #349622, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow - Tieň tlačidla. Farba tieňa špecifikovaná 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); ) /* Pri umiestnení kurzora myši – upravte štýl tlačidla pri umiestnení kurzora myši. Všetko je takmer rovnaké ako v predchádzajúcom bloku */ .wpcf7 input.wpcf7-submit:hover( kurzor: ukazovateľ; dekorácia textu: žiadna; farba pozadia: #000000; pozadie: -webkit-gradient(lineárne, vľavo hore , vľavo dole, from(#246416), to(#349622)); background: -moz-linear-gradient(top, #246416, #349622); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416 ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* Pri kliknutí - štýl tlačidla pri kliknutí naň takmer rovnaké ako v predchádzajúcom bloku */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* Farba textu tlačidla po kliknutí */ background-color: #000000; background : -webkit-gradient( lineárne, vľavo hore, vľavo dole, od(#FF0000), do(#246416)); pozadie: -moz-linear-gradient(top, #FF0000, #246416); filter: 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: žiadne; box-shadow: žiadny ) /* Správy CF7 - Štýl správ o úspešnom odoslaní, chybách atď. */ .wpcf7 .wpcf7-validation-errors( /* Štýl správy pre chyby overenia */ border:none; /* orámovanie bloku správy */ background-color:#246416; /* Background */ color:#fff; /* Farba textu */ okraj:0; /* Vonkajšie čalúnenie */ výplň:20px; /* Vnútorné čalúnenie */ /* Zaoblenie rohu naprieč prehliadačmi – nasledujúce 3 vlastnosti */ -webkit-border-radius: 10px; -moz- border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Štýl správy o úspechu */ border:none; /* orámovanie bloku správy */ farba-pozadia:#7ad33f; / * Pozadie */ okraj: 0; /* Vonkajšie čalúnenie */ výplň: 20px; /* Vnútorné čalúnenie */ /* Zaoblenie rohu naprieč prehliadačmi – nasledujúce 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; color: white; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; backgrou nd-color:#349622; padding:5px; padding-left: 5px padding-right: 5px; border-radius:10px; šírka: 290px farba: biela; /* Vržený tieň */ -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: oboje ;)

Kontaktný formulár je základným atribútom väčšiny stránok. To je dôvod, prečo je v adresári WordPress toľko doplnkov kontaktného formulára. Jedným z najpopulárnejších je Contact Form 7. Plugin umožňuje vytvárať formuláre akéhokoľvek druhu; veľmi flexibilné a ľahko nastaviteľné; sa vyvíja už mnoho rokov a obsahuje veľa vývojov.

Vytváranie a zobrazovanie kontaktných formulárov

Vytváranie formulárov v admin

Po nainštalovaní pluginu sa zobrazí položka ponuky „Kontaktný formulár 7“, prostredníctvom ktorej môžete vytvárať a odstraňovať formuláre.

Formulár na obrázku bol vytvorený automaticky pri aktivácii pluginu.

Používame predvolený formulár, na tento účel vytvoríme stránku „Kontaktujte ma“ a vložíme tam skrátený kód formulára.

Predná časť stránky

Teraz si článok uložíme a uvidíme, ako vyzerá náš formulár (pomocou témy Twenty Sixteen):

Na obrázku je formulár za odoslaným listom (naznačuje to oznam v spodnej časti formulára).

Prispôsobenie formulárov (vytváranie zložitých formulárov)

Vyššie uvedený príklad ukazuje, ako vložiť pripravený a veľmi jednoduchý kontaktný formulár. A teraz sa pozrime na to, ako vytvoriť formu ťažšie. Ak to chcete urobiť, vrátime sa na panel správcu, do správcu formulárov a prejdeme na úpravu predvoleného formulára.

V hornom poli - názov formulára (je viditeľný iba v administračnom paneli), uveďte názov, ktorý je vám jasný, napríklad: "Spätná väzba o stránke", "Formulár žiadosti o zamestnanie", "Formulár spätná väzba" atď.

Pod názvom je skrátený kód. Používame ho v záznamoch, na zobrazenie formulára.

A nižšie sú štyri karty:

1. Šablóna formulára
2. List
3. Ďalšie nastavenia

Pozrime sa na každú kartu samostatne.

Šablóna formulára

Na tejto karte môžete prispôsobiť polia a vzhľad formulára. Pracovným priestorom je WP HTML editor. Len namiesto bežných tlačidiel vidíme tlačidlá na vkladanie rôznych polí formulára.

Rozloženie formulára

Na rozloženie môžete použiť html značky a krátke kódy doplnkov. Krátke kódy pridávajú polia formulára a značky html vám umožňujú vytvoriť ľubovoľnú štruktúru HTML. Náš predvolený formulár vyzerá napríklad takto:

Vaše meno (povinné) Váš email (povinné) Téma Správa

A keď sa zobrazí v príspevku, zmení sa na tento kód HTML:

Syntax skráteného kódu

Klikneme na tlačidlo „Text“. Otvorí sa okno, kde môžeme zadať atribúty pre textové pole. Špecifikujte a kliknite na „Vložiť značku“.

Značka sa neskôr skonvertuje na textové pole s html kódom:

Krátke kódy možno pohodlne vytvárať pomocou konštruktora krátkych kódov.

Konštruktor vám však neumožňuje zmeniť krátky kód (môžete tam vytvoriť iba krátky kód). Existujú dva spôsoby, ako zmeniť krátky kód:

1. odstrániť a vytvoriť nový pomocou konštruktora.
2. preštudujte si syntax a manuálne opravte skrátený kód poľa.

S dizajnérom na to prídete sami.

A tu budeme analyzovať syntax krátkeho kódu.

Zvážte napríklad značku textového poľa s ďalšími možnosťami:

Text (požadovaný) Typ poľa: text, výber, heslo, číslo atď. (v tomto prípade textové pole). Určuje, na ktorý formulárový prvok bude naša značka konvertovaná, čo znamená, aký druh údajov bude akceptovať. * Hviezdička robí pole povinným (formulár sa neodošle a zobrazí sa upozornenie, že pole je potrebné vyplniť). meno klienta (požadovaný) Názov poľa sa používa ako atribút názvu vo vstupe a používa sa aj pri vytváraní šablóny odosielaného listu. id:my-id Atribút id na vstupe s hodnotou moje-id. Používa sa na dekoráciu. trieda:moja trieda atribút triedy vo vstupe s hodnotou moja-trieda. Používa sa na dekoráciu. zástupný symbol "(!LANG:Zadajte názov" Использовать текст "Введите имя" как placeholder. !}

Postupujte podľa poradia atribútov značky: najprv príde typ poľa, potom jeho názov a až potom ďalšie možnosti.

Typy polí

• Textové polia: text , email , tel , url , textarea
• Číselné polia: číslo , rozsah
• Dátumové polia: dátum
• Začiarkavacie políčka, rádiá, zoznamy: začiarkavacie políčko , rádio , výber
• Pole nahrávania súboru: súbor
• CAPTCHA: captchac a captchar
• Ankety: kvíz
• Pole „Prijať“: prijatie
• Tlačidlo Odoslať: odoslať
• Vlastný typ poľa

Šablóna listu

V druhej záložke si môžete doladiť šablónu (rozloženie) a vlastnosti odosielaného listu. V poliach tejto karty môžete použiť špeciálne značky polí formulára - to umožňuje odoslať údaje uvedené vo formulári v liste.

Značky pozostávajú z názvov polí zo šablóny formulára. Napríklad sme vytvorili textové pole s názvom: . Teraz môžete značku použiť v šablóne e-mailu. V liste sa namiesto tejto značky nahradí hodnota poľa zadaného používateľom (celé meno).

Hlavičky e-mailov:

Komu - emailová schránka kam bude email odoslaný. Môžete zadať ľubovoľný počet políčok oddelených čiarkami.

Od - meno a e-mail, od koho list prišiel. Zvyčajne sa tu uvádza pošta servera (napr [e-mail chránený]).

Môžete zadať ľubovoľnú poštu, ale ak sa poštová doména líši od domény lokality, formulár nebude budú testované a bude „prisahať“ na tento parameter, hoci listy sa budú stále posielať.

Predmet – názov e-mailu. Bude jasné, z akého formulára boli údaje odoslané. Napríklad predmetom listu je „Chyba na stránke“, „Objednávka spätného volania“ a podobne. Vyberte si názov, aby ste si uľahčili prácu s prijatými listami.

• Dodatočné hlavičky - Reply-To: je tu štandardne napísané. Hlavička Reply-To nám hovorí, že na tento e-mail môžete odpovedať kliknutím na tlačidlo „Odpovedať“. poštový program a značka formulára je názov poľa zo šablóny. Namiesto tejto značky sa vloží e-mail určený používateľom. Dostanete niečo ako Reply-To: [e-mail chránený].

Telo písmena

Toto je ďalšia dôležitá časť tejto karty. Tu je text listu. V texte používame všetky rovnaké značky formulára (názvy polí zo šablóny formulára).

Poďme analyzovať predvolené písmeno:

Od:<>Predmet: Správa: -- Odoslané z lokality Preskúmanie doplnku Contact Form 7 (http://test-wp.ru)

Mali sme 4 polia, ktoré používateľ vyplnil. Po odoslaní e-mailu sa značky zmenia na hodnoty a my dostaneme takýto e-mail:

Od: Dmitry Predmet: Otázka o kontaktnom formulári 7 Správa: Dobrý deň! Mám otázku týkajúcu sa doplnku Contact Form 7. Ako ho nastavím? -- Odoslané z lokality Preskúmanie doplnku 7 kontaktného formulára (http://test-wp.ru)

Nepovinné polia v tele e-mailu

Ak používateľ nevyplní pole, ale použije sa v tele listu, telo listu bude neúplné. Napríklad telo hovorí Muž z mesta, ale používateľ nevyplnil pole, čo znamená, že v liste dostaneme Muž z mesta ... Takýto riadok v liste je nadbytočný. Ak chcete tento riadok z e-mailu odstrániť, začiarknite políčko „Vylúčiť výstup riadkov s prázdnymi značkami správ“. Všimnite si, že to bude fungovať len vtedy, keď sú text poľa a skrátený kód na rovnakom riadku.

Možnosť „Použiť HTML formát listu“. Umožňuje vám použiť HTML tagy v tele e-mailu. V tomto prípade môžete použiť obmedzený zoznam HTML tagy pretože nie všetky poštových klientov alebo služby dokážu správne spracovať zložité značky HTML. Môžete použiť: tabuľky, odrážkové zoznamy, tučné písmo, odseky a pod. Ďalšie podrobnosti nájdete na webe.

Kontaktný formulár 7 vám umožňuje poslať list na dve adresy, pričom nastavenia pre každý list sú iné. To môže byť užitočné, keď potrebujete poslať e-mail správcovi stránky s úplné informácie a duplikát pre konateľa, ktorý obsahuje len údaje o objednávke.

Oznámenia o odoslaní formulára

Na tejto karte môžete upraviť správy, ktoré formulár zobrazuje v danej situácii: pri úspešnom alebo neúspešnom odoslaní listu alebo pri výskyte chyby.

Značky šablóny listov v týchto poliach nefungujú.

Ďalšie nastavenia

Táto záložka je určená pre pokročilých používateľov a umožňuje pomocou JS kódu rozšíriť možnosti formulára. Napríklad zaveste udalosti pre analýzu.

O využití tejto funkcionality budem hovoriť v samostatnom článku.

Každý vlastník stránky chce mať kontaktný formulár na odosielanie správ od používateľov a ich prijímanie na poštu. Ide o takzvaný formulár spätnej väzby. To znamená, že návštevník môže poslať svoj list správcovi webu priamo zo stránky bez toho, aby otvoril svoju poštovú schránku. Najlepší doplnok na implementáciu tejto funkcie Kontaktný formulár 7 neposiela e-maily. Môj článok popisuje správne konfigurácia doplnku Kontaktný formulár 7 aby všetko fungovalo správne.

Ako funguje doplnok Kontaktného formulára 7

Tento formulár sa nachádza na ľubovoľnej stránke vášho webu (stačí skopírovať riadok a vložiť ho do Správne miesto). Návštevník stránky vyplní povinné polia (napríklad svoje meno, e-mail, správa) a plugin cez jednu schránku (nazvime to "odosielateľ") odošle list do inej poštovej schránky ( "príjemca").

teda musíte si zaregistrovať 2 schránky - odosielateľa a príjemcu. Je lepšie vytvoriť odosielateľa v pošte Yandex a príjemcom je oficiálna poštová schránka vášho webu.

Doplnok Contact Form 7 už nejaký čas prestal fungovať - ​​neposielal listy, ale jednoducho skrútil sťahovanie. Našiel som riešenie - nainštaloval som ďalší bezplatný doplnok WPForms Lite. Je veľmi jednoduché nastaviť, nevyžaduje inštaláciu ďalších pluginov na konfiguráciu odosielania správ, ale všimol som si, že to nefunguje pri každom e-maile. Na jednej mi listy neprišli, ale na druhej sa posielajú.

Nastavenie doplnku Contact Form 7. Pokyny

1) Registrujeme schránku odosielateľa na pošte Yandex (akýkoľvek, bez ohľadu na to, jeho názov nie je dôležitý pre fungovanie doplnku a nebude viditeľný pre návštevníkov). Bude slúžiť ako prekladisko listov.

2) Nastavenie kontaktného formulára doplnku Contact Form 7. Kliknite "zmena" a za "Šablóna formulára". Tu je príklad toho, ako by to malo vyzerať s povinnými poľami: používateľské meno, e-mail, správa a tlačidlo odoslania:

Vaše meno (povinné)

Váš email (povinné)

Správa

3) tab "list" je zodpovedný za vzhľad listov, ktoré dostanete.

Komu- adresa poštovej schránky príjemcu

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

Téma –

Telo písmena –

Dostanete teda list, v ktorom budú uvedené všetky vyplnené polia formulára spätnej väzby. Tým je konfigurácia doplnku Contact Form 7 dokončená..

Pozor! Aby mohol doplnok Contact Form 7 odosielať e-maily, musíte si nainštalovať ďalší doplnok WP-Mail-SMTP. Je to on, kto prepojí dve poštové adresy odosielateľa a príjemcu a vykoná systémové funkcie na odosielanie listov.

Nastavenie doplnku WP-Mail-SMTP. Inštrukcia

Z e-mailu- adresa poštovej schránky odosielateľa

Z mena– napríklad názov vašej organizácie alebo vaše meno

poštová zásielka- funkcia odosielania listov. Vyberte „Odoslať všetky e-maily WordPress cez SMTP“

Hostiteľ SMTP- pre poštu Yandex smtp.yandex.ru

SMTP port- pre poštu Yandex 465

Šifrovanie– Používajte šifrovanie SSL

Overenie– Áno: Použiť overenie SMTP

užívateľské meno– prihláste sa u svojho odosielateľa pošty

heslo- heslo na vašom odosielateľovi pošty

Nastavenie dokončené. Uložte zmeny.

Ako umiestniť kontaktný formulár 7 na stránku

V nastaveniach kontaktného formulára venujte pozornosť riadku v hornej časti:

Musí sa skopírovať a prilepiť na akúkoľvek stránku. Všetko je pripravené.

Nevytvára žiadne ťažkosti, najmä podľa mojich pokynov. Všetko funguje dobre a e-maily sa odosielajú. Navrhujem tiež, aby ste si prečítali článok o tom, čo je najlepšie pre WordPress. Nájdete tam veľa zaujímavostí.

Dobré popoludnie milí čitatelia blogu. Pokračujeme v téme formulárov spätnej väzby na WordPress. A keďže hovoríme o nich, navrhujem dnes hovoriť o doplnku WP Contact Form 7. Ďalej vám poviem krok za krokom nastavenie doplnku a tiež stručne opíšem doplnky pre tento doplnok.

Navigácia na stránke:

Popis kontaktného formulára WordPress 7

2) Aktivujte doplnok Contact Form 7 v administrácii WordPress.

3) Prejdite na novovytvorenú kartu, ako je znázornené na obrázku:

4) Kliknite na kartu „Pridať nový“ a zadajte predvolený jazyk formulára alebo vyberte požadovaný jazyk

5) Zadajte názov kontaktného formulára a kliknite na tlačidlo Uložiť.

6) Teraz máme krátky kód, ktorý už možno skopírovať a vložiť do príspevku alebo bočného panela, aby sa zobrazil formulár - contact-form-7 id="1252" title="(!LANG:Formulár číslo 1" (надо взять в квадратные скобки как на рисунке).!}

7) Takto vyzerá náš formulár:

Samozrejme, nie je to veľmi krásne, ale nikto sa neobťažuje vytvárať si vlastné štýly alebo vytvárať svoj vlastný formulár a vkladať tam vložky.

Ako zobraziť kontaktný formulár 7 na ľubovoľnom mieste v šablóne

V odseku 6 nastavenie krok za krokom Ukázal som vám, ako môžete vziať skrátený kód CF7 a ďalej som opísal, že tento kód je možné zobraziť vo widgete alebo v príspevku, stránke. Okrem toho chcem povedať, že kontaktný formulár 7 môžete zobraziť kdekoľvek v šablóne. Ak to chcete urobiť, vložte nasledujúci jednoduchý kód:

To je všetko, ak ste urobili všetko správne, dostanete výstup Kontaktného formulára 7 na ľubovoľnom mieste v šablóne WordPress.

Prispôsobenie kontaktného formulára 7 vstupných polí

Vďaka nemu budete mať navyše také boxy ako:

Konfigurácia odpovede na odpoveď pre kontaktný formulár 7

AT Nová verzia plugin CF7 4.4 a vyšší, vývojár odporúča zadať do poľa from (tu je na skine nižšie)

správnu adresu, ktorá sa zhoduje s vašou doménou. Pri pohľade z kože a toto odporúčanie vytvára problém:

Ako zaslať odpoveď používateľovi z mailera?

Ak len kliknete na odpoveď, odpovieme na našu vlastnú poštu, v skutočnosti odpovieme sami. Je to veľmi nepohodlné, pretože musíme manuálne skopírovať adresu používateľa do poštovej schránky a až potom odpovedať.

Riešenie tohto problému je, a ako vždy, jednoduché. potrebujete v teréne Ďalšie hlavičky pridať kód:

Odpovedať:

Samozrejme, váš e-mail-sh je potrebné nahradiť krátkym kódom vašej pošty. Pozri skin nižšie:

Teraz, keď dostanete list so spätnou väzbou WordPress, môžete kliknúť na korešpondenciu a odpovedať a vaša odpoveď bude odoslaná na správny e-mail.

Ak po týchto krokoch narazíte na problém, mali by ste si prečítať príspevok kliknutím na odkaz. V doplnku Contact Form 7 sú popísané hlavné problémy a príčiny problémov.

To je všetko. Dúfam, že ste pochopili, ako je plugin a jeho rozloženia nakonfigurované.

Tento materiál podrobne popíše konfiguráciu Contact Form 7 - plugin pre tak populárnu platformu na vytváranie a propagáciu stránok na globálnom webe, ako je WordPress. Tento softvérový nástroj vám umožňuje vytvárať a konfigurovať kontaktné formuláre.

Trochu o WordPress

Jeden z najpopulárnejších a najbežnejších nástrojov na vývoj a obsah informačné zdroje je WordPress. Spočiatku toto softvér bola zameraná na tvorbu jednoduchých blogov. Ale potom špecializovaní špecialisti doplnili jeho funkčnosť, čo umožnilo vytvárať ďalšie internetové zdroje pomocou tohto redakčného systému.

Silné a slabé stránky tejto platformy na vytváranie a propagáciu webových stránok

Výhody tohto softvérová platforma takéto:

Jednoduchosť a otvorenosť zdrojových kódov.

Pôsobivé množstvo základných informácií.

Schopnosť rozvíjať akýkoľvek tematický zdroj na internete v čo najkratšom čase.

Vysoký výkon bez dodatočných softvérových doplnkov (zásuvných modulov).

Nevýhody v tomto prípade sú však nasledovné:

Stránky vytvorené na základe "Wordpress" nezvládnu veľké zaťaženie.

Pri inštalácii ďalších mini-programov alebo, ako sa tiež nazývajú, zásuvných modulov dochádza k zníženiu výkonu internetového zdroja.

a prečo potrebujú stránky založené na platforme WordPress

Základná funkcionalita redakčného systému ako je WordPress je veľmi skromná. Stačí vytvoriť najzákladnejšie blogy a webové stránky. Aby vývojári nejako zlepšili funkčnosť softvérovej platformy a dodali jej flexibilitu, musia nainštalovať špeciálne miniprogramy, ktoré sa v odbornom žargóne nazývajú plug-iny. Jedným z nich je Kontaktný formulár 7. Nastavenie pluginu umožňuje vytvorenie formulára spätnej väzby s rozšírenou úrovňou funkcionality na konkrétnej stránke redakčného systému.

Špecializácia "Kontaktné formuláre 7"

Ako už bolo uvedené, vytváranie spätnej väzby medzi návštevníkom a správcom internetového zdroja založeného na platforme Wordpress je hlavnou úlohou Kontaktného formulára 7. Nastavenie pošty, úprava šablóny, odosielanie rôznych súborov nie je ani zďaleka úplný zoznam možností. že tento mini program. Zároveň bude zaťaženie hardvérových zdrojov stránky relatívne malé a jej prítomnosť nepovedie k výraznému zníženiu výkonu stránky alebo blogu.

Poradie inštalácie pluginu

Existujú tri spôsoby, ako nainštalovať doplnky na platformu WordPress:

Stiahnutím archívu ZIP z globálneho webu a jeho „nahraním“ do príslušného adresára internetového zdroja.

Používanie rôznych typov FTP klientov.

Najbezpečnejšia z troch možností inštalácie doplnkov je posledná. V tomto prípade programovací kód je stiahnutý z oficiálnej stránky a rozhodne neobsahuje rôzne druhy škodlivých, nebezpečných fragmentov. Samotné poradie inštalácie doplnku je v tomto prípade nasledovné:

Prejdite na panel správcu WordPress.

Potom sa musíte presunúť do sekcie "Pluginy".

V okne, ktoré sa otvorí, vyberte „Pridať nový“.

Do vyhľadávacieho panela zadajte názov doplnku - Kontaktný formulár 7 - a potom presuňte ukazovateľ myši na tlačidlo "Hľadať" a urobte jedno kliknutie. Potom sa spustí pátracia operácia. softvér.

Po dokončení sa zobrazí zoznam nájdených pluginov. V tomto zozname nájdeme ten, ktorý potrebujeme, a klikneme na tlačidlo s názvom „Inštalovať“, ktoré sa nachádza oproti nemu.

Potom redakčný systém tento plugin automaticky stiahne a nainštaluje.

Ďalším krokom je aktivácia nainštalovaného softvéru. Ak to chcete urobiť, prejdite na kartu „Pluginy“ a v zozname nájdite Kontaktný formulár7. Vedľa je nápis: „Aktivovať“ a kliknite naň raz myšou.

Aktualizujeme administračný panel redakčného systému a medzi jeho položkami nájdeme Kontaktný formulár7. Toto je podmienka úspešnej inštalácie tohto obľúbeného a funkčného pluginu.



Algoritmus na nastavenie "Kontaktné formuláre 7"

Nastavenie kontaktného formulára 7 pozostáva z nasledujúcich položiek:

Tvorba nový formulár alebo úpravou starého, ktorý bol vytvorený pri inštalácii doplnku. Prax ukazuje, že vo väčšine prípadov je lepšie využiť možnosť vytvorenia nového formulára.

V ďalšej fáze vyberte jazyk formulára a nastavte jeho názov.

Potom, ak je to potrebné, prekonfigurujte jeho šablónu.

Vykonané zmeny uložíme.

Vytvoríme novú stránku s kódom získaným skôr.

V záverečnej fáze musíte prejsť na stránku a skontrolovať správnu činnosť vytvoreného prvku rozhrania internetového zdroja.

Vytvorenie nového formulára

Ihneď po aktivácii tento doplnok vytvorí predvolený formulár na kladenie otázok od návštevníkov webových stránok alebo blogu. Samozrejme sa dá správne upravovať a konfigurovať. Bude však oveľa jednoduchšie odstrániť tento a vytvoriť nový pomocou Plný set všetky potrebné funkcie. Ak to chcete urobiť, musíte vykonať nasledujúce kroky:

Prejdite do ponuky tohto pluginu a vyberte položku „Formuláre“.

V okne, ktoré sa potom otvorí, musíte začiarknuť políčko vedľa položky „Kontaktný formulár1“.

Potom nad ním v rozbaľovacom zozname "Akcie" vyberte položku "Odstrániť".

V odpovedi sa zobrazí otázka na potvrdenie vykonaných akcií. Vymazanie formulára musíte potvrdiť a kliknúť na tlačidlo „Áno“.

Ďalej vyberte položku ponuky: "Vytvoriť nový" v administratívnom paneli "Wordpress" "Kontaktný formulár7".

V okne, ktoré sa otvorí, v rozbaľovacom zozname vyberte jazyk rozhrania budúceho formulára - "ruština". Potom kliknite na tlačidlo "Vytvoriť".

Potom sa predvolene vygeneruje počiatočný kód nového formulára spätnej väzby pre WordPress. Potom budete musieť vykonať operácie, ako je nastavenie kontaktného formulára 7.

Nastavte názov formulára

Po vykonaní všetkých vyššie uvedených akcií sa zobrazí okno na zadanie názvu nového formulára v Kontaktnom formulári 7 Style. Toto presné nastavenie začína na jednej strane touto jednoduchou operáciou. Ale názov formulára je lepšie dať na základe optimalizácia pre vyhľadávače. Preto bude v tomto prípade najoptimálnejší napríklad „Formulár spätnej väzby“ alebo „Spýtajte sa správcu stránky“. Hneď ako sme sa rozhodli pre názov tohto prvku rozhrania, napíšeme ho do príslušného poľa okna dotazu.



Úprava šablóny "Kontaktné formuláre 7"

V tom istom okne s názvom vytvoreného formulára sú 4 záložky. Prvým je šablóna. Štandardne sa tu tvorí iba 5 prvkov:

Miesto, kde je napísané meno návštevníka internetového zdroja.

Pole na vytočenie e-mailovej adresy návštevníka, ktorý otázku položil.

Ďalšie pole vám umožňuje zadať predmet otázky.

Posledným predvoleným prvkom formulára je tlačidlo s názvom Odoslať.

V prípade potreby je možné text v tomto poli upraviť a pridať ďalšie prvky rozhrania. Na tento účel stačí vybrať ľubovoľný kód textový prvok(napríklad časť kódu, kde je uvedený predmet správy a skopírujte ho pomocou obsahové menu v rovnakom poli na iné miesto. Vpravo sú parametre (podrobne o nich budeme hovoriť v nasledujúcom odseku), v ktorých vyberáme prvok, ktorý nás zaujíma. Potom sa vedľa rozbaľovacieho zoznamu zobrazí požadovaný kód. Potom skopírujte tento kód a vložte ho namiesto kódu predmetu správy. Názov prvku je vybraný podľa vášho uváženia.

Úprava dĺžok poľa a ďalšie

Na tom istom mieste môžete zmeniť zadanie v Kontaktnom formulári 7. Úprava šírky ľubovoľného textového poľa sa vykonáva takto:

Napríklad musíte zvýšiť počet znakov v mene návštevníka internetového zdroja na 55. Štandardne ich je 40.

Ak to chcete urobiť, pridajte čísla 60/55 v kóde na konci. Výsledkom bude kód. Po uložení zmien bude dĺžka tohto poľa rovná 60 a maximálne množstvo znaky, ktoré je možné do neho zadať - 55.

Podobne môžete zmeniť veľkosť textového poľa správy. Iba v tomto prípade je potrebné zmeniť kód tohto prvku nasledovne. V tomto prípade je 40 počet písmen v jednom riadku a 30 je celkový počet výrazov v tomto prvku rozhrania v Kontaktnom formulári 7. Vzhľad samotného formulára je presne nakonfigurovaný výberom hodnôt parametrov každého jednotlivca. prvok. Preto sa odporúča uviesť špecifické hodnoty každého parametra uvedeného v tejto časti v kóde každého prvku.



Ďalšie karty formulárov

Ako už bolo uvedené, prvá karta sa nazýva Šablóna formulára. Ďalším v tomto okne je "Letter". Nastavuje parametre miesta, na ktoré sa bude posielať pošta z tohto internetového zdroja. Na záložke „Oznámenie“ sa tvorí text správy, ktorý sa zobrazí v prípade úspešného odoslania listu. Nechýba ani možnosť pripraviť si správu pre prípad, že by ste pomocou nástrojov nemohli kontaktovať správcu stránky. Posledná karta v Kontaktnom formulári 7 – „Ďalšie nastavenia“. Obsahuje tie parametre, ktoré sa v praxi používajú veľmi, veľmi zriedkavo. Môžete ho použiť napríklad na nastavenie sledovania textu zadaného používateľom pomocou Yandex - metriky.

Polia, ktoré je možné pridať pomocou tohto doplnku do tohto formulára

Prispôsobenie kontaktného formulára 7 pre Wordpress vám umožňuje pridať do formulára spätnej väzby nasledujúce prvky rozhrania:

• Testovacie pole je univerzálny prvok rozhrania, do ktorého môžete zadať ľubovoľnú sadu znakov.

  E-Mail - miesto na zadanie názvu elektronickej schránky.

  URL – pole na zadanie adresy webovej stránky.

  Telefónne číslo – umožňuje zadať telefónne číslo v medzinárodnom formáte.

  Prvok „Číslo (spinbox)“ umožňuje vytvoriť vstupné pole ľubovoľnej celočíselnej hodnoty (napríklad vek návštevníka).

  Element „Číslo (Posuvník)“ pridáva do formulára posuvník, pomocou ktorého môžete vybrať číselnú hodnotu zo zadaného rozsahu.

  Položka "Dátum" vytvára špeciálne vstupné pole, v ktorom môžete zadať požadovaný dátum. Po aktivácii tohto prvku rozhrania sa nižšie zobrazí kalendár, v ktorom si môžete ihneď vybrať požadovaný dátum.

  Položka rozbaľovacej ponuky „Textové pole“ je zase určená na písanie textovej časti e-mailu.

  Ďalšia položka - "Rozbaľovacia ponuka" - vám umožňuje vybrať požadovaný parameter z pevného zoznamu.

  Ale "CheckBoxes" je navrhnutý tak, aby vybral jednu alebo viac hodnôt z daného zoznamu.

  Prvok rozhrania „Radio Buttons“ je takmer identický s predchádzajúcim. Jediný rozdiel je v tom, že v tomto prípade si môžete vybrať len jeden správna možnosť, zatiaľ čo začiarkavacie políčka môžu mať viacero platných hodnôt.

  Položka "Akceptácia" umožňuje pridať do vytvoreného formulára iba jedno zaškrtávacie políčko. Spravidla slúži na oboznámenie sa s akýmikoľvek podmienkami a bez ich akceptovania nebude možné v budúcnosti posielať e-mail.

  Položka "Menu" vám umožňuje vytvoriť špeciálnu sekciu v rozhraní, ktorá bude chrániť vašu poštovú schránku pred spamom. V tomto prípade bude pred odoslaním potrebné dať správnu odpoveď na položenú otázku.

  Druhou možnosťou zabezpečenia je CAPTCHA. Po jeho výbere sa do formulára pridá samostatná sekcia, v ktorej sa zobrazí obrázok so symbolmi a doplnkové pole na ich zadanie.

  Ďalšia položka je "Odoslanie súboru". Umožňuje pridať k textu listu súbor s rôznymi vysvetlivkami a komentármi pre správcu zdroja.

  Posledná položka - "Tlačidlo Odoslať" - umožňuje pridať príslušný prvok rozhrania.

Uložte zmeny

Po nastavení potrebných hodnôt a správnom nakonfigurovaní formulára musíte toto všetko uložiť. Aby sme to dosiahli, v okne úpravy doplnku sa dostaneme do jeho hornej časti. Tu by malo byť tlačidlo Uložiť. Presuňte naň ukazovateľ manipulátora a urobte naň jedno kliknutie. Ako odpoveď sa zobrazí kód formulára, ktorý vyberieme pomocou rovnakého ukazovateľa myši a skopírujeme. Ďalej sa presuňte na administračný panel redakčného systému v položke „Stránky“. Potom vytvoríme novú stránku s potrebným názvom (napríklad „spätná väzba“, „Kontakty“ alebo „Položte otázku správcovi zdroja“). Potom preložíme vytáčací kurzor do vstupného poľa pre jeho kód. V tomto prípade je potrebné v paneli možností prepnúť režim kódovej voľby na "Text". Potom prilepte predtým získaný kód formulára. Ďalej na pravej strane rozhrania nájdeme tlačidlo „Publikovať“ a prejdeme naň myšou. V ďalšej fáze vykonáme jedno kliknutie ľavým tlačidlom myši na tento prvok rozhrania redakčného systému.



Kontrola výsledku

Po vykonaní vyššie uvedených manipulácií by sa malo pridať rozhranie internetového zdroja nová stránka, na ktorom sa zobrazia prvky špecifikované v Kontaktnom formulári 7. Nastavenie rozhrania je v zásade ukončené. Je potrebné iba skontrolovať správne nastavenia softvéru. Na to musíte ísť domovskej stránke webovú stránku, blog alebo portál. Potom v zozname stránok nájdeme tú, na ktorej bol umiestnený formulár spätnej väzby. Ideme na to, zadáme správne parametre do všetkých polí naraz a pošleme testovací list na našu poštu. Ako odpoveď by ste mali dostať informačnú správu o úspešnom dokončení tejto operácie. Potom s prázdne polia pokúsiť sa poslať ďalší e-mail. Potom by sa malo objaviť hlásenie, že je potrebné nastaviť všetky skontrolované parametre formulára. Ak boli v oboch prípadoch dosiahnuté výsledky uvedené vyššie, potom vytvorený formulár spätnej väzby funguje správne.

Výhody a nevýhody pluginov. Alternatívy

Výborným riešením pre začínajúceho vývojára na vytvorenie formulára spätnej väzby je miniprogram Contact Form 7. Nastavenie odosielania pošty, vytváranie prvkov rozhrania a ďalších dôležitých prvkov rozhrania je v tomto prípade väčšinou automatizované a vyžaduje minimálne používateľské znalosti. Preto pre jednoduchý internetový zdroj vstupný level a so začínajúcim administrátorom - to je skvelé riešenie. Ale koniec koncov, každý doplnok predstavuje dodatočné zaťaženie zdrojov webovej stránky, čo znižuje výkon. Výsledkom je, že pokročilejší používatelia odporúčajú odísť od takýchto ľahká cesta vytvorte formulár spätnej väzby. Môžete si ho vytvoriť aj sami pomocou HTML, CSS a JS, aj keď s menšou funkčnosťou. Tým sa zníži potreba výpočtových zdrojov stránky a výrazne sa zvýši úroveň výkonu.



Výsledky

Tento článok popisuje krok za krokom nastavenie kontaktného formulára 7. Tento plugin má skutočne vysokú úroveň funkčnosti, môžete ho použiť na vytvorenie akéhokoľvek formulára spätnej väzby. Na druhej strane použitie dodatočného pluginu v rámci redakčného systému zvyšuje záťaž Hardvér stránky. Preto sa začínajúcim správcom stránok založených na tomto redakčnom systéme odporúča používať tento plugin na takéto účely. Pokročilejší používatelia si vystačia aj bez Kontaktného formulára 7. V tomto prípade rozhodne nebudete musieť plugin konfigurovať.