Yoqa havolasining shakli modx evo uslublari.

Faylni Notepad++ da ochish

contact.html

qatorlar bo'ladi

tomonidan inklyuziv. Yak bachimo, tse konteyner z

id = "contact_form"

Bizning shaklimiz qanday?
Ushbu kodni asos qilib olib, biz yangi bo'lak yaratamiz
forma-tpl

Va biz kerakli to'ldiruvchilarni taqdim etamiz:

Gateway havolasi

Sizning ismingiz Email: elektron pochta orqali
:email:1" /> Mavzu
Ma'lumot so'rash
Texnik yordam Taklif
Xabar matni- pochta manzilini kiritish maydonini tavsiflaydi, ma'lumotlar turini ko'rsatadi va ushbu maydonni to'ldirishni talab qiladi.
Vzagali, hujumning ushbu parametrini to'ldirish uchun shablon: eform="[maydon tavsifi]:[kiritish kerak bo'lgan ma'lumotlar turi]:[majburiy maydon]:[yozuvni to'g'rilash haqida ma'lumot]:[yozuvni tekshirish qoidasi ]". Ale bizda uch martadan ko'proq etarli.

Xuddi shunday, bu parametr eform="Im::1" bilan to'ldiriladi.

[+verimageurl+] captcha ko'rsatilganligini bildiradi.

Biz bildirishnomalarni jo'natish haqida pochta xabarnomalaridan bir bo'lak yaratamiz

Keling, bir bo'lak yarataylik

rahmat-tpl

• Shuning uchun biz tezda veb-saytimizda aylanma yo'lning shaklini bilib oldik. Sizning ma'lumotlaringiz eng qisqa muddatlarda ko'rib chiqiladi va oqibatlari bo'lganligi sababli siz darhol uni rad qilasiz.


• Ma'lumot yuborildi: Ismingiz:


• [+muallif+] Sizning elektron pochtangiz:

[+email+]

[+verimageurl+] Xabar matni:[+matn+]

Biz yuborilgan bildirishnoma shakli bilan bo'lak yaratamiz

hisobot-tpl	Sizning ma'lumotlaringiz eng qisqa muddatlarda ko'rib chiqiladi va oqibatlari bo'lganligi sababli siz darhol uni rad qilasiz.
tomonidan:	Ismingiz:
Va bu joyga biz quyidagi kodni joylashtiramiz:	Sizning elektron pochtangiz:

Ushbu bildirishnoma [+author+] manziliga havolaning qoʻshimcha shakli uchun yuborilgan.

Men:

Tabriklaymiz: Bunda, avvalgidek, muallif tomonidan kiritilgan barcha ma'lumotlar [+muallif+] shaklida qo'shimcha to'ldiruvchi yordamida uzatiladi. Bunday holda, teri to'ldiruvchisi nomidan tegishli maydonning "nomi" atributining qiymatlari qo'shimcha havola shakliga (ism = "muallif", ism = "elektron pochta", ism) qo'shiladi. = "matn").

Biz katlama havolasi shaklini bosish orqali bo'lak hosil qilamiz Keling, nomlar bilan bo'lak yarataylik,Keling, nomlar bilan bo'lak yarataylik,Keling, nomlar bilan bo'lak yarataylik shakl

Sizning ismingiz Va biz strukturani u erga joylashtiramiz:[! elektron shakl?
&formid=`Yuborish` &tpl=`form-tpl` &to=`[elektron pochta himoyalangan]
` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Mening saytimga murojaat qiling!] Keling, nomlar bilan bo'lak yarataylik,Keling, nomlar bilan bo'lak yarataylik,Keling, nomlar bilan bo'lak yarataylik` &formid=`Yuborish`
- forma identifikatori, biz uni form-tpl shaklida ko'rsatdik&tpl=`form-tpl` - yoqa rishtasini shakllantirish uchun shablon&to=` - Ma'lumot yuborish uchun elektron pochta manzillari &mailselector=`otdel`- parametrdagi (,) bo'linmalari manzillari ro'yxatidan bitta manzilni tanlashda tanlangan shakl maydonini kiritadi.
&to.
Bizning tanlovimizda nimalar kiritilganligi ro'yxati mavjud u chanci form-tpl, de
otdel olinganlar bilan mos ravishda 1,2 va 3 qiymatini oladi.
&report=`report-tpl`- jo'natilgan ma'lumotlar shabloni

&rahmat=`rahmat-tpl`

[+verimageurl+] - ma'lumot yuborilgandan so'ng ko'rsatiladigan bildirishnoma, unda quyidagi kod joylashtirilgan:

Bizning manzillarimiz

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



Elektron pochta: [email protected]

Qo'shimcha ofis

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



Elektron pochta: [email protected]

((shakl))

