DOM voqealari

DOM hodisalarini kuzatish orqali siz forma bilan ishlashda kerakli vaqtda biror narsa qilishingiz mumkin. Misol uchun, ariza muvaffaqiyatli topshirilgandan so'ng, qalqib chiquvchi oynada "Rahmat" deb ayting yoki foydalanuvchini boshqa sahifaga yo'naltiring.

Shakl hodisalari ro'yxati

Wpcf7invalid Shakl serverga muvaffaqiyatli topshirilganda ishga tushirildi, lekin noto‘g‘ri kiritilgan maydonlar borligi sababli xat yuborilmadi. wpcf7spam Shakl serverga muvaffaqiyatli topshirilganda ishga tushirildi, ammo spam bilan bog‘liq bo‘lishi mumkin bo‘lgan faollik aniqlangani uchun xat yuborilmadi. wpcf7mailsent Shakl serverga muvaffaqiyatli topshirilganda va pochta qabul qiluvchiga yuborilganda yonadi. wpcf7mailfailed Shakl serverga muvaffaqiyatli topshirilganda ishga tushirildi, lekin xat yuborilmadi. Bu hosting pochta serveri ishlamasligi bilan bog'liq bo'lishi mumkin. wpcf7submit Shakl serverga muvaffaqiyatli yuborilganda, boshqa hodisalardan qat'i nazar, yonib ketadi. "Yuborish" tugmasini bosing - bu harakat ishladi. wpcf7beforesubmit Serverga yuboriladigan formData - forma ma'lumotlari bilan har qanday manipulyatsiyaga imkon beruvchi wpcf7submit hodisasidan oldin yong'inlar. Hodisa CF7 v4.9 da qo'shildi.

Quyidagi misollardagi kod shakl ko'rsatilgan joyda ishlatilishi kerak. Agar sizning formangiz saytning barcha sahifalarida ko'rsatilsa, unda yaxshi qaror kodni footer.php fayliga joylashtiradi, chunki bu shablon saytning barcha sahifalarida qo'llaniladi.

Wpcf7submit hodisasiga misollar

Quyidagi kod voqea ishlov beruvchisini ro'yxatdan o'tkazishning oddiy misolidir. Ushbu misolda, funktsiya wpcf7 sinfiga ega konteynerning wpcf7submit hodisasini tinglaydi va u sodir bo'lganda oddiygina ogohlantirish beradi, ya'ni "Yuborish" tugmasini bosganingizda, u darhol "Op, ular" xabarini keltirib chiqaradi. Meni Magadanga yuborishga harakat qilyapman! Shuni esda tutingki, wpcf7 klassi elementi ichida formasi bo'lgan DIV hisoblanadi; plagin bularning barchasini mustaqil ravishda yaratadi. Agar sahifada bir nechta shakllar mavjud bo'lsa, kod faqat birinchi topilgan shakl uchun ishlaydi. Albatta, siz keraksiz alert() ni foydaliroq amal bilan almashtirasiz, masalan, chiroyli animatsiya shaklni topshirish.

// Biz wpcf7 sinfiga ega bo'lgan formaga ega blokni qidirmoqdamiz (shaklga ega barcha divlarda mavjud) var wpcf7Elm = document.querySelector(".wpcf7"); // Tanlangan blok uchun wpcf7submit hodisasini kuzatib boring wpcf7Elm.addEventListener("wpcf7submit", function(event) ( alert("Yigitlar, ular meni... Magadanga jo'natmoqchi!"); // Yoki foydaliroq narsa ), noto'g'ri);

