Aloqa shakli shablonlari 7.

Ochiladigan ro'yxatdan "Matn maydoni" elementini tanlang

Agar siz qo'shadigan biron bir funktsiya kerak bo'lsa, 1-bandni belgilang va buni tavsifga yozishni unutmang.

Shaklni to'ldirishni osonlashtirish uchun kiritish maydoniga qo'shimcha ma'lumot qo'shishingiz mumkin. 2- katakchani belgilang "To'ldiruvchi sifatida foydalanilsinmi?" va yonidagi maydonga maslahat kiriting. Shaklda ushbu maydonni to'ldirganingizda, maslahat matni yo'qoladi. Keyin plaginning ko'rsatmalariga amal qiling. Natijada tugallangan shaklda shunday maydon paydo bo'ladi:

Kodni elektron pochta shabloniga qo'yganingizga ishonch hosil qiling, aks holda bu maydondagi ma'lumotlar elektron pochtaga yuborilmaydi! Bu nafaqat matn maydonlariga, balki boshqa har qanday elementlarga ham tegishli.

Elektron pochta

Yuboruvchining pochta qutisi manzilini formaga o'tkazish uchun foydalaniladi

URL

Shaklga veb-sayt manzilini qo'shish imkonini beradi.

Telefon raqami

Bu maydonga faqat raqamlarni kiritish mumkin

Raqam (spinbox)

Biror narsa, masalan, mahsulot miqdorini belgilashingiz mumkin bo'lgan maydon. Miqdor yuqoriga/pastga strelkalar yordamida o'rnatiladi.

sana

Sana tanlash imkoniyati bilan shaklga kalendar kiritadi. Masalan, mehmonxona xonalarini bron qilish uchun foydalaniladi. Kelish sanasi, ketish sanasi.

Matn maydoni

Ha, hayron bo'lmang :) Boshqa matn maydoni. Bu safar bu maydon katta va unda ko'p matn yozish imkonini beradi. Masalan, sharhlar, sharhlar.

Ochiladigan menyu

Biror narsaning ko'p variantlari mavjud bo'lganda va siz katta ro'yxatdan biror narsani tanlashingiz kerak bo'lsa, masalan, shaharlar, ko'chalar, tovarlar ro'yxati.

Ro'yxat Tanlash maydoniga, har bir element yangi qatorga joylashtirilishi kerak.

Belgilash katakchalari

Tasdiqlash katakchasi yoki ishlab chiquvchi jargonidagi katakcha, katakchani belgilash uchun maydon yaratadigan elementdir. Bu maydon ikkita holatga ega - belgilangan yoki belgilanmagan. Bir nechta tanlash mumkin. Ular faqat “Tasdiqlash katakchalarini bir-birini istisno qilsinmi?” katagiga belgi qo'ysangizgina ketma-ket joylashtirilishi mumkin. keyin faqat bitta parametrni tanlash mumkin.

Radio tugmalari

Kalitlar (jargonda: radio tugmalari) taklif qilingan bir nechta variantdan bittasini tanlash zarur bo'lganda ishlatiladi. "Avval yorliq qo'ying, keyin katakchani qo'yingmi?" Yorliqning joylashuvi va tanlov maydoni o'zgaradi, sukut bo'yicha, avval tanlov, keyin yorliq.

Qabul qilish

Biror narsani tasdiqlash. Keling, yuqorida tavsiflangan shartlarni qabul qilish uchun kelishuvga erishamiz.

Savol

Bu spamga qarshi birinchi himoya chizig'i, eng asosiysi. Sozlamalarda ba'zi savol yozing, ehtimol raqamlarda, balki harflarda yoki ikkalasini ham yozing va to'g'ri javobni ko'rsating. Shaklni to'ldirishda javob to'g'ri bo'lsa, ariza topshiriladi. Yashil rang javob kiritish maydonidan oldin ushbu formulaning qaysi qismi saytda ko'rsatilishini, qizil rang javobni bildiradi. Formuladagi to'g'ri javob | belgisidan keyin yoziladi (vertikal bar)

Shaklga spamga qarshi himoya qo'shadi.

Bu funksiya ishlashi uchun boshqa plagin talab qilinadi. Plaginni yuklab oling, o'rnating, faollashtiring.

Sozlamalarni o'zgartirishingiz shart emas, yuborish tugmasidan oldin 2 qatorni nusxalash va joylashtirish kifoya.

Fayl yuborish

Xabarni yuborish formasiga fayl biriktirishingiz mumkin. Sozlamalarda siz baytlardagi maksimal hajmni va yuklab olish uchun ruxsat etilgan formatlarni belgilashingiz mumkin, masalan.jpg .tiff .doc

Yuborish tugmasi

