İletişim Formu 7 Stilini Web Sitenizle Eşleşecek Şekilde Özelleştirme

Bir milyondan fazla aktif yükleme ile Contact Form 7, şimdiye kadarki en popüler WordPress eklentilerinden biridir. Popülaritesinin muhtemelen açıklamasının arkasındaki gerçekle çok ilgisi var: “Basit ama esnek.”

İletişim Formu 7, basit HTML işaretlemesinden (sizin için oluşturduğu) başka bir şey kullanmadan birden çok iletişim formu oluşturmanıza olanak tanır. Her form oluşturulduktan sonra, ilgili kısa kodu formun görünmesini istediğiniz yere yerleştirerek hızlı bir şekilde dağıtılabilir; sayfada, gönderide veya widget alanında. Formlar aracılığıyla gönderilen mesajlar, eklenti ayarlarında verilen e-posta adresine gönderilir ve CAPTCHA ve Akismet desteği ile spam ile mücadele edilir.

İletişim Formu 7 o kadar basittir ki, kelimenin tam anlamıyla herkes onu etkili bir şekilde kullanabilir. Styling'in de basit olması amaçlanmıştır. Ama belki bazıları için çok basit. Varsayılan olarak Contact Form 7 eklentisi formlarını biçimlendirmez. Sahip oldukları herhangi bir stil, bir WordPress temasının stil sayfasında bulunan varsayılan stillerin bir sonucudur.

Genellikle bunun gibi oldukça basit bir şeyle sonuçlanır:

Ne yazık ki bu tür bir form, gerçekten basit ve esnek olsa da, kişinin web sitesindeki diğer öğeler kadar güzel tasarlanmış olmayabilir. Başka türlü mutlu olan birçok kullanıcı, daha fazla stil seçeneğiyle İletişim Formu 7'ye alternatifler arıyor. Neyse ki, biraz CSS ile, eklenti alternatifi gerekli değildir.

Bugünün gönderisinde, herhangi bir temayı kullanan herkes için çok çeşitli Contact Form 7 stil olanakları açacak bir dizi ipucu paylaşacağım.

İletişim Formu 7 Stilini Web Sitenizle Eşleşecek Şekilde Özelleştirme

Youtube Kanalımıza Abone Olun

İletişim Formunuzu Nerede Düzenlemelisiniz 7 CSS (ve Neden)

Özel CSS eklerken, onu İletişim Formu 7'nin veya ana temanızın stil sayfasına eklememeniz önemlidir. Tema ve/veya eklenti güncellenir güncellenmez orada yaptığınız herhangi bir değişiklik veya eklemenin üzerine yazılacaktır.

Bunun yerine, aşağıdaki CSS'yi alt temanızın CSS'sine eklemek isteyeceksiniz. Özel CSS özelliğini Jetpack'te de kullanabilirsiniz veya temanız yönetici panelinde özel CSS için bir bölüm sağlıyorsa bunu da kullanabilirsiniz.

Pekala, şimdi aşağıda inceleyeceğimiz stilleri nereye yerleştireceğimizi bildiğimize göre, başlayalım!

Site Geniş Form Stilleri Nasıl Oluşturulur

Kendilerini tüm forma uygulayacak bazı genel düzenlemeler yaparak başlayalım. Bunu, sınıf seçiciyi .wpcf7 kullanarak ve ardından onun altına stiller ekleyerek yapabiliriz.

(Ayrıca, aşağıda yazdığım yorumlu başlığı, İletişim Formu 7 stillerinizin nerede başladığını belirtmek için stil sayfanıza yerleştirmenizi şiddetle tavsiye ederim.)

/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

Yukarıdaki kodu stil sayfanıza ekledikten sonra Contact Form 7 ile oluşturduğunuz her form az önce tanımladığınız arka plan ve bordür stillerine sahip olacaktır. Aşağıda bir örnek bulunmaktadır.

Gördüğünüz gibi, bazı boşluk sorunları var. Bunu düzeltmek için kenarlık ve iç form öğeleri arasındaki boşlukları ayarlamak isteyeceksiniz. Bunu aşağıdaki kod ile yapabilirsiniz.

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

Test sitemde bu, aşağıdakilerle sonuçlandı:

Not: Büyük olasılıkla farklı temalarla çalıştığımız için bu stiller formlarınızı biraz farklı şekillerde etkileyebilir. Bu, bu kodun sizin için işe yaramayacağı anlamına gelmez, yalnızca siteniz için doğru olanı elde etmek için sayıları biraz değiştirmeniz gerekebileceği anlamına gelir.

Site Geniş Form Alan Stilleri Nasıl Oluşturulur

Kişilerin İletişim Formu 7'yi şekillendirme konusunda en yaygın taleplerinden biri, alanların genişliğini nasıl ayarlayabilecekleridir. Özellikle çok uzağa gitmeyen mesaj alanı.

Aşağıdaki kod, mesaj alanını istediğiniz genişliğe (ayarlandığında) genişletecektir. Örnekte benimkini %95 olarak belirledim, çünkü hayali kullanım durumumda en iyi görünen buydu. Yüzde veya sabit piksel sayısı kullanarak da ihtiyaçlarınıza göre ayarlayabilirsiniz.

.wpcf7-textarea {

width: 85%;

}

Giriş sınıfı seçiciyi ayarlayarak diğer alanların genişliğini de ayarlayabilirsiniz.

.wpcf7 input {

width: 50%;

}

Tüm giriş alanlarınızı aynı kriterlere göre ayarlamak istemiyorsanız, sadece ilgilendiklerinizi seçerek biraz detaya inebilirsiniz. Aşağıdaki örnekte, sadece metin alanlarımı değiştirmeyi seçtim, böylece gönder düğmem da etkilenmez.

