Zpětná vazba

tvé jméno

E-mailem:

Předmět zprávy

Žádost o informace
Technická podpora
Nabídka

Text zprávy

Zadejte tento kód:

Kde [+validační zpráva+]- Zodpovědnost za zobrazování chybových hlášení při vyplňování při odesílání formuláře.
action="[~[*id*]~]- označuje, že stránka, na které je volán úryvek, bude manipulátorem formuláře. Místo [~[*id*]~] MODx nahradí URL aktuálního dokumentu.
určuje id formuláře, které uvedeme při volání snippetu.
přístupový klíč štítku- nastavuje přístup k prvkům formuláře pomocí klávesových zkratek.
eform="E-mailová adresa:email:1"- popisuje pole pro zadání poštovní adresy, označuje typ zadávaných údajů a činí toto pole povinným. Obecně je šablona pro vyplnění tohoto parametru následující: eform="[popis pole]:[typ vstupních dat]:[je pole povinné]:[chybová zpráva vstupu]:[pravidlo ověření vstupu]" . Potřebujeme ale jen tři hodnoty. Podobně jako u tohoto parametru se vyplňuje eform="Name::1".
[+verimageurl+] je zodpovědný za zobrazení captcha.

Vytvořte blok, který bude návštěvníka informovat o odeslání zprávy

Vytvořte kus děkuji-tpl

Děkujeme, že jste použili formulář zpětné vazby na našem webu.

Vaše zpráva bude zvážena co nejdříve, a pokud bude vyžadovat odpověď, určitě ji dostanete.

Informace odeslány:

• Tvé jméno:[+autor+]


• Tvůj e-mail:[+e-mail+]


• Text zprávy:[+text+]

Vytvořte blok s formulářem odeslané zprávy

Vytvořte kus report-tpl a do jeho obsahu vložte následující kód:

Tuto zprávu odeslal návštěvník jménem [+author+] pomocí formuláře zpětné vazby.

V tomto bloku, stejně jako v předchozím, jsou všechny informace zadané uživatelem přenášeny pomocí zástupných symbolů ve tvaru [+autor+]. V tomto případě název každého zástupného symbolu odpovídá hodnotě atributu "name" odpovídajícího pole v bloku s formulářem zpětné vazby (name="author", name="email" name="text").

Vytvořte blok s voláním formuláře zpětné vazby

Vytvořte blok s názvem formulář a vložte tam strukturu:

[!eform? &formid=`Odeslat` &tpl=`form-tpl` &to=` [e-mail chráněný],[e-mail chráněný],[e-mail chráněný]` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Zpráva z mého webu`!]

Kde &formid=`Odeslat`- identifikátor formuláře, který jsme zadali v bloku form-tpl
&tpl=`form-tpl`- šablona formuláře zpětné vazby
&to=` [e-mail chráněný],[e-mail chráněný],[e-mail chráněný]` - E-mailová adresa pro zasílání informací
&mailselector=`oddělení`- nastavuje pole formuláře, které se použije při výběru jedné adresy ze seznamu adres oddělených čárkou (,) v parametru &na. V našem případě se jedná o rozbalovací seznam. v bloku form-tpl, kde oddělení nabývá hodnot 1,2 nebo 3 v závislosti na tématu zvoleném návštěvníkem.
&report=`report-tpl`- šablona zasílaných informací
&děkuji=`děkuji-tpl`- zpráva zobrazená po odeslání dat
&vericode=`1`- obsahuje ověřovací kód. Šablona musí obsahovat ověřovací pole a zástupný symbol [+vericode+].
&subject=`Zpráva z mého webu`- předmět zprávy, která má být odeslána

Vložení hovoru do formuláře zpětné vazby do šablony

Vytvořte kus kontaktní, do kterého umístíme následující kód:

Naše adresa

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



E-mail: ххххх@ххххх.ххх

Další kancelář

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



E-mail: ххххх@ххххх.ххх

((formulář))

Na stránce Kontakty zavoláme kontaktnímu bloku:

((Kontakt))

Změna stylů

Popis našich tlačítek najdeme v souboru stylu:

margin-left: 108px;
odsazení: 5px 10px;
pozadí: #cecece;
ohraničení: 1px plný #888888;
}

Vzhledem k tomu, že jsme do tlačítek Odeslat a Reset vložili ruské popisky, přesunuly se. Také se mi nelíbí, že když najedete na tlačítko, kurzor se nezmění, chci to opravit. Za prvé, nechejte tlačítko změnit barvu při najetí myší. No, posuňte captcha doprava. Takže místo popisu stylu, který jsem uvedl výše, vložíme toto:

#contact_form form .submit_btn (
margin-left: 55px; /*Změna levého odsazení tlačítek*/
odsazení: 5px 10px;
pozadí: #cecece;
ohraničení: 1px plný #888888;
}
#contact_form form .submit_btn:hover (
margin-left: 55px;
odsazení: 5px 10px;
pozadí: #505050; /*Nastavit barvu tlačítka při najetí myší*/
ohraničení: 1px plný #888888;
barva: #fff; /*Změnit barvu textu*/
kurzor: ukazatel; /*Změnit typ kurzoru*/
}
#contact_form form img(
výplň: 0 0 0 90px; /*Posunout obrázek s kódem doprava*/
}

Pokud je vše provedeno správně, formulář bude vypadat takto:

Nyní se pokusíme vyplnit formulář a odeslat e-mail. Protože používáme lokální server, všechny příchozí e-maily lze zobrazit ve složce C:\xampp\tmp\sendmail\ . Pamatujete si, že jsme tuto složku vytvořili při instalaci XAMPP?

Můžete si nastavit svůj vlastní seznam slov, která se mají generovat v captcha, to se provádí na stránce konfigurace systému Nástroje >> Konfigurace >> Uživatelé >> Slova pro generování CAPTCHA kódů :

Tím je integrace designu našich webových stránek do MODx dokončena. Zbývá rozložit naše stránky na nějaký hosting. To uděláme v další lekci.

Při vytváření této lekce byly použity materiály z webu.

Už mám pár lekcí o vytváření formulářů na FormIt ve spojení s - tento balíček má obě výhody: odesílání formulářů bez opětovného načítání, existuje vyskakovací okno, že zpráva byla odeslána atd. No, a tedy nevýhody: do kódu je přidán soubor js a css - což dává mínus rychlosti a výstup js neobsahuje požadovaný typ ve volání, kvůli tomu se ve validátoru objeví varování - nemusí být specifikováno v html 5.

Proto jsem se rozhodl dělat formuláře na čistém FormIt, o tom je dnešní lekce.

Označení HTML pro formulář nyní obsahuje následující kód:

Nic zvláštního, abych tak řekl, standard s označením z bootstrapu 4. Předělejme to s ohledem na syntaxi a zároveň vyhoďme přebytek, Russify, přidejte ochranu proti spamu:

[[!Formulovat? &hooks=`spam,email` &emailTpl=`email-tpl` &emailTo=`[[++emailsender]]` &emailSubject=`E-mail z [[++site_url]]` &validate=`workemail:blank,name:required, email :e-mail:vyžadováno,zpráva:požadováno:stripTags,telefon:požadováno` &successMessage=`

Děkujeme, vaše žádost byla odeslána.

` ]] [[!+fi.successMessage:default=``]]

Při analýze kódu přejděte shora dolů:

&hooks - jsou zde přidány různé háčky, včetně těch, které si sami napsali: v našem případě 2 standardní: span - jednoduchá ochrana proti spamu a email - povinný, pro odesílání dat do schránky. O zbytku háčků mluvím dostatečně podrobně ve videu.

&emailTpl - blok s písmenem, má následující kód:

Od: [[+jméno]]

Telefon: [[+telefon]]

E-mail: [[+e-mail]]

Zpráva: [[+zpráva]]

&emailTo - e-mailová adresa, na kterou se odesílají formuláře, v tomto případě je zadáno systémové nastavení (klíč) ++emailsender

&emailSubject – předmět odesílaného e-mailu

&validovat – předepisujeme povinná pole k vyplnění a často pole na ochranu před spamem

&successMessage - zpráva po úspěšném odeslání

Kód formuláře nebudu rozebírat, pro zájemce se podívejte na video a přečtěte si dokumentaci: docs.modx.com/extras/revo/formit

Připojování souborů k formuláři

Abyste mohli přikládat a odesílat přílohy, musíte se zaregistrovat ve formulářové značce

Enctype="multipart/form-data"

a podle toho přidejte pole pro přílohu souboru

Obsluha zaškrtávacích políček a možností

Více formulářů na jedné stránce

Stačí napsat výzvy každého formuláře

&submitVar=`název formuláře v angličtině`

každá forma má svůj vlastní název.

Bojujte proti spamu

Ať se vám to líbí nebo ne, ale se spamem se určitě setkáte – nejúčinnější způsob, jak se s ním vypořádat – můžete také vyzkoušet.

Téměř všechny komerční weby mají kontaktní stránku, která obsahuje kontaktní formulář, přes který mohou uživatelé psát do administrace webu. Dnes se podíváme na to, jak rychle vytvořit kontaktní formulář. Formulář zpětné vazby implementujeme pomocí balíčku formát spojené s balíčkem Formulář Ajax, nainstalujte je, pokud je nemáte nainstalované.

Vytvoření formuláře zpětné vazby na MODX Revo s povolením ke zpracování osobních údajů v souladu se zákonem č. 152-FZ „O osobních údajích“ ze dne 27. července 2006.

Nejdříve si vytvoříme chunk, do kterého se bude ukládat samotný formulář, ať je to ten chunk "kontakt-form" a dáme do něj kód standardního formuláře, já dělám hlavně weby pomocí bootstrapu, takže vezmu standardní šablona mírně pozměněna, její statický kód bude vypadat takto:

Váš vzhled bude jiný, protože můj formulář je stylizovaný pro projekt, nevidím smysl v rozvržení stylů css.

Další formuláře si můžete prohlédnout zde getbootstrap.com/css/#forms

A nyní předělejme kód na dynamický s přihlédnutím k syntaxi formát A Formulář Ajax, dostaneme následující.

Nyní vytvoříme další kus, který bude tvořit písmeno, nazvěme jej tpl-contact-form s následujícím obsahem:

Jméno: [[+jméno]]

E-mail: [[+email]]

Telefon: [[+pfone]]

Zpráva: [[+zpráva]]

No, začalo to dělat závěr na správném místě:

[[!AjaxForm? &snippet=`FormIt` &form=`kontakt-form` &emailTpl=`tpl-kontakt-form` &hooks=`spam,email` &emailSubject=`Zpráva z webu [[++site_url]]` &emailTo=` [e-mail chráněný]` &validate=`jméno:požadováno,e-mail:požadováno` &validationErrorMessage=`Formulář obsahuje chyby!` &successMessage=`Zpráva byla úspěšně odeslána!` ]]

Nezapomeňte změnit hodnotu emailTo na vaši poštu.

Dokumentace součásti:

1. FormIt — docs.modx.com/extras/revo/formit
2. Formulář Ajax — docs.modx.pro/components/ajaxform

To je v podstatě vše!

Chcete-li vytvořit formulář na Modx bez spamu, musíte jej vytvořit s dalšími neviditelnými poli:

1. Stažení a instalace komponent Ajaxform a Formit

2. Formulář se nazývá velmi jednoduše, musíte na to přijít

[[!AjaxForm? &snippet=`FormIt` &form=`tpl.AjaxForm..ru ` &emailTo=`info@site` &validate=`name:required,email:required,message:required,work-email:blank` &validationErrorMessage=`Formulář obsahuje chyby !` &successMessage=`Děkujeme za odeslání! Brzy vás budeme kontaktovat.` &emailTpl=`mailtpl` ]]

Nebo přes šablonový engine Fenom, jako je tento:

($_modx->runSnippet("!AjaxForm", [ "snippet" => "FormIt", "form" => "tpl.AjaxForm.example", "hooks" => "e-mail,spam" "emailFrom" => " [e-mail chráněný]", "emailSubject" => "Přihláška z daruse.ru", "emailTo" => " [e-mail chráněný]", "validate" => "jméno:vyžadováno,e-mail:požadováno,zpráva:požadováno,pracovní-e-mail:prázdný", "validationErrorMessage" => "Formulář obsahuje chyby!", "successMessage" => "Děkujeme za odeslání! Brzy se vám ozveme.", "emailTpl" => "mailtpl", ]))

Popis parametrů:

• snippet - snippet pro zpracování AjaxFormu, nastavte Formit - ten prostě posílá emaily
• form - form design chunk, je to ten, který je ve výchozím nastavení
• hooks - ochrana proti spamu
• emailFrom - adresa, ze které dopis přichází
• emailTo - adresa, na kterou je dopis doručen
• validate - validace, jsou zde také dvě neviditelná pole
• validationErrorMessage – zpráva, která se zobrazí v případě neúspěšného zadání polí
• successMessage – zpráva, která se zobrazí po úspěšném odeslání zprávy
• emailTpl - blok, který ukládá šablonu příchozího dopisu na poštu (přečtěte si o něm níže)

3. Poté přejdeme k našemu bloku návrhu formuláře, v tomto případě je to tpl.AjaxForm.example a přidáme následující dvě pole za značku formuláře.

Nyní by spam neměl projít vaším formulářem kvůli dvěma novým polím.

4. Vzhled příchozího dopisu

Standardně přijde dopis na poštu bez jakéhokoli formátování v nepříliš čitelném formátu. Pojďme si proto náš dopis trochu ozdobit příkladem.

Šablona e-mailu je jednoduchý kus, který zadáme v parametru emailTpl, zde je vše velmi jednoduché, napíšu příklad designu. Pokud máte dotazy, pište do komentářů.

mailpl:

Na stránce [[++site_url]] opustil aplikaci.

Jméno: [[+jméno]]