Shaklni topshirish. Sozlamalarda "Yorliq" bo'limida siz tugma nomini berishingiz mumkin (Yuborish, javob berish, yuborish :)

Aloqa shakli 7 ko'rinishini sozlash

Plaginlar yangilanish imkoniyatiga ega bo'lganligi sababli, shakl ko'rinishiga o'zgartirishlar veb-sayt mavzusi uslubi fayli style.cssda amalga oshiriladi.

Kod shaklni, uning maydonlarini va boshqa elementlarni ko'rsatish uchun javobgardir:

Wpcf7 (fon rangi:#ddd; ) /*forma fon rangi */ .wpcf7 kiritish, .wpcf7 textarea( padding:5px; rang:#1D1D1D; font-family:Arial, Helvetica, sans-serif; shrift o‘lchami: 16px; chiziq balandligi: 20px; hoshiya: 1px qattiq #C7C7C7; quti-soya: inset 2px 2px 8px #F9F9F9; -webkit-oʻtish: hammasi 0,2s oson; -moz-oʻtish: hammasi 0,2s oson; -o-oʻtish : hammasi 0,2 soniya oson; o‘tish: hammasi 0,2 soniya oson; ) .wpcf7 .wpcf7-list-item( to‘ldirish-chap: 0; chet-chap: 0; chet-o‘ng: 25px; ) .wpcf7 .wpcf7-ro‘yxat elementi input(chegara: none; padding-left: 0; margin-left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 kiritish: kursor, .wpcf7 kiritish:fokus, .wpcf7 kirish:faol, .wpcf7 matn maydoni:ko‘chirish, .wpcf7 matn maydoni:fokus, .wpcf7 matn maydoni:faol (fon: #FDFDFD; kontur: yo‘q; )

Nima nima?

.wpcf7 kiritish, .wpcf7 matn maydoni — kiritish maydonining uslubi (matn maydoni)

1. to'ldirish- tarkibdan element chegarasigacha bo'lgan chegarani o'rnatadi. Bu erda maydonga kiritilgan matndan maydon chegarasigacha bo'lgan chegara. Xpx piksellardagi qiymatni o'rnatadi, bu erda X - piksellar soni. Misol: to'ldirish: 5px 3px 6px 8px;
2. rang- matn rangi.
3. shrift oilasi- kiritish maydonlarining shrifti.
4. shrift o'lchami- shrift o'lchami
5. chiziq balandligi- chiziq balandligi
6. chegara- kiritish maydoni atrofidagi ramka
7. quti soyasi- soyani blokirovka qilish. kiritilgan soyaning ichki ekanligini bildiradi. Agar siz tashqi soyani xohlasangiz, ushbu qiymatni o'tkazib yuboring. 2px 2px ning ikkinchi va uchinchi qiymatlari soyaning mos ravishda gorizontal va vertikal siljishini bildiradi. To'rtinchi qiymat, 8px, soyaning xiralik radiusini o'rnatadi. Beshinchisi - #F9F9F9 - soya rangi.

Aloqa shakli 7 tugmachasini sozlash

Aloqa shakli 7 bildirishnoma uslubi

U xato yoki muvaffaqiyatli yuborilgan xabarlar uchun javobgardir

Wpcf7 .wpcf7-validatsiya-xatolari(chegara:yo'q; fon-rang:#246416; rang:#fff; chekka:0; to'ldirish:20px; -webkit-chegara-radius: 10px; -moz-chegara-radius: 10px; chegara radiusi: 10px; ) .wpcf7 .wpcf7-mail-sent-ok(chegara:yoʻq; fon rangi:#7ad33f; chekka:0; toʻldirish:20px; -webkit-border-radius: 10px; -moz-chegara -radius: 10px; chegara radiusi: 10px; ) .wpcf7 .wpcf7-mail-sent-ng(chegara: yoʻq; fon rangi: #349622; chekka: 0; toʻldirish: 20px; -webkit-chegara radiusi: 10px ; -moz-chegara-radius: 10px; chegara-radius: 10px; rang: oq; ) .wpcf7 span.wpcf7-valid-tip(chegara:none; background-color:#349622; padding:5px; padding- chap: 5px; toʻldirish-oʻng: 5px; chegara radiusi: 10px; kenglik: 290px; rang: oq; /* Toʻqilgan soya */ -webkit-box-soya: 3px 3px 3px rgba(0,0,0,0.3) ; -moz-box-soya: 3px 3px 3px rgba(0,0,0,0.3); quti-soya: 3px 3px 3px rgba(0,0,0,0,3); )

Va endi, qulaylik uchun, sharhlar bilan butun kod:

Wpcf7 ( background-color:#ddd; ) /*form fon rangi */ .wpcf7 kiritish, .wpcf7 textarea( /* Kodning bu qismi kiritish maydonlari, matn maydonlari uslubi uchun javob beradi */ padding:5px; / * Tarkibidan oldin maydonlar elementidan to'ldirishni o'rnatadi, siz istalgan qiymatni qo'yishingiz mumkin, masalan, 10px */ color:#1D1D1D; /* Kirish maydonlarida matn rangi */ font-family:Arial, Helvetica, sans-serif; / * Kirish maydonlaridagi matn shrifti */ font -size:16px; /* Kirish maydonlaridagi matn hajmi */ line-height: 20px; /* Kirish maydonlarining balandligi */ chegara: 1px qattiq #C7C7C7; /* Maydonlar atrofidagi ramka Birinchi qiymat - piksellardagi kenglik, ikkinchisi - ramkaning uslubi, uchinchisi - uning rangi */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Kirish maydonlaridan soya. 2px - chiziq bo'ylab ofset. x o'qi, 2px - y o'qi bo'ylab ofset, 8px - soyaning xiralashishi radiusi, #F9F9F9 - soya rangi */ -webkit-o'tish: hammasi 0,2 s oson; -moz-o'tish: hammasi 0,2 soniya oson; -o-o'tish : hammasi 0,2 soniya oson; o‘tish: hammasi 0,2 soniya oson; ) .wpcf7 .wpcf7-ro‘yxat elementi( to‘ldirish-chap: 0; chet-chap: 0; chet-o‘ng: 25px; ) .wpcf7 .wpcf7-ro‘yxat elementi kiritish (chegara: yo'q; padding-chap: 0; chap chekka: 0; ) .wpcf7 select( kontur: hech biri; font-size: 16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 kiritish: hover, .wpcf7 kirish: fokus, .wpcf7 kiritish: faol, .wpcf7 matn: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* Ushbu qism sichqoncha ko'rsatkichi ularning ustiga olib kelganda kiritish maydonlarining uslubi uchun javobgardir */ background: #FDFDFD; /* Kiritish maydonining foni qachon sichqoncha ko'rsatkichi uning ustiga olib boradi */ kontur : yo'q; /* Matn kiritish maydonining tashqi chegarasi */ ) .wpcf7 input.wpcf7-submit(/* Kodning ushbu qismi formadagi Yuborish tugmachasini shakllantirish uchun javobgardir * / -webkit-o'tish: 0; -moz-o'tish: 0; - o-o'tish: 0; o'tish: 0; chegara: yo'q; /* Tugma atrofidagi ramka */ pozitsiyasi: nisbiy; rang: #fff; /* Matn rang */ matnni o'zgartirish: katta harf; /* Matnni o'zgartirish (katta harf tugmachadagi matn katta harflar bilan ko'rsatilishini bildiradi) */ /* tugma burchaklarini yumaloqlash Quyidagi uchta xususiyatning qiymatlari bo'lishi kerak bir xil, chunki ular bir xil narsa, faqat turli brauzerlar uchun */ -webkit-border-radius: 6px; /* Chrome uchun yumaloq burchaklar */ -moz-border-radius: 6px; /* Mozilla FireFox uchun dumaloq burchaklar */ chegara radiusi: 6px; /* Boshqa barcha brauzerlar, shu jumladan mobil brauzerlar uchun yumaloq burchaklar */ font-size: 14px; /* Tugma matni oʻlchami */ font-weight: qalin; /* Matn uslubi (qalin - qalin degan ma'noni anglatadi) */ padding-top: 11px; /* Elementning chetidan uning mazmunigacha bo'lgan yuqori to'ldirish */ padding-bottom: 10px; /* Elementning chetidan uning mazmunigacha bo'lgan pastki to'ldirish */ padding-left: 35px; /* Elementning chetidan uning mazmunigacha bo'lgan chap to'ldirish */ padding-right: 35px; /* Elementning chetidan uning mazmunigacha o‘ng tomonga chekinish */ /* Gradient fon – tugmachaning gradient foni */ background-color: #000000; /* Agar gradient brauzer tomonidan qo'llab-quvvatlanmasa, tugma fon rangi */ /* Quyidagi xususiyatlarda ranglar bir xil ko'rsatilishi kerak, chunki ular bir xil, faqat turli brauzerlar uchun. Keling, birinchi xususiyatni ko'rib chiqaylik. From(#676767), to (#3B3B3B) qismi gradientni ko'rsatish kerakligini bildiradi, bu yerda #676767 rangdan boshlab #3B3B3B */ fon rangiga o'tish mavjud: -webkit-gradient(chiziqli, chap tepa, chap pastki, dan (#676767), to (#3B3B3B)); fon: -moz-linear-gradient (yuqorida, #349622, #246416); filtr: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filtr: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow - tugmacha soyasi. Soya rangi RGBA */ -webkit-box-shadow da ko'rsatilgan: 0 2px 5px rgba(0,0,0,0.3); -moz-box-soya: 0 2px 5px rgba(0,0,0,0,3); quti soyasi: 0 2px 5px rgba(0,0,0,0,3); ) /* Hoverda - sichqoncha ko'rsatgichini olib kelganda tugmachani uslublash. Hammasi oldingi blokdagi kabi deyarli bir xil */ .wpcf7 input.wpcf7-submit:hover( kursor: ko'rsatgich; matn dekoratsiyasi: yo'q; fon rangi: #000000; fon: -webkit-gradient(chiziqli, chap tepa) , chap pastki, from(#246416), to(#349622)); fon: -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)"; ) /* tugmasini bosganingizda - tugmachaning uslubi u oldingi blokdagi bilan deyarli bir xil */ .wpcf7 input.wpcf7-submit:active( tepada: 1px; rang: #d8c6e2; /* tugma bosilganda matn rangi */ background-color: #000000; fon: -webkit -gradient(chiziqli, chap tepa, chap pastki, dan(#FF0000), to(#246416)); fon: -moz-linear-gradient(top, #FF0000, #246416);filtr: progid:DXImageTransform .Microsoft. gradient(startColorstr="#FF0000", endColorstr="#246416"); -ms-filtr: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-soya: yo'q; -moz-box-soya: yo'q; quti soyasi: yo'q; ) /* CF7 Xabarlar - Muvaffaqiyatli yuborish, xatolar va boshqalar haqida xabarlar uslubi. */ .wpcf7 .wpcf7-validation-errors( /* Tekshirish xatolari uchun xabar uslubi */ chegara: yo‘q; /* Xabar bloki ramkasi */ background-color:#246416; /* Fon */ rang:#fff; /* Matn rangi */ hoshiya:0; /* Tashqi to'ldirish */ to'ldirish:20px; /* Ichki to'ldirish */ /* Turli brauzerlar uchun burchaklarni yaxlitlash - quyidagi 3 xususiyat */ -webkit-border-radius: 10px; -moz- chegara -radius: 10px; chegara-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Muvaffaqiyatli xabarlar uslubi */ chegara: yoʻq; /* Xabar bloki ramkasi */ background-color:#7ad33f; /* Fon */ margin:0; /* Tashqi to‘ldirish */ padding:20px; /* Ichki to‘ldirish */ /* Turli brauzerlar uchun burchaklarni yaxlitlash - quyidagi 3 xususiyat */ -webkit-border-radius: 10px; -moz - chegara radiusi: 10px; chegara radiusi: 10px; ) .wpcf7 .wpcf7-mail-sent-ng(chegara:yoʻq; fon rangi:#349622; chekka:0; toʻldirish:20px; -webkit-chegara-radius : 10px; -moz-border-radius: 10px; chegara radiusi: 10px; rang: oq; ) .wpcf7 span.wpcf7-novalid-tip(chegara:none; background-color:#349622; to'ldirish: 5px; padding-chap: 5px; to'ldirish - o'ng: 5px; chegara radiusi: 10px; kengligi: 290px; rang: oq; /* Soyani tushirish */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 3); -moz-box-soya: 3px 3px 3px rgba(0,0,0,0,3); quti soyasi: 3px 3px 3px rgba(0,0,0,0,3); ) .wpcf7-form .fleft( float: chap; ) .wpcf7-form .mright20( chet-oʻng: 20px; ) .wpcf7-form .mright40( chet-oʻng: 40px; ) .wpcf7-form .clear( aniq: ikkalasi;)

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 plaginni ko'rib chiqamiz Aloqa shakli 7 Style, bu Aloqa shakli 7 uchun uslublarni vizual tarzda yaratish uchun mo'ljallangan. Dastlab, o'z dizaynidan tashqari, 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.

Contact Form 7 Style plaginini sozlash

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, "bo'lim" Aloqa uslublari” besh bo‘limdan iborat.

Birinchi bo'limda " Barcha uslublar» allaqachon tayyor shakl uslubi shablonlari mavjud va siz yaratgan uslublar darhol saqlanadi. Sichqonchani shablonlardan birining ustiga olib borganingizda qo'shimcha boshqaruv tugmalari paydo bo'ladi: 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.

bobda" Yangi qo'shish“Yuqoridagi videoda ko‘rsatilganidek, o‘z uslublaringiz bilan shakl uchun o‘zingizning shabloningizni yasashingiz mumkin. Shakl elementlari o'rtasida almashish va barcha maydonlarni oddiy holatda ham, hover effektida ham vizual tarzda loyihalash.

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 CSS aloqa shakllarini tezda sozlash uchun qiziqarli plaginlarni qidirdim.

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 boshqalar), 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.

Foydalanishdagi muammolar.

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.