İletişim formu şablonları 7.

Açılır listeden “Metin alanı” öğesini seçin

Ekleyeceğiniz herhangi bir fonksiyon gerekiyorsa 1. kutucuğu işaretleyin ve açıklamaya bunu yazmayı unutmayın.

Formu doldurmayı kolaylaştırmak için giriş alanına ek bilgiler ekleyebilirsiniz. 2. kutuyu işaretleyin: "Yer tutucu olarak kullanılsın mı?" ve yanındaki alana bir ipucu girin. Formdaki bu alanı doldurduğunuzda araç ipucu metni kaybolacaktır. Ardından eklentinin talimatlarını izleyin. Sonuç, bitmiş formda buna benzer bir alan olacaktır:

Kodu e-posta şablonuna yapıştırdığınızdan emin olun, aksi takdirde bu alandaki veriler e-postaya gönderilmez! Bu yalnızca metin alanları için değil aynı zamanda diğer öğeler için de geçerlidir.

E-posta

Gönderenin posta kutusu adresini forma aktarmak için kullanılır

URL'si

Forma bir web sitesi adresi eklemenizi sağlar.

Telefon numarası

Bu alana yalnızca sayı girilebilir

Sayı (döndürme kutusu)

Bir şeyin, örneğin bir ürünün miktarını ayarlayabileceğiniz alan. Miktar, yukarı/aşağı oklar kullanılarak ayarlanır.

tarih

Tarih seçebilme özelliğine sahip bir takvimi forma ekler. Örneğin otel odalarını rezerve etmek için kullanılır. Varış tarihi, ayrılış tarihi.

Metin alanı

Evet şaşırmayın :) Bir metin alanı daha. Bu sefer bu alan büyüktür ve içine çok fazla metin yazmanıza olanak tanır. Örneğin incelemeler, yorumlar.

Aşağıya doğru açılan menü

Bir şey için çok sayıda seçenek olduğunda ve örneğin şehirler, sokaklar, ürünler gibi geniş bir listeden bir öğe seçmeniz gerektiğinde.

Liste, her öğe yeni bir satırda olacak şekilde Seçim alanına yerleştirilmelidir.

Onay kutuları

Onay kutusu veya geliştirici jargonunda onay kutusu, bir kutuyu işaretlemek için alan oluşturan bir öğedir. Bu alanın işaretli veya işaretsiz olmak üzere iki durumu vardır. Çoklu seçim mümkün. Yalnızca "Onay kutularını birbirini dışlayan yap?" onay kutusunu işaretlerseniz sıra halinde düzenlenebilirler. bu durumda yalnızca bir parametre seçilebilir.

Radyo düğmeleri

Anahtarlar (jargonda: radyo düğmeleri), sunulan birkaç seçenek arasından tek bir seçeneğin seçilmesi gerektiğinde kullanılır. “Önce bir etiket, sonra bir onay kutusu yerleştirilsin mi?” kutusunu işaretleyerek. Etiketin ve seçim alanının konumu, varsayılan olarak önce seçim, ardından etiket olarak değişir.

Kabul

Bir şeyin doğrulanması. Yukarıda açıklanan koşulları kabul etmek için bir anlaşma yaptığımızı varsayalım.

Soru

Bu, spam'e karşı ilk savunma hattıdır, en temel olanıdır. Ayarlarda, belki rakamla, belki harfle veya her ikisini birden kullanarak bir soru yazın ve doğru cevabı belirtin. Formu doldururken verilen cevap doğru ise form gönderilecektir. Yeşil, bu formülün hangi bölümünün cevap giriş alanından önce sitede görüntüleneceğini, kırmızı ise cevabı gösterir. Formüldeki doğru cevap | işaretinden sonra yazılır. (dikey çubuk)

Forma anti-spam koruması ekler.

Bu özelliğin çalışması için başka bir eklenti gereklidir. Eklentiyi indirin, yükleyin, etkinleştirin.

Ayarları değiştirmenize gerek yok, gönder butonunun önüne 2 satır kopyalayıp yapıştırmanız yeterli.

Dosya gönderme

Mesaj gönderim formuna bir dosya ekleyebilirsiniz. Ayarlarda, indirme için maksimum boyutu bayt cinsinden ve izin verilen formatları belirleyebilirsiniz, örneğin.jpg .tiff .doc

Gönder düğmesi

Formun gönderilmesi. Ayarlarda “Kısayol” kısmında butonun ismini verebilirsiniz (Gönder, cevapla, gönder :)