Agar siz ma'lum bir shaklni kuzatmoqchi bo'lsangiz (quyida maqolada muqobil, yanada oqilona echimlar bo'ladi), keyin konteyner identifikatorini ko'rsating:

// Biz identifikatori bo'yicha formaga ega noyob blokni qidiramiz var wpcf7Elm = document.querySelector("#wpcf7-f92-p95-o1"); // Bu erda biz oldingi misoldagi kabi wpcf7submit hodisasini kuzatamiz.

Yuqoridagi misollar bitta shakl bilan ishlash uchun mo'ljallangan. Agar sahifada bir nechta shakllar mavjud bo'lsa va siz wpcf7submit (yoki boshqalar) hodisasini hamma uchun kuzatishingiz kerak bo'lsa, biz voqeani alohida blokga emas, balki butun hujjatga biriktiramiz:

Document.addEventListener("wpcf7submit", function(event) ( alert("Kimdir shakl topshirdi! Qaysi biri? Hali bilmayman."); false);

Maydonlarga kiritilgan ma'lumotlarni qanday kuzatish mumkin

Maxsus ma'lumotlar hodisa ob'ektining detail.inputs xususiyati sifatida voqea ishlovchisiga uzatiladi. detail.inputs ma'lumotlar strukturasi ob'ektlar massivi bo'lib, har bir ob'ekt nom va qiymat xususiyatlariga ega. Aytaylik, formada 4 ta maydon mavjud. Biz koddan foydalanamiz:

Document.addEventListener("wpcf7submit", funktsiya(voqea) ( var inputs = event.detail.inputs; console.log(kirishlar); ), false);

Brauzer konsolidagi "Yuborish" tugmasini bosganingizda ma'lumotlar tuzilishi ko'rsatiladi:

Bizda har bir forma maydoni nomi (maydon nomi maydon tegidagi administrator panelida ko‘rsatilgan va kerakli atribut hisoblanadi) va uning qiymatiga kirishimiz mumkin.

Siz har bir sohadan o'tib, ma'lum biriga shunday munosabatda bo'lishingiz mumkin:

Document.addEventListener("wpcf7submit", function(event) ( var inputs = event.detail.inputs; // Sizning nomingiz bilan atalgan maydonni qidiring va (var i = 0; i) maydonni topishda ogohlantirishni suiiste'mol qiling.< inputs.length; i++) { if ("your-name" == inputs[i].name) { alert(inputs[i].value); break; } } }, false);

Hodisa ob'ektining boshqa xossalari mavjud bo'lib, ularni ishlov beruvchida ishlatishingiz mumkin.

Detail.contactFormId aloqa shaklining identifikatori. Ushbu identifikatorni administrator panelida ko'rish mumkin manzil satri shaklni tahrirlashda yoki shakl qisqa kodining o'zida. detail.pluginVersion Kontakt shakli 7 plagin versiyasi.detail.contactFormLocale formasi til kodi. Masalan, ru_RU. detail.unitTag aloqa formasining birligi tegi. Har bir shakl o'ziga xosdir, masalan, wpcf7-f92-p95-o1. Detail.containerPostId kontentida shakl mavjud postning identifikatori.

Siz barcha ma'lumotlarni quyidagicha ko'rishingiz mumkin:

Document.addEventListener("wpcf7submit", funktsiya(voqea) ( console.log(event.detail); ), false);

Muayyan shaklni qanday qayta ishlash kerak

Misol uchun, agar siz faqat ma'lum bir aloqa shakli (ID=123) bilan biror narsa qilishni istasangiz, quyida ko'rsatilgandek detail.contactFormId xususiyatidan foydalaning:

Document.addEventListener("wpcf7submit", function(event) ( if ("123" == event.detail.contactFormId) ( alert("ID = 123 bilan aloqa shakli."); // Boshqa biror narsa qiling ) ), noto'g'ri) ;

Contact Form 7 plaginida spam bilan qanday kurashish mumkin? Bir nechta mexanizmlar mavjud, ammo faqat bir juft mashhur: reCAPTCHA va Akismet.

Akismetni qanday o'rnatish va sozlash kerak? O'rnatish paytida WordPress plagin Akismet avtomatik ravishda o'rnatiladi, uni faollashtirish kifoya. Agar biron sababga ko'ra u erda bo'lmasa, unda quyidagi havolalar sizga yordam beradi:

Plaginni faollashtirgandan so'ng, sizdan hisobingizni faollashtirishingizni so'ragan xabar paydo bo'ladi:

Tugmani bosganingizda, siz plagin sozlamalari sahifasiga yo'naltirilasiz:

Akismet ishlashi uchun plagin sozlamalarida API kalitini ko'rsatishingiz kerak. Agar u mavjud bo'lmasa, "API kalitini olish" tugmasini bosing va ko'rsatmalarga amal qiling:

• O'chirish uchun ro'yxatdan o'tish. wordpress.com hisob qaydnomasidan foydalangan holda plagin veb-sayti
• Tanlov tarif rejasi(bepuli bor)
• "Ushbu saytni faollashtirish" tugmasini bosish orqali saytni xizmatning administrator paneliga qo'shish

Bu oddiy va tez jarayon. Saytni faollashtirgandan so'ng, tayyor sozlamalar bilan saytingizning boshqaruv paneliga qayta yo'naltirish paydo bo'ladi, ular saqlanishi kerak:

Akismet maydonni tekshirishni boshlashi uchun uni yaratishda qaysi qoida bo'yicha tekshirish kerakligini belgilashingiz kerak, masalan:

Akismet:author Ushbu parametrni foydalanuvchi nomi maydoniga qo'shing.
Misol: akismet:author_email Ushbu parametrni foydalanuvchining elektron pochta manzilini kiritish maydoniga qo'shing.
Misol: akismet:author_url Ushbu parametrni foydalanuvchi havolasini kiritish maydoniga qo'shing.
Misol:

Ushbu tekshirishni talab qiladigan barcha maydonlar uchun akismet:value parametridan foydalanish tavsiya etiladi. Yig'ilgan ma'lumotlarga asoslanib, Akismet spam yoki yo'qligini hal qiladi, shuning uchun uning to'liqligi muhimdir.

Aloqa shakli 7 bir necha turdagi bildirishnomalarga ega:

Bildirishnoma uchun yashil ramka Xabar muvaffaqiyatli yuborildi. Bildirishnoma uchun sariq ramka Ba'zi maydonlar xato bilan to'ldirilgan, maydon tekshiruvdan o'tmagan. Bildirishnoma uchun to'q sariq ramka Xabar shunday belgilangan spam Xabar uchun qizil ramka Xabar yuborilmadi

Endi siz foydalanuvchi nomi o'rniga "viagra-test-123" ni kiritish orqali shaklni Akismet himoyasi bilan sinab ko'rishingiz mumkin. Bunday ma'lumotlarga ega xabar spam sifatida belgilanadi va elektron pochta orqali yuborilmaydi.

Dastlab, Kontakt formasi 7 shakllari bo'lgan yorliq hissa qo'shuvchi roli va undan yuqori bo'lgan barcha foydalanuvchilar uchun mavjud. Shakllarni faqat muharrirlar va administratorlar tahrirlashi mumkin. Shakllarga kirish huquqlarini qanday o'zgartirish mumkin?

Kirish parametrlari wp-config.php faylidagi vosita ildizida yozilgan konstantalar yordamida o'zgartiriladi, masalan:

Aniqlash("WPCF7_ADMIN_READ_CAPABILITY", "variantlarni_boshqarish"); define("WPCF7_ADMIN_READ_WRITE_CAPABILITY", "opsiyalarni_boshqarish");

Odatiy bo'lib, sayt ma'murlari va super administratorlar boshqarish_opsiyalariga ega. Shunung uchun bu misol formalar ro'yxatiga kirish va ularni tahrir qilish imkoniyatini faqat ushbu rollarga ega foydalanuvchilarga beradi. Boshqa rollar plagin yorlig'ini ko'rmaydi.

WPCF7_ADMIN_READ_CAPABILITY Minimal rol yoki administrator paneliga kirish imkoniyati, ya'ni menyu va shakllar ro'yxatini ko'rsatish.
Standart: edit_posts WPCF7_ADMIN_READ_WRITE_CAPABILITY Minimal rol yoki shakllarni tahrirlash qobiliyati. Bu sozlama WPCF7_ADMIN_READ_CAPABILITY dan qattiqroq yoki unga teng boʻlishi kerak. Bu administrator paneliga kirmasdan shakllarni tahrir qila olmasligingiz bilan izohlanadi.
Standart: publish_pages

Bu qanday ishlashini yaxshiroq tushunish uchun ushbu konstantalardan foydalangan holda kodni (CF7 v4.9.1, capabilities.php fayli) ko'rib chiqing:

Add_filter("map_meta_cap", "wpcf7_map_meta_cap", 10, 4); funktsiya wpcf7_map_meta_cap($caps, $cap, $user_id, $args) ( $meta_caps = array("wpcf7_edit_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, "wpcf7_forms"_ADTEABC_APC_contact "wpc f7_read_contact_forms" => WPCF7_ADMIN_READ_CAPABILITY, "wpcf7_delete_contact_form" => WPCF7_ADMIN_READ_WRITE_CAPABILITY, " wpcf7_manage_integration" => "options_manage", "wpcf7_submit" => "read",); $meta_caps = apply_filters("wpcf7_map_meta_cap", $meta_caps); $caps = array_diff($caps, array_caps($meta_keys)); isset ($meta_caps[$cap])) ( $caps = $meta_caps[$cap]; ) return $caps; )

Koddan siz imkoniyatlar massivi wpcf7_map_meta_cap filtridan o'tishini va quyidagi ma'lumotlarni o'z ichiga olganligini ko'rishingiz mumkin:

Sukut bo'yicha massiv ( => publish_pages => publish_pages => edit_posts => publish_pages => manage_options => o'qing) Masalan, massiv konstantalarini o'zgartirgandan so'ng ( => manage_options => manage_options => manage_options => manage_options => manage_options = > o'qish)

Wpcf7_map_meta_cap filtri tufayli biz ushbu massivni o'zgartirishimiz mumkin. Bu usul bizni wp-config.php faylini tahrir qilishdan qutqaradi, lekin biz kod yozishimiz kerak bo'ladi, masalan, functions.php faylida:

Add_filter("wpcf7_map_meta_cap", "change_wpcf7_map_meta_cap"); funktsiyani o'zgartirish_wpcf7_map_meta_cap($meta_caps) ( // Yangi imkoniyatlar qiymatlari $replace_caps = array("wpcf7_edit_contact_form" => "manage_options", "wpcf7_edit_contact_forms" => "manage_options", "wpcf7_edit_contact_forms" => "manage_options", "wpcf7_edit_contact_forms" => "wpcf7_edit_contact_forms" ete_contact_form" => "boshqarish_opsiyalari",); array_replace ($meta_caps, $replace_caps); )

Kontakt shakli 7 sukut bo'yicha belgilash katakchalari va radio tugmachalarini qatorga joylashtiradi. Lekin buni ushbu maydonlar uchun teg sozlamalari va oddiy CSS qoidalari yordamida o'zgartirish mumkin.

Odatiy tasdiqlash qutilari shunday ko'rinadi:

Agar siz label_first parametrini tasdiqlash qutisi tegiga o'tkazsangiz, belgining katagiga nisbatan ko'rinishi teskari bo'ladi:

Ustundagi belgilash katakchalarini tartibga solish uchun stil qatorini qo'shing CSS fayli Mavzular:

Span.wpcf7-list-item (displey: blok; )

Belgilash katakchalarini jadval sifatida tartibga solish uchun mavzuning CSS fayliga uslub qatorini qo'shing (qo'shimcha ravishda label_first parametri ishlatilgan):

Span.wpcf7-list-item (displey: jadval-qator; ) span.wpcf7-list-item * (displey: jadval-hujayra; )

Odatiy bo'lib, 7-shakl bilan aloqa shakli qayerda ishlatilishidan qat'i nazar, saytning barcha sahifalarida JavaScript va CSS-ni yuklaydi. Texnik jihatdan, plagin boshqacha ishlay olmaydi, lekin uni "so'rash" mumkin.

Sukut bo'yicha true qiymatiga ega doimiy WPCF7_LOAD_JS mavjud bo'lib, u plagin kodida aniqlanadi va saytning barcha sahifalarida JavaScript-ni yuklash uchun javobgardir. Wp-config.php fayliga quyidagi kodni kiritish orqali uni bekor qilish mumkin:

Aniqlash("WPCF7_LOAD_JS", noto'g'ri);

Ushbu kod plagin skriptlarini yuklashni bekor qiladi.

Va WPCF7_LOAD_CSS uslublari uchun bir xil printsip bo'yicha ishlaydigan bir xil konstanta mavjud - u plagin uslublarini yuklashni bekor qiladi:

Aniqlash("WPCF7_LOAD_CSS", noto'g'ri);

Plaginning 3.9 va undan yuqori versiyalarida siz functions.php-da ilgaklar orqali JavaScript va CSS-ni yuklashni o'chirib qo'yishingiz mumkin:

Add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false");

Ammo endi bizda yana bir muammo bor - formali sahifada plaginning uslublari va skriptlari yuklanmagan, ammo funksionallik va tashqi ko'rinish buzilgan. Muammoni hal qilish uchun bizga mexanizm kerak.

Misol uchun, bizda formali Kontakt sahifasi mavjud. contact.php fayli sahifani ko'rsatish uchun javobgardir. Keyin kodni ishlatamiz:

Agar (function_exists("wpcf7_enqueue_scripts")) ( wpcf7_enqueue_scripts(); ) agar (function_exists("wpcf7_enqueue_styles")) ( wpcf7_enqueue_styles(); )

Ushbu konstruksiya wp_head() funksiyasini chaqirishdan oldin contact.php fayliga joylashtirilishi kerak. Bu plagin ishlab chiquvchisining tavsiyasi.

Qaysi sahifalarga skriptlarni kiritish kerakligini belgilash imkonini beruvchi yanada moslashuvchan usul mavjud. Bu kod functions.php ga kiritilishi kerak:

Avval biz JS va CSS-ni uzamiz, keyin esa forma qisqa kodi ishga tushganda qayta ulanamiz. Shunday qilib, fayllar faqat shakl qisqa kodi mavjud bo'lgan sahifalarda ulanadi.

Funktsiya wpcf7_remove_assets() ( add_filter("wpcf7_load_js", "__return_false"); add_filter("wpcf7_load_css", "__return_false"); ) add_action("wpcf7_init", "wpcf7"_re); funktsiya wpcf7_add_assets($atts) ( wpcf7_enqueue_styles(); return $atts; ) add_filter("shortcode_atts_wpcf7", "wpcf7_add_assets");

Kod plagin sifatida ishlab chiqilishi yoki mavzuning functions.php ga kiritilishi mumkin.

Google Analytics orqali shakl hodisalarini kuzatishning oson yo'li mavjud.

Birinchidan, sizda Google Analytics kodi borligiga ishonch hosil qiling, u quyidagicha ko'rinadi:

(funksiya(i,s,o,g,r,a,m)(i["GoogleAnalyticsObject"]=r;i[r]=i[r]||funksiya())( (i[r].q = i[r].q||).push(argumentlar)),i[r].l=1*yangi sana();a=s.createElement(o), m=s.getElementsByTagName(o);a . async=1;a.src=g;m.parentNode.insertBefore(a,m) )(window,document,"script","//www.google-analytics.com/analytics.js","ga" ); ga("yaratish", "UA-XXXXXX-Y", "avtomatik"); ga("yuborish", "sahifani ko'rish");

Agar sizda Analytics kodingiz bo'lsa yoki uni o'rnatganingizdan so'ng tizimga ma'lumotlarni yuborishingiz mumkin, keyin ularni Google Analytics boshqaruv panelida kuzatishingiz mumkin. Bu haqda ko'proq ma'lumotni hodisani kuzatish bo'yicha rasmiy hujjatlarda o'qing.
Misol uchun, ariza topshirishni kuzatishingiz kerak, buning uchun quyidagi kodni ishga tushirishingiz kerak:

Ga("yuborish", "voqea", "Aloqa shakli", "yuborish");

Oxirgi qadam bu JavaScript parchasini har bir sahifaning HTML boshiga ( ) kiritishdir. Buning uchun mavzuingizning header.php shablonini tahrirlashingiz mumkin yoki kancada wp_head functions.php dan foydalanishingiz mumkin.

document.addEventListener("wpcf7mailsent", funktsiya(voqea) ( ga("yuborish", "voqea", "Aloqa shakli", "yuborish"); ), noto'g'ri);

Shunday qilib, har bir alohida shaklning muvaffaqiyatli topshirilishini kuzatishingiz mumkin:

Document.addEventListener("wpcf7mailsent", funktsiya(voqea) ( agar ("123" == event.detail.contactFormId) ( ga("yuborish", "voqea", "Kontakt formasi 123", "yuborish"); ) agar ("253" == event.detail.contactFormId) ( ga("yuborish", "voqea", "Aloqa shakli 253", "yuborish"); ) ), noto'g'ri);

Endi, ariza muvaffaqiyatli topshirilganda, siz ushbu hodisani Google Analytics boshqaruv panelida ko'rasiz (Xulq-atvor -> Voqealar -> Umumiy ko'rinish). Ehtimol, ma'lumotlar voqea sodir bo'lgandan keyin darhol paydo bo'lmaydi, lekin 24-48 soatdan keyin.

Tasavvur qilaylik, sizda xodimlarga ega kichik veb-studiyangiz bor: SEO mutaxassisi, sotuvchi va texnik yordam. Ulardan biriga shaxsan ma'lumot yuborish uchun bitta shakldan qanday foydalanishim mumkin? Tanlangan maydon (ochiladigan ro'yxat) yordamga keladi! Muammo ikki bosqichda hal qilinadi.

1-bosqich - shakl shabloniga teg qo'shish:

2-bosqich - "Kimga" maydoniga teg qo'yish, xat jo'natayotganda, bizning ochiladigan ro'yxatimizdan foydalanuvchi tanlagan xatni olib, maydonga kiritadi.

Bu usul jiddiy kamchilikka ega. Ochilgan tegimizni o'zgartirganimizdan so'ng biz olgan kodni ko'rib chiqing:

[elektron pochta himoyalangan] [elektron pochta himoyalangan] [elektron pochta himoyalangan]

Ko'rib turganingizdek, manzillar Elektron pochta ochiq shaklda "saqlanadi". Hamma joyda spamerlar bundan foydalanishlari mumkin. Lekin biroz hiyla-nayrangdan keyin emas... Keling, tegimizni shunday modernizatsiya qilaylik:

Bu erda parametrni nom|qiymat qoidasiga ko'ra quvur deb ataladigan (oldinga slash) orqali o'tkazdik. Natijada biz quyidagi html tuzilishini chiqdik:

SEO bo'yicha mutaxassis savdo bo'yicha texnik yordam

Ko'rib turganingizdek, shaklda foydalanuvchi elementlardan birini tanlaydi va xat yuborayotganda plaginning o'zi tanlangan element nomidan kelib chiqqan holda qiymatni oladi.

Keling, vazifani yanada murakkablashtiraylik ...

Keling, tanlangan oluvchiga, masalan, SEO-ga xat yuborishingiz kerak bo'lgan vaziyatni tasavvur qilaylik, shuningdek, nazorat qilish uchun sayt menejeriga xatning nusxasi.

Oldingi maqolalarda biz 7-sonli aloqa shakli ikkita xat yuborishi mumkinligini muhokama qildik va siz har bir qabul qiluvchi uchun alohida shablonni o'rnatishingiz mumkin.

Shunday qilib, birinchi nusxa SEOga keladi va u xabar nima haqida ekanligini tushunadi. Ammo menejer xat qaysi mutaxassisga qaratilganligini tushunmaydi, chunki u mavzuni to'liq tushunmasligi yoki hamma narsani eslamasligi mumkin. pochta manzillari mutaxassislar. Harf shabloniga nafaqat maydon qiymatini (bizning holimizda, elektron pochta manzilini), balki element nomini (mutaxassisning ismi) ham ishlatish kerakmi? Buning uchun plagin bizga [_raw_(maydon nomi)] tegini taqdim etadi, bu yerda (maydon nomi) bizning sohamiz nomidir. Teglardan foydalanishni umumlashtiramiz:

Harf shablonida tanlangan elementning qiymatiga aylantirilgan maydonning qiymati (bizning misolimizda elektron pochta manzili, ya'ni [elektron pochta himoyalangan]) [_raw_your-recipient] - harf shablonida tanlangan element nomiga (sarlavhasiga) aylantiriladigan maydon nomi (bizning misolimizdagi mutaxassisning ismi, ya'ni SEO mutaxassisi)

Agar bu funksiya kerak bo'lmasa, wp-config.php fayliga quyidagi kodni kiritish orqali uni o'chirib qo'yish mumkin:

Aniqlash("WPCF7_USE_PIPE", noto'g'ri);

Harf shablonini sozlash yorlig'idagi 7-shakldagi aloqa shakli sarlavha sarlavhasi: qiymat qoidasiga muvofiq qo'shimcha sarlavhalarni (Qo'shimcha sarlavhalar) yuborish uchun maydonga ega. Har bir sarlavha bilan birga kelishi kerak yangi qator.

Keling, eng ommaboplarini ko'rib chiqaylik - Javob berish, Cc va NCC, qolganlari haqida Vikipediyada o'qing.

Reply-to Ushbu xatga javob yoziladigan ism va manzil ko'rsatilishi kerak. Masalan, siz foydalanuvchidan elektron pochta manzilini shaklda ko'rsatishni so'radingiz. Buning uchun foydalaning pochta mijozi Javobni qaysi elektron pochtaga yuborishni darhol bilib oldim. Cc (inglizcha uglerod nusxasidan) nusxasi yuborilgan xatni ikkinchi darajali oluvchilarning ismlari va manzillarini o'z ichiga oladi. Bcc (inglizcha ko'r uglerod nusxasidan) xatni qabul qiluvchilarning ismlari va manzillarini o'z ichiga oladi, ularning manzillari boshqa oluvchilarga ko'rsatilmasligi kerak.

Kontakt formasi 7 avtomatik ravishda administrator hududida foydalanadigan tilning tarjimasidan foydalanadi. Sozlamalar -> Umumiy -> Sayt tili (ochiladigan ro'yxat) bo'limida tilni o'zgartiring. Ammo bu butun sayt uchun tilni o'zgartiradi. Mualliflaringiz turli tillarda gaplashganda nima qilish kerak?

Buning uchun ishlab chiquvchilar Bogo plaginidan foydalanishni taklif qilishadi, bu esa har bir foydalanuvchiga administrator tilini almashtirish imkonini beradi. Faollashtirishdan so'ng, sizning taxallusingiz yonidagi asboblar qutisida tilni o'zgartirish tugmasi paydo bo'ladi.

Aloqa shakli 7 forma bilan ishlashda kerak bo'lishi mumkin bo'lgan bir nechta maxsus teglarni qo'llab-quvvatlaydi. Masalan, xatda jo'natuvchining IP-manzilini va ariza to'ldirilgan sahifaga havolani ko'rsating. Maxsus teglar elektron pochta shablonida yoki boshqa shakl maydonlarida ishlatilishi mumkin.

Bu teglar faqat post mazmunida ishlaydi. Modal oyna, yon panel, pastki yoki sarlavhadagi shakl mavzu shabloniga, ya'ni post mazmunidan tashqariga o'rnatilgan bo'lsa, ular ishlamaydi.

[_post_id] Shakl mazmuni ko'rsatilgan postning identifikatori bilan almashtiriladi. [_post_name] Shakl yuborilgan postning nomi (slug) bilan almashtiriladi. [_post_title] Shakl yuborilgan postning sarlavhasi (sarlavhasi) bilan almashtiriladi. [_post_url] Shakl yuborilgan postning havolasi (url) bilan almashtiriladi. [_post_author] Shakl yuborilgan post muallifining ismi bilan almashtiriladi. [_post_author_email] Shakl yuborilgan post muallifining elektron pochtasi bilan almashtiriladi.

[_site_title] sayt nomi bilan almashtiriladi (Umumiy sozlamalarda ko'rsatilgan). [_site_description] Sayt tavsifi bilan almashtiriladi (Umumiy sozlamalarda ko'rsatilgan). [_site_url] sayt manzili bilan almashtiriladi (Umumiy sozlamalarda ko'rsatilgan). [_site_admin_email] Saytning elektron pochta manzili bilan almashtiriladi (Umumiy sozlamalarda ko'rsatilgan).

Ushbu teglar hozirda ro'yxatdan o'tgan foydalanuvchi haqida ma'lumot beradi.

[_user_*] teglari faqat qachon ishlaydi Yuboruvchi Unda bor hisob va tizimga kirgan. Agar ruxsatsiz foydalanuvchi shaklni yuborsa, bu teglar bo'sh natijani qaytaradi va hech qanday ma'noga ega bo'lmaydi. Shakl faqat ro'yxatdan o'tgan foydalanuvchilar uchun ko'rsatilishi uchun " " rejimini yoqish tavsiya etiladi.

Agar siz ushbu teglardan foydalanishingiz kerak bo'lsa va "faqat subscribers_only: true" opsiyasidan foydalanish shart bo'lmasa, nonce opsiyasini yoqishingiz kerak. Agar bularning barchasi bajarilmasa, vakolatli foydalanuvchilarning ma'lumotlari WP REST API orqali qayta tiklanadi va belgilangan teg o'tkazib yuboriladi (bo'sh qator bilan almashtiriladi).

[_user_login] Foydalanuvchi login bilan almashtiriladi. [_user_email] Foydalanuvchining elektron pochtasi bilan almashtiriladi. [_user_url] Foydalanuvchining sayt URL manzili bilan almashtiriladi. [_user_first_name] foydalanuvchi nomi bilan almashtiriladi. [_user_last_name] foydalanuvchining familiyasi bilan almashtiriladi. [_user_nickname] foydalanuvchining taxallusi bilan almashtiriladi. [_user_display_name] foydalanuvchining ko'rsatilgan nomi bilan almashtiriladi.

Plaginga nonce (xavfsizlik kodi) ni tekshirish kerakmi yoki yo'qligini aytadi. Plagin 4.9 versiyasidan boshlab, bu konstanta false qiymatiga ega bo'la boshladi, ya'ni "tekshirmang". Chekni doimiy qiymatini true ga o'rnatish yoki kanca yordamida qaytarishingiz mumkin

Add_filter("wpcf7_verify_nonce", "__return_true");

Shaklni muvaffaqiyatli topshirgandan so'ng foydalanuvchini biron bir sahifaga yo'naltirish kerak bo'lganda, masalan, minnatdorchilik yoki sovg'a bilan, JavaScript kancasidan foydalaning:

document.addEventListener("wpcf7mailsent", funktsiya(voqea) (joy = "http://example.com/"; ), noto'g'ri);

Bu qanday ishlashini tushunish uchun DOM voqealariga qarang.

Agar siz spam yoki kiruvchi xabarlar oqimidan aziyat cheksangiz va CAPTCHA yoki Akismet bunga dosh berolmasa, dvigatelga o'rnatilgan "Qora ro'yxat" funksiyasi yordam berishi mumkin.

Qora ro'yxat administrator panelida Sozlamalar -> Muhokama yo'li bo'ylab joylashgan.

Agar 7-shakl orqali yuborilgan xabarda ushbu so'zlarning birortasi uning tanasida, muallif nomida, URL manzilida, elektron pochta manzilida yoki IP manzilida bo'lsa, u spam sifatida belgilanadi va yuborilmaydi. Har bir so'z yoki IP yangi qatorda. Substring qidiruvi qo'llaniladi, ya'ni "sotib olish", "sotib olish" so'zlari yordamida topiladi.

Kontakt formasi 7 orqali spam kelgan IP manzilni qanday aniqlash mumkin? Eng oson yo'li - maxsus [_remote_ip] tegidan foydalanish. Bu teg xat shabloniga kiritiladi va xat jo‘natilayotganda jo‘natuvchining IP manzili bilan almashtiriladi.

Tez-tez olib kelaman html kodi 7-sonli aloqa shaklidagi u yoki bu maydon. Sukut bo'yicha plagin maydonlarga qaysi sinflarni qo'shishini ko'rishingiz mumkin. Endi biz maydonlarni shakllantirish uchun o'z sinflaringizni qanday belgilashni tezda ko'rib chiqamiz.

Shakl ko'rinishini o'zgartirish uchun qaysi CSS-ni tahrirlashim kerak?

Tashqi shakl tasmasi uchun mas'ul bo'lgan barcha uslublar kontakt-form-7/includes/css/styles.css plagin faylida saqlanadi. Ushbu faylni o'zgartirish yomon fikr, chunki plaginni yangilaganingizda fayl almashtiriladi va siz barcha o'zgarishlarni yo'qotasiz. Xuddi shu narsa plaginlar kabi yangilanadigan ommaviy mavzularga ham tegishli.

Shuning uchun, uslublarni o'zgartirish uchun siz yangilanmaydigan uslub faylini tanlashingiz kerak. Bu bolalar mavzusining uslublar jadvali bo'lishi mumkin. Yoki maxsus maydonga CSS kodini kiritish imkonini beruvchi mavzu sozlamalaridan foydalanishingiz mumkin.

Agar sizda o'z mavzuingiz bo'lsa, mavzu uslublaridagi 7-kontakt formasini o'zgartirishingiz (bekor qilishingiz) mumkin.

Aloqa formasi 7 da maydon uslublari

Plagin ko'plab maydon turlarini qo'llab-quvvatlaydi, lekin eng keng tarqalgan maydon turi matndir. Bunday maydon uchun uslubni o'rnatish uchun siz unga tur bo'yicha kirishingiz kerak:

Wpcf7 kiritish (fon rangi: #fff; rang: #000; kenglik: 50%; )

Biz ko'pincha formada bir nechta maydonlardan foydalanamiz, shuning uchun bir vaqtning o'zida bir nechta xususiyatlarni belgilaymiz:

Wpcf7 kiritish, .wpcf7 kiritish, .wpcf7 matn maydoni (fon rangi: #fff; rang: #000; kenglik: 50%; )

Yuqoridagi uslublar selector.wpcf7 tomonidan ko'rsatilganidek, Kontakt shakli 7 plaginining barcha maydonlari va shakllariga qo'llaniladi. Selektorlar haqida ko'proq bilib oling.

Muayyan maydon uchun uslub

Har qanday maydonni yaratishda siz unga identifikator yoki sinfni berishingiz mumkin:

Endi CSS-da, ID tufayli biz faqat ushbu maydonga kira olamiz:

#juda-maxsus-maydon( rang: #f00; chegara: 1px qattiq #f00; )

Shakl uslubi

Biz dala uslublari haqida gaplashdik, ammo shaklning o'ziga dizaynni qanday qo'shish kerak? Keling, biz allaqachon bilgan, plaginning barcha shakllariga qo'shilgan wpcf7 sinfidan foydalanamiz:

Wpcf7(fon rangi: #f7f7f7; chegara: 2px qattiq #0f0; )

Shaklni yuborayotganda, agar kerakli maydon to'ldirilmasa yoki tasdiqlanmasa, 7-shakl bilan bog'lanish xato xabarini ko'rsatadi. Ushbu xabarlar moslashtirilgan bo'lishi mumkin.

Matnni o'zgartirish

Muayyan xato yoki bildirishnoma matni o'zgartirilishi mumkin. Misol uchun, agar siz bo'sh qoldirilgan kerakli maydon bilan ariza topshirsangiz, "Maydon talab qilinadi" xabari. Ushbu xabarning matnini o'zgartirish uchun shaklni tahrirlash, "Shaklni yuborishda bildirishnomalar" yorlig'ini oching. Agar siz har bir maydon uchun xato matnini alohida o'zgartirishingiz kerak bo'lsa, u holda siz 7 Maxsus tekshirish plaginiga e'tibor berishingiz kerak.

Statik yoki suzuvchi xabar?

Ular aytganidek, yuz marta eshitgandan ko'ra bir marta ko'rgan afzal, shuning uchun tomosha qiling:

Statik xabar uslubi

Xato xabarlari maydon ostida paydo bo'ladi va ariza muvaffaqiyatli topshirilmaguncha yo'qolmaydi.

Suzuvchi xabar uslubi

Xato xabarlari asboblar paneli uslubida maydon ostida ko'rsatiladi. Asboblar maslahati kursorni uning ustiga olib borganingizda yoki ko'rsatgich tegishli bo'lgan maydonga e'tibor qaratsangiz yo'qoladi.

Istalgan maydon uchun suzuvchi uslub

Muayyan maydonga suzuvchi uslub berish uchun uni use-floating-validation-tip klassi bilan blokga o'rashingiz kerak:

Barcha maydonlar uchun suzuvchi uslub

Har bir maydonni use-floating-validation-tip klassi bilan blokga o‘rab qo‘ymaslik uchun, biz plagindan buni biz uchun “so‘rashimiz” mumkin, bu html_class atributini forma qisqa kodida use-floating-validation-tip qiymati bilan belgilab qo‘yamiz. :

Agar Ajax bo'lmagan yuborish (sahifani qayta yuklash bilan) ishlatilsa, sozlamalardan qat'i nazar, statik xatoni ko'rsatish uslubi qo'llaniladi.

Aytaylik, biz foydalanuvchidan ochiladigan ro'yxat yordamida o'z manzilini tanlashi so'raladigan kontakt formasini yaratishimiz kerak. Dunyoda 200 ga yaqin davlat bor va bunday ro'yxatni tuzish qiynoqlarga olib keladi.

Masalan:

Bunday "kolbasa" ni boshqarish qiyin va xato qilish ehtimoli katta.

Ushbu bema'nilikni hal qilish uchun quyidagi ro'yxatlarni taqdim etadigan Listo plagini mavjud:

• Countries - data:countries , data:countries.olympic
• AQSh tarkibiy bo'linmalari - data:us_subdivisions.states, data:us_subdivisions.districts
• Valyutalar - ma'lumotlar: valyutalar
• Vaqt zonalari

Aloqa shakli 7 Listo bilan ishlashi mumkin (yoki aksincha, hech kim bilmaydi), bu esa o'z navbatida maydonlar bilan ishlaydi: ochiladigan ro'yxat, tasdiqlash qutilari va radio tugmalari. Ushbu kombinatsiya tufayli siz uzoq ro'yxatlarni og'riqli tarzda tahrirlashingiz shart emas, lekin siz qisqa, oldindan belgilangan parametrlardan foydalanishingiz mumkin bo'ladi.

Uzoq ro'yxat variantlarini qanday boshqarish kerak

Masalan, biz mamlakatlar ro'yxatini ko'rsatishga qaror qildik, buning uchun bizga ochiladigan ro'yxat tegi kerak:

Ro'yxat hali ham bo'sh, biz hech qanday parametrni o'tkazmadik. Keling, ularni qo'shamiz:

Faqat bitta parametr va biz vegetarian bo'ldik - "kolbasa" ro'yxatida mamlakatlar yo'q - Listo buni biz uchun qildi.

Har bir shakl qo'shimcha ravishda belgilanishi mumkin. "Kengaytirilgan sozlamalar" yorlig'idagi parametrlar. Keling, ushbu sozlamalarning barchasini ko'rib chiqaylik:

"Faqat obunachilar" rejimi

Faqat obunachilar: rost

Ushbu rejim (CF7 v7 4.9 da mavjud) formani faqat ro'yxatdan o'tgan foydalanuvchilar uchun ko'rsatish imkonini beradi. Ro'yxatdan o'tmagan foydalanuvchilar "Ushbu shakl faqat ro'yxatdan o'tgan foydalanuvchilar uchun mavjud" degan xabarni ko'radi. va shunga ko'ra, shaklni to'ldirish va topshirish imkoniyati bo'lmaydi. Agar siz faqat vakolatli foydalanuvchilarning elektron pochta xabarlarini qabul qilishingiz kerak bo'lsa, spamdan qutulishning ajoyib usuli.

Demo rejimi

Namoyish_rejimi: yoqilgan

Ushbu koddan foydalanganda forma demo rejimiga o'tadi. Ushbu rejimda aloqa shakli pochta jo'natish jarayonini o'tkazib yuboradi va javob xabari sifatida "muvaffaqiyatli yakunlandi" ko'rsatiladi.

Emailni oʻtkazib yuborish

Skip_mail: yoqilgan

skip_mail opsiyasi demo_mode bilan bir xil ishlaydi, lekin skip_mail faqat xabarlarni yuborishni o'tkazib yuboradi. Demo_modedan farqli o'laroq, skip_mail Flamingo yordamida xabarlarni saqlash kabi boshqa harakatlarga ta'sir qilmaydi.

Maydonni tekshirishni majburlash

Qabul qilish_as_tasdiqlash: yoqilgan

Odatiy bo'lib, tasdiqlash qutilari kabi maydonlar xatolik yaratmaydi. Ushbu parametr tasdiqlash qoidalarini boshqa maydonlar kabi belgilash kataklariga qo'llash imkonini beradi. Misol uchun, agar siz foydalanuvchi jinsini ko'rsatadigan katakchani belgilashi kerak bo'lgan katakchani yaratgan bo'lsangiz, lekin foydalanuvchi hech narsani tanlamagan bo'lsa, plagin "Barcha maydonlar to'ldirilmagan" degan umumiy xatoni keltirib chiqaradi. Agar siz ushbu parametrni qo'llasangiz, umumiy xabarga qo'shimcha ravishda, foydalanuvchi ushbu katakcha uchun alohida xabarni ko'radi.

Xabarlarning saqlanishini oldini olish

Do'kon_do'konsiz: rost

Bu sozlama Flamingo kabi xabarlarni saqlash modullariga ushbu kontakt formasi orqali xabarlarni saqlamasliklarini aytadi.

JavaScript kodini bajarish

Ushbu funktsiya foydalanuvchi xatti-harakatlarini kuzatish kerak bo'lganda foydali bo'ladi. Siz Google Analytics yoki boshqa statistika tizimlari (yuqorida muhokama qilingan) orqali ushbu ilgaklarga kuzatuvni biriktirishingiz mumkin.

Bizda sozlangan va ishlaydigan shakl mavjud. Va foydalanuvchi "Yuborish" tugmasini bosganida va xat bizga yuborilganda, shakl yo'qoladi va uning o'rnida "Yuborish!" matni paydo bo'lishi kerak.

Bu oddiygina amalga oshiriladi: bu maqsadda qo'shimcha sozlamalar plagin ushbu qatorni qo'shing:

Document.addEventListener("wpcf7mailsent", funktsiya(voqea) ( jQuery("#contactform").hide(); ), false);

bu erda kontaktform - yashirilishi kerak bo'lgan shaklning identifikatori. #contactform o'rniga siz boshqa selektorni belgilashingiz mumkin HTML elementi(shakl) yashirmoq.

Tanlangan tegda o'xshash variantlarni alohida guruhlarga qanday birlashtirish mumkin? Bu funksionallikni ta'minlashi mumkin html teg optgroup, lekin sukut bo'yicha Contact Form 7 plagini buni qila olmaydi. Keling, plagin uchun ushbu nostandart vazifani hal qilish yo'llarini ko'rib chiqaylik.

Ushbu usul codepen.io saytida topilgan va biroz qayta ishlangan. Usulning mohiyati shundaki, JavaScript "tanlangan tegning tuzilishini o'qiydi va uni o'zgartiradi kerakli format. Misol dvigatelni tanlash maydonini ko'rib chiqadi:

Shakl shabloni:

Maydon nomi dvigatellar sifatida tanlangan, shuning uchun foydalanuvchi tanlagan qiymat elektron pochtaga yuborilishi uchun elektron pochta shablonidagi tegdan foydalanamiz.

JavaScript qo'shilmoqda

JQuery(document).ready(function($)( var selectEnges = $("tanlash"); var foundin = $("option:contains("optgroup-")", selectEnges); $.each(foundin, function() qiymat)( var updated = $(this).val().replace("optgroup-",""); $(this).nextUntil("option:contains("endoptgroup")").wrapAll("") ; )); $("option:contains("optgroup-"), option:contains("endoptgroup")", SelectEngines).remove(); ));

Ushbu kod jQuery-da amalga oshiriladi. Siz uni mavzuning JS fayliga kiritishingiz yoki yangi JS yaratishingiz va . Teg nomi dvigatellar bo'lganligi sababli, ushbu kodda biz aynan shuni ko'rsatamiz, ya'ni ni tanlang.

Tanlangan maydonning asl html kodi

optgroup-bepul Wordpress Joomla dvigatellari! Drupal Grav endoptgroup optgroup-Pulli dvigatellar 1C-Bitrix DLE (DataLife Engine) UMI.CMS NetCat ImageCMS Shop endoptgroup

Tanlangan maydonning qayta ishlangan html kodi

Wordpress Joomla! Drupal Grav 1C-Bitrix DLE (DataLife Engine) UMI.CMS NetCat ImageCMS do‘koni

Agar foydalanuvchi JavaScript-ni o'chirib qo'ygan bo'lsa, maydon barcha variantlarni ko'rsatadi. Ya'ni, hatto optgroup yorlig'iga aylantirilishi kerak bo'lgan variantlar ham oddiy variantlar sifatida ko'rinadi.

Men plagin uchun chiroyli shaklni olishim kerak edi, kechagi shakllar kerak edi, lekin o'tirish va uslublarni qo'lda yozish juda qiyin va ko'plab loyihalar uchun bu byudjetga kirmaydi. Shuning uchun men uchun qiziqarli plaginlarni qidirishga kirdim tez sozlash css aloqa shakllari.

Hamma bir ovozdan (bu qidiruv tizimlariga tegishli) tavsiya qiladi - donishmandlar aytdilar - CSS-ni tahrirlang va hech kimni aldamang, Notepadni oling va davom eting. Oldinga qarab, dono odamlar haq edi.

Biroq, qiziqish ustun keldi va plaginni batafsilroq sinab ko'rishga qaror qilindi.Men buni allaqachon sinab ko'rganman, lekin bu juda zerikarli va noqulay tuyuldi. Plagin 11 oy davomida yangilanmagan, bu juda achinarli. 6K dan bir oz ko'proq veb-ustalar o'z shakllarini unga ishonib topshirishni xavf ostiga qo'yishdi, bu ham unchalik katta emas (ulardan men uni to'rt yoki besh marta yuklab oldim).

O'rnatishdan so'ng u administrator menyusining ildizida "Kontakt uslubi" bo'limini yaratadi. Ushbu bo'limda Valentin kuni va Rojdestvo uchun shablonlarni o'z ichiga olgan ikkita element va "Maxsus uslub" mavjud bo'lib, unda siz shakl chiqishini to'liq sozlashingiz mumkin. Aslida, "Maxsus uslub" bo'limi sizni ko'proq qiziqtiradi; mavjud sozlamalar haqida batafsil ma'lumot:

"UMUMIY SOZLAMALAR" - siz fon rangini, shakl kengligini (pxda o'rnatilgan, % sinab ko'rmagan), chegara qalinligini, shaklni (nuqta, qattiq va hokazo), rangni, yaxlitlashni belgilashingiz mumkin.

"KIRIShLAR VA ETİKETLAR SOZLAMALARI" - kiritish maydonlarining foni, kiritish shriftining rangi, shrift (ro'yxat katta emas va kirill alifbosida deyarli hech narsa yo'q) va uning o'lchami. Maydon chegarasi rangi, uslubi (qattiq nuqta chiziq va boshqalar), qalinligi, yaxlitlash. Kiritish shrifti va uning o'lchami. Px-dagi chekka parametrlari - balandlik/kenglik, to'ldirish. Yorliq shrifti, uslubi, hajmi, rangi.

“YUBORISH TUGMANI SOZLAMALARI” – formani yuborish tugmasi sozlamalari. Mavjud sozlamalar tugma o'lchami, yaxlitlash, rang, chegara turi va chegara rangidir.

Sozlamalarni ko'rib chiqqandan so'ng, siz hamma narsa juda yaxshi degan xulosaga kelishingiz mumkin - amaliyot buning aksini ko'rsatdi. Haqiqatan ham juda ko'p sozlamalar mavjud, ammo ular etarli emas - forma ichida hech qanday chekinish sozlamalari yo'q, shuning uchun barcha bloklar shaklning chetiga yaqin chap chegarada yig'iladi. G'alati "standart" sozlamalar - bu erda kiritish maydoni 100*100 piksel. Agar siz maydon o'lchamlarini to'g'ri o'rnatsangiz, bu ochiladigan ro'yxatga ta'sir qilmaydi va u asosiy mavzuning uslubini oladi. Plaginni o'chirishdan oldin asl sozlamalarni tiklash mumkin emas edi...

Hozircha, uslublarni qo'lda o'zgartirishdan tashqari, u ko'proq yoki kamroq munosib ishlamadi ... Mo''jiza sodir bo'lmadi.

Muhim eslatma! Plagin yaqinda yangilandi va sozlamalarda biror narsa sezilarli darajada o'zgardi, shuning uchun siz ko'rib chiqishingiz va sinab ko'rishingiz kerak.

Mashhur Contact form 7 plagini o'zining standart shaklida unchalik chiroyli emas, shuning uchun ko'plab foydalanuvchilar uchun tashqi ko'rinishni qanday o'zgartirish kerakligi haqida savol tug'iladi. Biz hozir aynan shunday qilamiz, men sizga har qanday saytga mos keladigan universal variantni berishga harakat qilaman.

Men bu haqda avvalroq gapirganman, lekin hozir bu haqda gapirmaylik, lekin to'g'ridan-to'g'ri kerakli dizayn o'zgarishlariga o'tamiz.

Birinchidan, bizga style.css fayli kerak, uni "Tashqi ko'rinish" / "Muharrir" yorlig'ida topish mumkin. Odatiy bo'lib, aniq kerakli fayl u sizga oshkor bo'ladi. Brauzeringizda bir nechta yorliqlarni ochishni tavsiya etaman:

Yorliqlar ochiq, keling o'zgarishlarni boshlaylik, avval formamizni biroz o'zgartiramiz.

Shaklni tahrirlash uchun ochganimizda, biz quyidagi rasmga o'xshash narsani ko'ramiz:

Ushbu fikr-mulohaza shakli quyidagicha ko'rinadi:

Bu zerikarli, mutanosib emas va ochig'ini aytganda, chiroyli emas.

Shaklning ko'rinishini o'zgartirish uchun biz biroz uslublash ishlarini bajarishimiz kerak, lekin avval biz shakl shabloniga bir nechta sinflarni qo'shamiz. Buni amalga oshirish uchun tahrirlash shaklini oching (yuqoridagi rasmda bo'lgani kabi) va quyidagi sinflarni qo'shing:

Yozadigan narsa kam, shuning uchun xato qilish qiyin. Ehtimol, siz darslardan foydalanmasdan yoki qo'shmasdan Internetda maslahat topdingiz. Gap shundaki, sinflarni qo'shmasdan bir nechta muammolar paydo bo'lishi mumkin. Masalan, siz bir vaqtning o'zida saytga bir nechta shakllarni qo'shmoqchisiz, ularning barchasi bir xil shaklda bo'ladi va bu har doim ham qulay emas, shuning uchun siz men taklif qilgan variantdan foydalanishingiz kerak.

Sinflar qo'shildi, hali hech narsa o'zgarmadi, keyingi qadam shakl identifikatorini aniqlashdir.

Avval bir xil shaklda turli xil identifikatorlar bo'lishini tushunishingiz kerak turli sahifalar veb-sayt, plagin shunday yaratilgan, deb qo'shimcha qiladi qo'shimcha parametr forma har safar chaqirilganda. Endi batafsilroq ko'rib chiqaylik.

Shaklni tahrir qilish uchun uni sahifaga yoki kerakli joyga postga qo'shishingiz kerak, ya'ni qisqa kodni kiritishingiz kerak. Shundan so'ng, ushbu sahifaga o'ting va shaklni o'ng tugmasini bosing va bu uchun "Kodni ko'rish" ni tanlang Chrome brauzeri, agar sizda boshqacha bo'lsa, unda taxminan bir xil matn mavjud.

Ochilgan kodda biz formamizning boshini qidiramiz, u quyidagicha ko'rinadi:

Bu shakl identifikatori bo'ladi. Orqaga qaytib, men boshqa sahifada xuddi shu shaklda qanday id borligini ko'rsataman.

Ko'rib turganingizdek, identifikator faqat bir necha raqam bilan farqlanadi. Shuning uchun, avval siz shakl qaysi sahifada joylashganligini hal qilishingiz kerak va shundan keyingina uslublarni tahrirlashni boshlashingiz kerak.

Xo'sh, keyingi qadam qo'yildi, biz identifikatorni aniqladik, sinflarimizni ro'yxatdan o'tkazdik, endi tashqi ko'rinishni o'zgartirishga to'g'ridan-to'g'ri o'tamiz.

Oldinga qarab, men taklif qilgan variant sizga ideal ko'rinmasligini aytaman. Gap shundaki, bu satrlarni o‘qigan har bir kishi ularning shaklini o‘zi tasavvur qilganidek ko‘rishni istaydi. Men telepat emasman va men hammani xursand qila olmayman, lekin men sizga ma'lumotni qaerdan va qaerdan izlash va nimani o'zgartirish kerakligi haqida maslahat berishga harakat qilaman. Shunday qilib, mumkin bo'lgan umidsizlik uchun meni darhol kechiring, panatseya yo'q, siz biroz ishlashingiz kerak bo'ladi.

Ish tugagandan so'ng, biz uslublarga o'tamiz. Birinchidan, keling, formaning fon rangini o'zgartiramiz (agar kerak bo'lsa), chegaralarimizni sozlaymiz, kerakli shrift va matn rangini tanlaymiz. Biz ushbu sozlamalarning barchasini identifikatorni oldindan bilgan holda amalga oshiramiz. Biz buni qanday tanib olishni yuqorida muhokama qildik.

Birinchidan, style.css fayliga o'tamiz, shakl identifikatori uchun birinchi qoidalarni qo'shamiz (uni faylning eng pastki qismiga qo'shishingiz kerak), mening holatimda bu wpcf7-f172-p34-o1, sizga kerak ID o'rniga:

#wpcf7-f172-p34-o1 (
chegara: 5px;
to'ldirish: 10px;
fon: #B3AFAF;
shrift oilasi: Gruziya, " Times New Roman", Times, serif;
rang: #000;
}

Endi hamma narsani batafsil ko'rib chiqaylik:

Siz ushbu parametrlarni o'zingiz sinab ko'rishingiz, chekinishlar, ranglar va shriftlarni tanlashingiz mumkin. Buni amalga oshirish uchun siz faqat qiymatni o'zgartirishingiz, yangi variantni saqlashingiz, sahifani yangilashingiz va o'zgarishlarni ko'rishingiz kerak. Tajriba qilishdan qo'rqmang, bu erda siz hech narsani sindira olmaysiz, ekstremal holatlarda uslublar ishlamaydi va siz hamma narsani avvalgidek osongina tuzatishingiz mumkin.

Keling, maydonlarimizga o'tamiz, chekinishlarni qo'shamiz:

#wpcf7-f172-p34-o1 p(
chekka: 5px;
}

Bu matn va bloklar bir butunga birlashmasligi uchun maydonlarning chetlari bo'ylab chekinishlardir.

Keyingi bosqich ramkalar bo'ladi, men o'z versiyamni beraman va siz Internetda o'zingiz yoqtirgan ko'plab variantlarni topishingiz va ularni almashtirishingiz mumkin.

#wpcf7-f172-p34-o1 kiritish, matn maydoni (
chegara: 3px double #000;
}

Ramka haqida bir oz ko'proq. 3px qiymati - bu ramkaning kengligi, double ikki marta ishlatiladi (agar kerak bo'lmasa, siz ushbu so'zni olib tashlashingiz mumkin), #000 ramkaning rangi, siz o'zingizni ham tanlashingiz mumkin.

Ism-cf (
float:chap;
to'ldirish: 2px;
}
.name-cf kiritish (
kengligi: 270px;
}
.thems-cf kiritish (
kengligi: 100%;
}
.clear-cf (
aniq: ikkalasi ham;
}
.text-cf textarea (
kengligi: 100%;
}

Endi hamma narsani batafsil ko'rib chiqaylik:

Uslublar faylini yangilashingiz va o'zgarishlarni ko'rishingiz mumkin, agar kerak bo'lsa, o'lchamlarni ehtiyojlaringizga mos ravishda sozlashingiz mumkin.

Keling, tugmachamizga o'tamiz, uni markazga tekislaymiz va fon qo'shamiz:

Yuborish-cf (
kengligi: 200px; /*blok kengligi*/
balandligi: 25px; /*balandlik*/
chegara: 0 avtomatik; /* Chap va o'ng to'ldirish */
}
.submit-cf kiritish (
kengligi: 200px;
fon:#96B195;
}

An'anaga ko'ra, men nima ekanligini tushuntiraman:

Biz sozlamalarimizni saqlaymiz va nima borligini ko'ramiz:

Qabul qilaman, bu hashamatdan yiroq, lekin u umuman adekvat ko'rinadi, quyida standart shakl, menimcha, ta'sir aniq. Qanday bo'lmasin, biz aloqa shakli 7 ko'rinishini qanday o'zgartirishni bilib oldik.

Umid qilamanki, maqola siz uchun foydali bo'ldi, lekin agar biror narsa noto'g'ri bo'lsa yoki sizda biron bir muammo bo'lsa, sharh qoldiring va men javob berishga harakat qilaman (to'g'ri).

WordPress platformasida yaratilgan deyarli har bir blog Kontakt shakli 7 dan foydalanadi. U o'z sohasida juda mashhur, ayniqsa ishlab chiquvchilar uni doimiy ravishda rivojlantirmoqda. Boshqa kichik modullarga nisbatan bir qator afzalliklarga ega, xususan, sozlash qulayligi, mahalliylashtirish, barcha mumkin bo'lgan shakl elementlarini qo'shish va boshqarish.

Va bugun biz Aloqa shakli 7 uslubi uchun uslublarni vizual tarzda yaratish uchun mo'ljallangan Contact Form 7 Style plaginini ko'rib chiqamiz. Dastlab, uning dizayniga qo'shimcha ravishda, plagin shablon shaklida tayyor shakl uslublariga ega. Bu erda siz oddiygina shablon opsiyasini tanlaysiz va ushbu dizaynni qo'llash uchun avval yaratilgan shakl uchun katakchani belgilang. Keling, buni amalda ko'rib chiqaylik.

Biz tushuntirish qismini va shakllarni yaratishni o'tkazib yuboramiz, chunki ko'rib chiqish mavzusi shaklni stilizatsiya qilishga qaratilgan. Buning uchun, yuqorida aytib o'tilganidek, biz maxsus plagindan foydalanamiz. Uni o'rnatgandan so'ng, yon panelga beshta bo'limdan iborat "Aloqa uslublari" bo'limi qo'shiladi.

"Barcha uslublar" birinchi bo'limida tayyor shakl uslubi shablonlari mavjud va siz yaratgan uslublar darhol saqlanadi. Sichqonchani shablonlardan birining ustiga olib borganingizda, qo'shimcha tugmalar boshqaruv elementlari: Tahrirlash, Xususiyatlar, Oʻchirish. "Xususiyatlar" tugmasini bosganingizda, saytingizda mavjud bo'lgan barcha aloqa shakllari ko'rsatiladi. Bu erda siz faqat kerakli shakl yonidagi katakchani belgilashingiz va o'zgarishlarni saqlashingiz kerak.

"Yangi qo'shish" bo'limida siz yuqoridagi videoda ko'rsatilganidek, o'zingizning uslublaringiz bilan shakl uchun o'zingizning shabloningizni qilishingiz mumkin. Shakl elementlari o'rtasida almashish va barcha maydonlarni oddiy holatda ham, hover effektida ham vizual tarzda loyihalash.

Contact Form 7 plaginini o'rnatgandan so'ng va sahifadagi shaklni ko'rsatgandan so'ng, u shunday ko'rinadi.

Qabul qilaman, unchalik ifodali emas. Ammo uning ko'rinishi osongina tuzatilishi mumkin.

Agar sizga CSS uslublarini o'zgartirish/qo'shish qulay bo'lsa, ehtimol maydonlarni uslublashdan boshlashni xohlaysiz.

Wpcf7 kiritish, .wpcf7 kiritish, .wpcf7 matn maydoni (/* bu yerda uslublar: rang, fon, shrift, o‘lcham, hoshiyalar va h.k. */ )

Keyin, mavzuingizga moslikni yanada yaxshilash uchun butun shakl uchun uslublarni sozlashingiz mumkin.

Wpcf7 ( /* bu yerda uslublar: rang, fon, shrift, oʻlcham, hoshiyalar va h.k. */ )

Faqat ma'lum bir maydon uchun uslubni qanday o'rnatish mumkin? Aytaylik, siz ixtiyoriy maydon uchun uslublarni o'zgartirmoqchisiz ' Mavzu‘, plaginni faollashtirgandan so'ng sukut bo'yicha shaklda mavjud.

Shakl shablonida kerakli maydon uchun identifikatorni qo'shishingiz kifoya.

Mavzu [ mavzuingiz identifikatori: fb-mavzuga matn yozing]

Keyin o'zingizning CSS uslublaringizni qo'shishingiz mumkin.

#fb-subject ( /* bu yerda uslublar: rang, fon, shrift, o‘lcham, hoshiyalar va h.k. */ )

Oddiy, ammo chiroyli fikr-mulohaza shakli dizaynini yaratish uchun veb-dasturchi yoki kompyuter fanati bo'lish shart emas. Siz Internetda barcha kerakli ma'lumotlarni misollar va tushuntirishlar bilan osongina topishingiz mumkin.

Mana, oddiy, lekin oldindan o'rnatilgan uslublar bilan aloqa shakli 7 uchun yana bir shakl uslublari.

Kontakt shakli toza va sodda - Bootstrap belgilari, Google captcha va spam filtrlari bilan. Aytgancha, diqqat qiling, bu juda mashhur plagin.

Agar siz Internetda o'zingiz qidirsangiz, ishonchim komilki, siz 7-shakl uchun ko'plab andozalar va uslublarni topasiz.

Agar siz uslubga ozgina vaqt sarflasangiz, siz o'zingizning aloqa formangiz uchun o'ziga xos ko'rinish yaratishingiz mumkin, bu bilan siz nafaqat faxrlanasiz, balki tinglovchilaringizdan ko'plab xabarlarni olasiz, chunki ular unga yozish va sizga elektron pochta xabarlarini yuborishdan zavqlanishadi. . 🙂