Kontaktlar sahifasida biz kontaktlar bo'limiga bosing:

((aloqa))

O'zgaruvchan uslublar

Biz tugmalarimizning tavsifi uchun uslublar bilan faylni bilamiz:

chap chekka: 108px;
to'ldirish: 5px 10px;
fon: #cecece;
chegara: 1px qattiq #888888;
}

Yuklab olish va o'chirish tugmalariga ruscha harflar qo'yganlar orqali badbo'y hid yo'q qilindi.

Kursor tugma ustiga kelganida kursor ko'rinishi o'zgarmasligi ham menga to'g'ri kelmaydi, men uni tuzatmoqchiman.
Birinchidan, kursorni kursor ustiga olib kelganda tugma rangini o'zgartiradigan qilib yaratamiz.
to'ldirish: 5px 10px;
fon: #cecece;
chegara: 1px qattiq #888888;
}
Xo'sh, keling, o'ng tomonga captcha ni buzamiz.
Shunday qilib, men yaratgan uslubni tasvirlash o'rniga, biz buni kiritamiz:
to'ldirish: 5px 10px;
#aloqa_shakl shakli .submit_btn (
chegara: 1px qattiq #888888;
chap chekka: 55px;
/*Tugmalarning chap kiritishini oʻzgartirish mumkin*/
}
#aloqa_shakli shakli .submit_btn:hover (
chap chekka: 55px;
}

fon: #505050;

/*Tugma rangi kursor kursor ustiga olib kelinganda belgilanishi mumkin*/ rang: #fff;/*Matn rangini o‘zgartirish*/ kursor: ko'rsatgich; /*Kursor ko'rinishini o'zgartirish*/

#aloqa_shakli img ( to'ldirish: 0 0 0 90px; :

/*O‘ngdagi kod bilan rasmni buzing*/

Hamma narsa to'g'ri bo'linganligi sababli, men hujumning shaklini ko'raman:

Keling, shaklni to'ldirishga va varaqni yuborishga harakat qilaylik. Shuning uchun biz vikoristamomiz mahalliy server

, siz topishingiz mumkin bo'lgan barcha barglar, siz papaga hayron bo'lishingiz mumkin

C:\xampp\tmp\sendmail\

.