.wpcf7-text {
width: 50%;
}

Yukarıdaki tüm değişikliklerden sonra, aşağıda gördüğünüz forma stil verebildim.

Şahsen düğme rengimi değiştirmek istemedim, ancak bunun büyük olasılıkla başka bir ortak arzu olduğunu düşünüyorum. Bu nedenle, düğme renginizi değiştirmek isterseniz, denemek için aşağıdaki CSS'yi kullanabilirsiniz.

.wpcf7-submit {

background: #555555;

color: #ffffff;

}

Bu CSS parçaları yerinde olduğunda, Contact Form 7 ile oluşturulan her form yukarıdaki son resim gibi görünecektir. Ancak, özellikle bir formun diğerlerinden farklı görünmesini istediğinizde ne olur?

Belirli Bir Form Nasıl Stillendirilir

Belirli bir formda stil düzenlemeleri yapmak için gereken belirli CSS kimliğini almak biraz zahmetli olabilir, ancak biraz kurcalama ile mümkündür.

Yapmak isteyeceğiniz ilk şey, form kısa kodunu sitenize eklemek ve önizlemesini yapmaktır. (Bu kısa kodun içinde kimlik için bir sayı olduğunu fark edeceksiniz, ancak bu aslında ihtiyacınız olan tam kimlik değildir.)

Ardından, Google Chrome'un öğeyi inceleme özelliğini veya başka bir tarayıcıdaki benzer bir şeyi kullanarak formun koduna bakın. Bunu kullanarak tam form kimliğini bulacaksınız.

Benim durumumda, kısa kodumdaki kimlik numarası 4407 idi . Tam kimliğin wpcf7-f4407-p4405-o1 olduğu ortaya çıktı. Bu, site genelindeki ayarlarımdan farklı olan çeşitli kriterlerle aşağıdaki kodu kullanarak, yalnızca bu belirli formda daha fazla düzenleme yapabileceğim anlamına geliyordu.

#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}

Belirli Alanlara Nasıl Stil Verilir

Aynı şeyi belirli alanlarla da yapabilirsiniz. Tarayıcınızda belirli bir CSS sınıfını veya kimliğini izlemek yerine, form oluşturucuya eklemeniz yeterlidir.

Form oluşturucuya yerleştirmek için bir etiket oluştururken, bir kimlik, bir Sınıf veya her ikisini birden oluşturmak için iki seçenek olduğunu fark edeceksiniz.

Bu örnekte, özelleştirilmiş-alan adında bir sınıf oluşturmayı seçtim. Aynısını (veya benzer bir şeyi) yaparsanız, aşağıdaki gibi yeni kimliğinizi (veya sınıfınızı) kullanarak sadece o alanı şekillendirebilirsiniz.

#customized-field {

color: #ffffff;

border: 2px solid #333333;

}

Onay Kutuları ve Radyal Düğmeler için Özel Form Düzenleri Nasıl Oluşturulur

Varsayılan olarak, onay kutuları ve yarıçaplar soldan sağa doğru görüntülenir.

Ancak kişisel tercihiniz veya bunları yukarıdan aşağıya göstermenin tercih edilebileceği belirli bir kullanım durumu nedeniyle, aşağıdaki iki seçenekten birini kullanabilirsiniz.

Onay kutularınızı veya radyal düğmelerinizi yukarıdan aşağıya ve solda görüntülemek için bunu kullanın.

.wpcf7-list-item {
display: block;
}

Onay kutularınızı ve radyal düğmelerinizi yukarıdan aşağıya ve sağda görüntülemek için bunu kullanın. Ayrıca bu seçenek için etiketi oluştururken “önce etiketle” onay kutusunu seçtiğinizden emin olun.

.wpcf7-list-item {
display: table-row;
}

.wpcf7-list-item * {
display: table-cell;
}

Bonus İpucu: Alan Başlıkları Nasıl Kaldırılır ve Yer Tutucu Metni Nasıl Kullanılır

Bu ipucu, yukarıdaki diğerleri gibi CSS kullanımını gerektirmez, bunun yerine Contact Form 7 form oluşturucusunda kullanılan işaretlemede basit bir değişiklik gerektirir.

Bazen alan başlıklarına sahip olmak gerekli değildir, özellikle de alanların içine hangi bilgilerin oraya ait olduğunu açıklayan yer tutucu metin koyabiliyorsanız.

Sitenizde durum buysa, yapmanız gereken tek şey form oluşturucudaki başlıkları silmek ve aşağıdaki örnekte yaptığım gibi yer tutucu metin eklemek.

<p></p>

<p>[email* your-email placeholder "Email Address"]</p>

<p></p>

<p>[textarea your-message placeholder "Talk to me"]</p>

Sonuç, daha az dağınıklığa sahip daha temiz bir formdur.

Sonuç olarak

Umarım yukarıdaki örneklerde Contact Form 7 eklentisinin oldukça özelleştirilebilir olduğunu göstermişimdir. Doğru, biraz kurcalama gerektiriyor, ancak beklenebilecek ücretsiz bir eklenti için.

Varsayılan olarak stil seçeneklerinin olmaması, eklentinin bu kadar çok kişi için bu kadar iyi çalışmasının büyük bir parçası olduğunu düşünüyorum. Bu nedenle, ondan çok değer alan ve daha fazla stil isteyen birinin, yukarıdaki kod örneğinden birinin bir sürümünü bırakmak için birkaç dakika ayırması adil olur.

Kendinize ait herhangi bir İletişim Formu 7 stil ipucunuz var mı? Paylaşmak istediğiniz kullandığınız favorileriniz var mı? Aşağıdaki yorumlarda bize bir satır bırakın!

Dmitry Lemon5ky üzerinden Makale Küçük Resmi // Shutterstock.com