İletişim Formu 7'nin görünümünü özelleştirme

Eklentiler güncellenebilme özelliğine sahip olduğundan web sitesi tema stili dosyası style.css'de formun görünümünde değişiklikler yapılacaktır.

Kod, formun, alanlarının ve diğer öğelerin görüntülenmesinden sorumludur:

Wpcf7 ( arka plan rengi:#ddd; ) /*arka plan rengini oluşturur */ .wpcf7 girişi, .wpcf7 textarea( dolgu:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size: 16 piksel; satır yüksekliği: 20 piksel; kenarlık: 1 piksel katı #C7C7C7; kutu gölgesi: iç metin 2 piksel 2 piksel 8 piksel #F9F9F9; -webkit-transition: tümü 0,2 saniyelik kolaylık; -moz-transition: tümü 0,2 saniyelik kolaylık; -o-geçiş : tüm 0,2 saniyelik hareket hızı; geçiş: tüm 0,2 saniyelik hareket hızı; ) .wpcf7 .wpcf7-list-item( padding-left: 0; kenar boşluğu: 0; kenar boşluğu: 25 piksel; ) .wpcf7 .wpcf7-list-item input( border: yok; dolgu-sol: 0; sol kenar boşluğu: 0; ) .wpcf7 select( anahat: yok; yazı tipi boyutu: 16px; yazı tipi-ailesi:Arial, Helvetica, sans-serif; ) .wpcf7 girişi: vurgulu, .wpcf7 girişi:odak, .wpcf7 girişi:aktif, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( arka plan: #FDFDFD; anahat: yok; )

Ne nedir?

.wpcf7 girişi, .wpcf7 textarea — giriş alanının stili (metin alanı)

1. dolgu malzemesi- içerikten öğenin kenarına kadar olan girintiyi ayarlar. Alana girilen metnin alan sınırına kadar olan girintisi buradadır. Değeri piksel Xpx cinsinden ayarlar; burada X, piksel sayısıdır. Örnek: dolgu: 5px 3px 6px 8px;
2. renk- metin rengi.
3. font ailesi- giriş alanlarının yazı tipi.
4. yazı Boyutu- yazı Boyutu
5. satır yüksekliği- satır yüksekliği
6. sınır- giriş alanının etrafındaki çerçeve
7. kutu gölgesi- gölgeyi engelle. ek gölgenin içsel olduğunu gösterir. Dış gölge istiyorsanız bu değeri atlayın. 2px 2px'in ikinci ve üçüncü değerleri, gölgenin sırasıyla yatay ve dikey olarak yer değiştirmesini gösterir. Dördüncü değer olan 8px, gölgenin bulanıklık yarıçapını ayarlar. Beşinci - #F9F9F9 - gölge rengi.

İletişim Formu 7 düğmesini özelleştirme

İletişim Formu 7 bildirim stili

Hata veya başarılı gönderim mesajlarından sorumludur

Wpcf7 .wpcf7-validation-errors( border:none; arka plan rengi:#246416; color:#fff; kenar boşluğu:0; dolgu:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( border:none; arka plan rengi:#7ad33f; kenar boşluğu:0; dolgu:20px; -webkit-border-radius: 10px; -moz-border -yarıçap: 10 piksel; kenarlık yarıçapı: 10 piksel; ) .wpcf7 .wpcf7-mail-sent-ng( kenarlık: yok; arka plan rengi:#349622; kenar boşluğu:0; dolgu: 20 piksel; -webkit-border-yarıçap: 10 piksel ; -moz-border-radius: 10px; border-radius: 10px; renk: beyaz; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; arka plan rengi:#349622; padding:5px; padding- sol: 5 piksel; sağ dolgu: 5 piksel; kenarlık yarıçapı: 10 piksel; genişlik: 290 piksel; renk: beyaz; /* Alt gölge */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3) ; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); )

Ve şimdi, kolaylık olması açısından, kodun tamamı ve yorumlar:

Wpcf7 ( arka plan rengi:#ddd; ) /*arka plan rengini oluşturur */ .wpcf7 girişi, .wpcf7 textarea( /* Kodun bu kısmı giriş alanlarının, metin alanlarının tarzından sorumludur */ padding:5px; / * İçerikten önce alanlar öğesinin dolgusunu ayarlar; herhangi bir değer girebilirsiniz, örneğin 10px */ color:#1D1D1D; /* Giriş alanlarındaki metin rengi */ font-family:Arial, Helvetica, sans-serif; / * Giriş alanlarındaki metin yazı tipi */ font -size:16px; /* Giriş alanlarındaki metin boyutu */ line-height: 20px; /* Giriş alanlarının yüksekliği */ border: 1px katı #C7C7C7; /* Alanların etrafındaki çerçeve İlk değer piksel cinsinden genişliktir, ikincisi çerçevenin stilidir, üçüncüsü ise rengidir */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Giriş alanlarındaki gölge. 2px - kenar boyunca uzaklık x ekseni, 2 piksel - y ekseni boyunca ofset, 8 piksel - gölge bulanıklık yarıçapı, #F9F9F9 - gölge rengi */ -webkit-transition: tümü 0,2 saniyelik hareket hızı; -moz-transition: tümü 0,2 saniyelik hareket hızı; -o-geçiş : tüm 0,2 saniyelik hareket hızı; geçiş: tüm 0,2 saniyelik hareket hızı; ) .wpcf7 .wpcf7-list-item( padding-left: 0; kenar boşluğu-sol: 0; kenar boşluğu-sağ: 25 piksel; ) .wpcf7 .wpcf7-list-item giriş( sınır: yok; dolgu-sol: 0; sol kenar boşluğu: 0; ) .wpcf7 select( anahat: yok; yazı tipi boyutu: 16px; yazı tipi ailesi: Arial, Helvetica, sans-serif; ) .wpcf7 girişi: vurgulu, .wpcf7 girişi: odak, .wpcf7 girişi: aktif, .wpcf7 textarea: vurgulu, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* Bu bölüm, fare işaretçisi üzerlerine geldiğinde giriş alanlarının stilinden sorumludur */ arka plan: #FDFDFD; /* Giriş alanının arka planı fare işaretçisi onun üzerine gelir */ Outlet : none; /* Metin giriş alanının dış sınırı */ ) .wpcf7 input.wpcf7-submit(/* Kodun bu kısmı, formdaki Gönder düğmesinin stilinden sorumludur * / -webkit-transition: 0; -moz-transition: 0; - o-transition: 0; geçiş: 0; kenarlık: yok; /* Düğmenin etrafındaki çerçeve */ konum: göreceli; renk: #fff; /* Metin color */ text-transform: büyük harf; /* Metin dönüşümü (büyük harf, buton üzerindeki metnin büyük harfle görüntüleneceği anlamına gelir) */ /* butonun köşelerini yuvarlayın Aşağıdaki üç özelliğin değerleri şöyle olmalıdır: aynı, çünkü bunlar aynı şey, sadece farklı tarayıcılar için */ -webkit-border-radius: 6px; /* Chrome için yuvarlak köşeler */ -moz-border-radius: 6px; /* Mozilla FireFox için yuvarlak köşeler */ border-radius: 6px; /* Mobil tarayıcılar dahil diğer tüm tarayıcılar için yuvarlak köşeler */ font-size: 14px; /* Düğme metni boyutu */ yazı tipi ağırlığı: kalın; /* Metin stili (kalın, kalın anlamına gelir) */ padding-top: 11px; /* Elemanın kenarından içeriğine kadar üst dolgu */ padding-bottom: 10px; /* Elemanın kenarından içeriğine kadar alt dolgu */ padding-left: 35px; /* Elemanın kenarından içeriğine kadar sol dolgu */ padding-right: 35px; /* Öğenin kenarından içeriğine kadar sağa doğru girinti */ /* Degrade arka plan - Düğmenin degrade arka planı */ arka plan rengi: #000000; /* Degrade tarayıcı tarafından desteklenmiyorsa düğme arka plan rengi */ /* Aşağıdaki özelliklerde, renkler aynı şey olduğundan, yalnızca farklı tarayıcılar için aynı şekilde belirtilmelidir. İlk özelliğe bakalım. from(#676767), to(#3B3B3B) kısmı, bir degrade görüntülemeniz gerektiği anlamına gelir; burada renk #676767)'den #3B3B3B rengine geçiş vardır */ arka plan: -webkit-gradient(linear, left top, sol alt, itibaren(#676767), ila(#3B3B3B)); arka plan: -moz-linear-gradient(üst, #349622, #246416); filtre: progid:DXImageTransform.Microsoft.gradient(startColorstr = "#349622", endColorstr = "#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Alt Gölge - Düğme gölgesi. Gölge rengi RGBA */ -webkit-box-shadow'da belirtilmiştir: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); kutu gölgesi: 0 2px 5px rgba(0,0,0,0.3); ) /* Fareyle üzerine gelindiğinde - Fare işaretçisi üzerine gelindiğinde düğmenin stilini belirleyin. Her şey önceki bloktakiyle neredeyse aynı */ .wpcf7 input.wpcf7-submit:hover( imleç: işaretçi; metin dekorasyonu: yok; arka plan rengi: #000000; arka plan: -webkit-gradient(doğrusal, sol üst , sol alt, itibaren(#246416), ila(#349622)); arka plan: -moz-linear-gradient(top, #246416, #349622); filtre: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416) ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* Tıklandığında - tıkladığınızda düğmenin stili önceki bloktakiyle neredeyse aynı */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* Tıklandığında düğme metni rengi */ arka plan rengi: #000000; arka plan : -webkit -gradient(doğrusal, sol üst, sol alt, itibaren(#FF0000), ila(#246416)); arka plan: -moz-linear-gradient(üst, #FF0000, #246416); filtre: progid:DXImageTransform .Microsoft. degrade(startColorstr =#FF0000", endColorstr = "#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-kutusu-gölge: yok; -moz-box-shadow: yok; kutu gölgesi: yok; ) /* CF7 Mesajları - Başarılı gönderme, hatalar vb. hakkındaki mesajların stili. */ .wpcf7 .wpcf7-validation-errors( /* Doğrulama hataları için mesaj stili */ border:none; /* Mesaj blok çerçevesi */ arka plan-renk:#246416; /* Arka plan */ color:#fff; /* Metin rengi */ marj:0; /* Dış dolgu */ dolgu:20px; /* İç dolgu */ /* Farklı tarayıcılar için köşeleri yuvarlama - aşağıdaki 3 özellik */ -webkit-border-radius: 10px; -moz- border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Başarılı mesajların stili */ border:none; /* Mesaj blok çerçevesi */ arka plan rengi:#7ad33f; /* Arka plan */ marj:0; /* Dış dolgu */ dolgu:20px; /* İç dolgu */ /* Farklı tarayıcılar için köşeleri yuvarlama - aşağıdaki 3 özellik */ -webkit-border-radius: 10px; -moz - kenarlık yarıçapı: 10 piksel; kenarlık yarıçapı: 10 piksel; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; arka plan rengi:#349622; kenar boşluğu:0; dolgu:20px; -webkit-border-radius : 10px; -moz-border-radius: 10px; border-radius: 10px; renk: beyaz; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; arka plan rengi:#349622; dolgu:5 piksel; sol dolgu: 5 piksel; sağ dolgu: 5px; kenarlık yarıçapı:10px; genişlik: 290 piksel; Beyaz renk; /* Alt gölge */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 3); -moz-kutusu-gölge: 3px 3px 3px rgba(0,0,0,0.3); kutu gölgesi: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( float: sol; ) .wpcf7-form .mright20(sağ kenar boşluğu: 20 piksel; ) .wpcf7-form .mright40(sağ kenar boşluğu: 40 piksel; ) .wpcf7-form .clear( temizle: ikisi birden; )

WordPress platformunda oluşturulan hemen hemen her blog İletişim Formu 7'yi kullanır. Özellikle geliştiricilerin sürekli olarak geliştirmesi nedeniyle kendi alanında oldukça popülerdir. Diğer alt modüllere göre, özellikle ayar kolaylığı, yerelleştirme, tüm olası form öğelerinin eklenmesi ve yönetilmesi gibi birçok avantajı vardır.

Ve bugün eklentiye bakacağız İletişim Formu 7 Stiliİletişim Formu 7 için görsel olarak stiller oluşturmak üzere tasarlanmış olan eklenti, başlangıçta tasarımının yanı sıra şablonlar şeklinde hazır form stillerine sahiptir. Bu tasarımı uygulamak için sadece bir şablon seçeneğini seçip daha önce oluşturduğunuz formun kutusunu işaretlemeniz yeterlidir. Gelin buna uygulamalı olarak bakalım.

Contact Form 7 Style eklentisini kurma

İncelemenin konusu özellikle formun stilize edilmesini amaçladığından açıklama kısmını ve formların oluşturulmasını atlıyoruz. Bunu yapmak için yukarıda belirtildiği gibi özel bir eklenti kullanacağız. Kurulumdan sonra bir bölüm “ İletişim Stilleri” beş alt bölümle.

İlk bölümde" Tüm Stiller» Zaten hazır form stili şablonları var ve oluşturduğunuz stiller hemen kaydedilecek. Farenizi şablonlardan birinin üzerine getirdiğinizde ek kontrol düğmeleri görünür: Düzenle, Özellikler, Sil. “Özellikler” butonuna tıkladığınızda sitenizde mevcut olan tüm iletişim biçimleri görüntülenecektir. İstediğiniz formun yanındaki kutuyu işaretlemeniz ve değişiklikleri kaydetmeniz yeterlidir.

Bölümde " Yeni ekle“Yukarıdaki videoda gösterildiği gibi kendi stillerinizle form için kendi şablonunuzu oluşturabilirsiniz. Form öğeleri arasında geçiş yapma ve tüm alanları hem normal durumda hem de vurgulu efektte görsel olarak tasarlama.

Bir eklenti için güzel bir form almam gerekiyordu, dün ihtiyaç duyulan formlara, ancak oturup stilleri manuel olarak yazmak oldukça zor ve birçok proje için bu bütçe dahilinde değil. Bu nedenle CSS iletişim formlarını hızlı bir şekilde kurmak için ilginç eklentiler aramaya başladım.

Herkes oybirliğiyle (bu arama motorları için geçerlidir) tavsiye etti - bilge insanlar dedi ki - css'yi düzenleyin ve kimseyi kandırmayın, Not Defteri'ni alın ve devam edin. İleriye baktığımızda bilge insanlar haklıydı.

Ancak merak galip geldi ve eklentinin daha detaylı test edilmesine karar verildi, daha önce denemiştim ama son derece sıkıcı ve kullanışsız görünüyordu. Eklentinin 11 aydır güncellenmemesi üzücü. 6.000'den biraz fazla web yöneticisi formlarını ona emanet etme riskiyle karşı karşıya kaldı ki bu da çok fazla bir sayı değil (bunlardan dört veya beşini ona indirdim).

Kurulumdan sonra yönetici menüsünün kök kısmında “İletişim stili” bölümü oluşturur. Bu bölümde Sevgililer Günü ve Noel için şablonlar içeren iki öğe ve form çıktısını tamamen özelleştirebileceğiniz “Özel Stil” bulunmaktadır. Aslında “Özel Stil” bölümü sizi en çok ilgilendiren kısımdır; mevcut ayarlar hakkında daha fazla ayrıntı:

“GENEL AYARLAR” - arka plan rengini, şekil genişliğini (px olarak ayarlı, denenmeyenlerin yüzdesi), kenar kalınlığını, şekli (noktalı, düz vb.), rengi, yuvarlamayı tanımlayabilirsiniz.

“GİRİŞLER VE ETİKET AYARLARI” - giriş alanlarının arka planı, giriş yazı tipinin rengi, yazı tipi (liste büyük değildir ve Kiril alfabesinde neredeyse hiçbir şey yoktur) ve boyutu. Alan kenarlığının rengi, stili (düz noktalı çizgi vb.), kalınlığı, yuvarlaması. Yazı tipini ve boyutunu girin. Piksel cinsinden kenar boşluğu parametreleri - yükseklik/genişlik, dolgu. Etiket yazı tipi, stili, boyutu, rengi.

“GÖNDER DÜĞMESİ AYARLARI” – form gönderme düğmesinin ayarları. Kullanılabilir ayarlar düğme boyutu, yuvarlama, renk, kenarlık türü ve kenarlık rengidir.

Kullanımdaki sorunlar.

Ayarları inceledikten sonra her şeyin çok iyi olduğu sonucuna varabilirsiniz - uygulama tam tersini gösterdi. Gerçekten çok fazla ayar var, ancak bunlar yeterli değil - formun içinde girinti ayarları yok, bu nedenle tüm bloklar formun kenarına yakın sol kenarda toplanıyor. Garip "varsayılan" ayarlar - giriş alanının 100*100 piksel olduğu yer. Alan boyutlarını doğru ayarlarsanız bu durum açılır listeyi etkilemeyecek ve ana temanın stilini alacaktır. Eklentiyi kaldırmadan önce orijinal ayarlara sıfırlamak mümkün değildi...

Şu ana kadar stilleri manuel olarak değiştirmek dışında, aşağı yukarı düzgün bir şekilde sonuçlanmadı... Bir mucize gerçekleşmedi.

Önemli Not! Eklenti yakın zamanda güncellendi ve ayarlarda önemli ölçüde bir şeyler değişti, bu yüzden bakıp test etmeniz gerekiyor.