[[!FormIt?

&hooks=`spam,email` &emailTpl=`email-tpl` &emailTo=`[[++emailsender]]` &emailSubject=`Sayt sahifasi [[++site_url]]` &validate=`ishchi email:blank,name:kerak, email: elektron pochta: talab qilinadi, xabar: talab qilinadi: stripTags, telefon: talab qilinadi` &successMessage=`

Dyakuyu, kitobingiz yuborildi.

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

[[+fi.name]] Telefoningiz*:

[[+fi.phone]] Sizning elektron pochtangiz*:

Va bu joyga biz quyidagi kodni joylashtiramiz: [[+fi.email]]

[+validationmessage+]

[[+fi.message]]

Keling, kodni ko'rib chiqamiz va pastga tushamiz: &ilgaklar - bu yerda turli ilgaklar qo'shilgan, jumladan, o'z-o'zidan yozilganlari: bizning versiyamizda ikkita standart mavjud: span - spam va elektron pochtadan oddiy himoya - oddiy, ma'lumotlarni yuborish uchun. Pochta skrinshoti

.

Men sizga videodagi kancalar haqida aytib beraman.

&emailTpl - varaq dizayniga ega bo'lak, quyidagi kodni o'z ichiga oladi:

Kimdan: [[+name]]

Telefon: [[+telefon]]

E-mail: [[+email]] Xabar: [[+message]]&emailTo - shakl qo'llaniladigan elektron pochta manzillari, bu yigitga buyurdi

tizimli ravishda sozlanmagan

(kalit) ++emailsender

&emailSubject - varaqning suiiste'mol qilinayotgan mavzusi

&validate - spamdan himoya qilish uchun majburiy maydonlarni va ko'pincha maydonlarni to'ldirishni talab qiladi

&successMessage - muvaffaqiyatli kuchdan keyin bildirishnoma

Men forma kodiga qaramayman, kim video haqida qayg'uradi va hujjatlarni o'qiydi: docs.modx.com/extras/revo/formit

Fayllarni formaga biriktirish

Hissalarni biriktirish va yuborish imkoniyatiga ega bo'lish uchun siz forma tegiga kirishingiz kerak

Fayl biriktirish

[[!+fi.error.upload]]

Belgilash katakchalari va variantlarni qayta ishlash

Bir tomondan bir nechta shakllar

Faqat teri shaklini harflar bilan yozing

&submitVar=`Men ingliz tilidaman`

teri shakli o'z nomiga ega. Spamga qarshi kurash Qanday qilib aytishingizdan qat'iy nazar, siz albatta spamga tushib qolasiz - juda

samarali usul u bilan kurashish uchun, uni o'zingiz sinab ko'rishingiz mumkin. Deyarli barcha tijorat saytlarida aloqa shakli mavjud bo'lgan aloqa sahifasi mavjud bo'lib, u orqali mijozlar sayt ma'muriga yozishlari mumkin. Bugun biz qanday qilib tezda aloqa shaklini yaratishni ko'rib chiqamiz. Qo'shimcha to'plam uchun yoqa havolasi shaklini amalga oshiramiz

Format

Avvalo, biz shaklning o'zi saqlanadigan bo'lak yaratamiz, keling, "kontakt-shakl" qismini unutmang va uni standart shaklning yangi kodiga joylashtiramiz, men asosan yuklash wikilari bilan saytlar quraman, shuning uchun men' Men standartni olaman, biroz qayta ishlangan, bu statik kod quyidagicha bo'ladi:

Shaxsiy ma'lumotlarni qayta ishlash vaqti

Koristuvalnitska erlari

[+validationmessage+]

Sizning tashqi ko'rinish Mening formam loyiha uchun stilize qilingani ajablanarli bo'ladi, css uslublari vikladati ne bachu sensu.

Bu erda siz boshqa shakllarni ko'rishingiz mumkin getbootstrap.com/css/#forms

Va endi dinamik kodni to'g'ri sintaksisga muvofiq qayta ishlaymiz. u bilan kurashish uchun, uni o'zingiz sinab ko'rishingiz mumkin.і Bugun biz qanday qilib tezda aloqa shaklini yaratishni ko'rib chiqamiz., Keling, qadam tashlaylik.

[[+fi.error.name]]

[[+fi.error.email]]

[[+fi.error.pfone]]

[[+fi.error.message]]

Shaxsiy ma'lumotlarni qayta ishlash vaqti
[[+fi.error.opd]]

Ushbu katakchani belgilash orqali men "Shaxsiy ma'lumotlar to'g'risida" gi 2006 yil 27 iyuldagi 152-FZ-sonli Qonunga muvofiq shaxsiy ma'lumotlarimni qayta ishlashga rozilik beraman va xaridorning roziligini qabul qilaman.

[+validationmessage+][[+fi.success:is=`1`:keyin=`

[[+fi.successMessage]]

`]] [[+fi.validation_error:is=`1`:then=`

[[+fi.validation_error_message]]

`]]

Endi buning o'rniga tpl-kontact-form deb nomlangan boshqa bo'lakni, shakllantiriladigan varaqni yaratamiz:

Ism: [[+ism]]

Email: [[+email]]

Telefon: [[+pfone]]

Telefon: [[+telefon]]

To'g'ri joydan o'rganishni boshlash mumkin bo'ldi:

[[! AjaxForm? Keling, nomlar bilan bo'lak yarataylik&snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email` &emailSubject=`Sayt haqida ma`lumot [[++site_url]]` &emailTo=`

` &validate=`name:required,email:required` &validationErrorMessage=`Shakl tugash arafasida!` &successMessage=`Xabarnoma muvaffaqiyatli yuborildi!` ]] Qiymatni o'zgartirishni unutmang email

pochta bo'limingizga.

1. Komponent hujjatlari: — FormIt
2. Bugun biz qanday qilib tezda aloqa shaklini yaratishni ko'rib chiqamiz. — docs.modx.com/extras/revo/formit

docs.modx.pro/components/ajaxform

Eksa - bu printsip va hammasi! CMF-da shlyuz shaklini qanday ko'rish bo'yicha dars MODX Revo

luution, vikory komponentlari va AjaxForm va FormIt.

FormIt va AjaxForm komponentlarini tayinlash FormIt - bu MODX Revolution uchun komponent (SNIPET), server tomonida shakllarni qayta ishlash uchun ishlatiladi. Oldin forma maydonlarini (tasdiqlash) tekshirishingiz mumkin

keyingi harakatlar , saytni spamni olib tashlashdan himoya qiling, shakl ma'lumotlarini elektron pochta orqali yuboring, to'ldirilgan shakllarning nusxalarini saqlang, boshqa saytga yo'naltirishni yarating (masalan, shaklni elektron pochta orqali muvaffaqiyatli topshirgandan so'ng), avtomatik yuborish funksiyasini o'chirib qo'ying. kel. Biroq, FormIt bilan AJAX orqali ishlash uchun siz vikory dan foydalanishingiz kerak

Shlyuzning robot shakli printsipi

MODX Revolution shlyuzining batafsil shakliga o'tishdan oldin, robotning asosiy algoritmini ko'rib chiqaylik.

Joriy sahifani forma bilan ochgandan so'ng (serverda sahifa yaratishda AjaxForm snippetidagi &form parametrida ko'rsatilgan bo'lakdan olingan) foydalanuvchi uni tugatishga o'tadi. To'ldirishni tugatgandan so'ng, foydalanuvchi "Yuklash" tugmasini va AjaxForm komponentini bosadi ( JavaScript kodi

) uni AJAX yordamida serverga yuboradi.

Ma'lumotlar serverida komponent FormIt snippetini ishga tushiradi va unga forma ma'lumotlarini yuboradi.

Ushbu ma'lumotlarni qayta ishlagandan so'ng, FormIt parchasi mijozga AjaxForm komponenti orqali uzatiladigan va mijoz sahifasida ko'rsatiladigan javobni hosil qiladi.

Tasdiqlash ijobiy bo'lishi mumkin (bu shakl tasdiqlanganligini va, masalan, ma'lumotlar pochta bo'limiga muvaffaqiyatli yuborilganligini anglatadi) yoki salbiy (masalan, shakl to'ldirilganda ma'lum so'rovlar amalga oshiriladi).

Gateway shaklini yaratish

MODX Revolution-da aylanma yo'lning shaklini yaratish uchun siz quyidagi asosiy shartlarni kiritishingiz kerak:

• Keling, hisobotning 2 va 4 boblarini ko'rib chiqaylik.
• Chantsi tomonidan HTML formalarini yaratish

Tpl.AjaxForm.example shablonini nusxalash orqali shlyuz havolasi bilan HTML formasini yaratishingiz mumkin.

Misol uchun, ko'chirilgan bo'lakka tpl.AjaxForm nomini bering. Endi bu bo'lakda 3 ta maydondan iborat tayyor HTML formasi bo'lishi mumkin: Ism, E-mail va Xabar. Shakl bilan ishlashni talab qiladigan asosiy faoliyatlar asosan yangi toifalarni qo'shish yoki mavjudlarini olib tashlashga qisqartiriladi. Kategoriya ostida bir-biriga bog'langan elementlar guruhi mavjud: yorliq, shakl elementi (kirish, tanlash, matn maydoni) va span elementi (tasdiqlashni ko'rsatish uchun ishlatiladi).:

Natijada, bu bo'lak HTML kodiga hujum qilish uchun zaifdir:

men*

Elektron pochta*

Telefon

Tabriklaymiz*

Toza [+validationmessage+]

AjaxForm snippetidan qasos olish uchun kod yaratish

Biz noyob manba bo'lgan shablonni ochamiz va hamma narsa uchun ishlatiladigan kodni kiritamiz.

[[! AjaxForm? Keling, nomlar bilan bo'lak yarataylik&form=`tpl.AjaxForm` &snippet=`FormIt` &hooks=`FormItSaveForm,email` &emailSubject=`Sinov bildirishnomasi` &emailTo=` Keling, nomlar bilan bo'lak yarataylik`&emailFrom=`

` &emailTpl=`tpl.email` &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^` &validationErrorMessage=` Shakl ishlamayapti!` &successMessage=`Xabarnoma muvaffaqiyatli yuborildi ` ] ]

• Keling, asosiy parametrlarni ko'rib chiqaylik:
• &form - shaklni joylashtirish uchun bo'lakni bildiradi (tpl.AjaxForm).
• &snippet - shakl hosil qiluvchi parcha (FormIt).
• & ilgaklar – shakl muvaffaqiyatli yangilangandan so‘ng FormIt snippetini tashkil etuvchi ilgaklar (1 - FormItSaveForm, 2 - elektron pochta).
• Kancalar - bu shakl tasdiqlangandan keyin ishga tushiriladigan skriptlar.
• Ular kimdir orqali buyurtma qilinadi va birma-bir ishga tushiriladi.
• Agar ulardan birida muammo bo'lsa, yechim boshlanmaydi.

Ushbu darsda biz 2 ta kancadan foydalanamiz.

Keling, o'chirishning shakllanishiga nima olib kelishi mumkinligini ko'rib chiqaylik.

Men sizga videodagi kancalar haqida aytib beraman.

Kimdan: [[+name]]

&emailTpl - varaq dizayniga ega bo'lak, quyidagi kodni o'z ichiga oladi:

Telefon: [[+telefon]]

FormItSaveForm kancasi ma'lumotlar bazasida shakllarni saqlash uchun ishlatiladi.

Pochta bo'limida nadsilannya ma'lumotlar shakllari uchun Hook elektron pochta topshiriqlari.

Darvoza havolasining robot shaklini namoyish qilish

Sahifada yoqa havolasi shakli bilan ish soati ostidagi asosiy fikrlar bunday tasvirlar yordamida namoyish etiladi.

MODX - tasdiqlanmagan yoqaning shakli