WordPress'te Contact Form 7 formlarını CSS ile nasıl stillendirilir
WordPress formlarınızın sitenizin geri kalanı kadar şık görünmesini mi istiyorsunuz? Contact Form 7 ile, formunuzun görünümünü CSS kullanarak tamamen kontrol edebilirsiniz. Bu rehber, Contact Form 7 formlarını adım adım nasıl stillendireceğinizi gösterir ve ziyaretçileriniz için kusursuz, markanıza uygun bir deneyim oluşturmanızı sağlar.
Neden Contact Form 7 formlarını stillendirmelisiniz?
Contact Form 7, form oluşturmak için en popüler WordPress eklentilerinden biridir—ancak varsayılan görünümü basittir. Klasik WordPress temalarında özel stillendirme ile şunları yapabilirsiniz:
Sitenizin markasıyla uyumlu hale getirin
Kullanılabilirliği ve erişilebilirliği artırın
Formları daha davetkar ve profesyonel hale getirin
Adım 1: Formunuzun CSS seçicilerini belirleyin
Stil vermeye başlamadan önce, hangi CSS seçicilerinin form öğelerinizi hedeflediğini bilmeniz gerekir.
Her Contact Form 7 formu benzersiz bir sınıfa sarılır: .wpcf7
Giriş alanları, metin kutuları ve gönder butonları gibi bireysel öğeler standart HTML etiketlerini kullanır
Adım 2: WordPress sitenize özel CSS ekleyin
CSS eklemenin iki ana yolu vardır:
Özelleştirici üzerinden:
Şuraya gidin: Görünüm > Özelleştir > Ek CSS ve stillerinizi yapıştırın.
NOT: Daha gelişmiş özelleştirmeler için CSS'inizi alt temanızın style.css dosyasına ekleyin.
Adım 3: Kendi özel CSS'inizi yazın
Başlamak için bazı yaygın örnekler burada; "text" ve "submit" form bileşenleri örnek olarak kullanılmıştır:
Tüm Contact Form 7 formlarını stillendirin
.wpcf7 input[type="text"],
.wpcf7 textarea {
border: 2px solid #0073e6;
padding: 10px;
width: 100%;
font-size: 1em;
}
.wpcf7 input[type="submit"] {
background: #0073e6;
color: #fff;
border: none;
padding: 12px 30px;
font-size: 1em;
cursor: pointer;
transition: background 0.2s;
}
.wpcf7 input[type="submit"]:hover {
background: #005bb5;
}
CSS'teki :hover gibi psödo-sınıflar, öğeleri durumlarına veya kullanıcı etkileşimine göre stillendirmenizi sağlar. Örneğin, :hover psödo-sınıfı, bir kullanıcı fare imlecini bir butonun veya alanın üzerine getirdiğinde stilleri uygular. Bu, genellikle butonları vurgulamak veya üzerine gelindiğinde renklerini değiştirmek için kullanılır ve formlarınızı daha etkileşimli ve görsel olarak çekici hale getirir. Diğer kullanışlı psödo-sınıflar arasında :focus (bir giriş alanı seçildiğinde) ve :active (bir öğeye tıklanırken) bulunur. Psödo-sınıflar kullanmak, ziyaretçiler formunuzla etkileşime geçtiğinde anında geri bildirim sağlayarak kullanıcı deneyimini iyileştirir.
Belirli bir formu hedefleyin
Her formun benzersiz bir kimliği vardır, örneğin #wpcf7-f123-o1. Sadece o formu stillendirmek için bunu kullanın:
#wpcf7-f123-o1 input[type="text"] {
background: #f9f9f9;
}
f123-o1'i kendi formunuzun kimliğiyle değiştirin. Formunuzun benzersiz kimliğini, Contact Form 7 formunun yerleştirildiği sayfayı görüntüleyerek, formun üzerine sağ tıklayarak ve tarayıcınızda "İncele" (veya "Öğeyi İncele") seçeneğini seçerek bulabilirsiniz. .wpcf7 sınıfına sahip <div> öğesini arayın—kimlik, HTML kodunda id="wpcf7-f123-o1" gibi görünecektir. Yalnızca o belirli formu hedeflemek için bu kimliği CSS seçicinizde kullanın.
Adım 4: Contact Form 7'nin yerleşik sınıflarını kullanın
Contact Form 7, öğelere otomatik olarak sınıflar ekler ve hedeflemeyi daha da kolaylaştırır. Örneğin:
.wpcf7-form-control – Tüm form kontrolleri
.wpcf7-submit – Gönder butonu
Daha fazla kontrol için form düzenleyicisinde kendi sınıflarınızı da ekleyebilirsiniz.
Örnek
.wpcf7-form-control.wpcf7-text {
border-radius: 5px;
}
.wpcf7-submit {
font-weight: bold;
letter-spacing: 1px;
}
Adım 5: Önizleyin ve ayarlayın
CSS'inizi kaydettikten sonra, değişiklikleri görmek için sitenizi yenileyin. Tarayıcınızın inceleme aracını kullanarak stilleri gerçek zamanlı olarak ayarlayın ve ardından bunları sitenize kopyalayın. Değişiklik yaptıktan sonra güncellemelerin ziyaretçilere görünmesi için site önbelleğinizi temizlediğinizden emin olun.
Bir demo web sitesindeki bir formun öncesi ve sonrası örnekleri burada; 3. Adımdaki CSS kodunu kullanarak her form alanının etrafındaki kutuları mavi yaptık.
Daha iyi form stillendirmesi için hızlı ipuçları
Erişilebilir tutun: İyi renk kontrastı ve okunabilir yazı tipi boyutları sağlayın
Boşluk kullanın: Temiz ve düzenli bir görünüm için dolgu ve kenar boşlukları ekleyin
Hataları vurgulayın: Hata mesajlarını kullanıcıların hatalarını düzeltmesine yardımcı olacak net bir renkle (örneğin kırmızı) stillendirin
Mobilde test edin: Formlarınızın tüm cihazlarda harika göründüğünden emin olun
Sorun giderme
Stilleriniz görünmüyorsa, şu adımları deneyin:
Tarayıcı ve site önbelleğinizi temizleyin – Bazen önbelleğe alınmış dosyalar yeni CSS'in görüntülenmesini engeller. Bir önbellek eklentisi veya yönetilen hosting kullanıyorsanız, bu önbellekleri de temizleyin.
CSS özgüllük sorunlarını kontrol edin – Stilleriniz uygulanmıyorsa, mevcut stilleri geçersiz kılmak için seçicilerinizi daha özgül yapmayı deneyin.
Doğru CSS dosyasını veya bölümünü düzenlediğinizden emin olun – Kodunuzu doğru yere eklediğinizden emin olmak için tekrar kontrol edin; örneğin Ek CSS paneli, alt temanızın style.css dosyası veya özel bir CSS eklentisi.
CSS sınıflarını yazım hataları veya hatalar için gözden geçirin – Yanlış yazılmış sınıf adları, gereksiz boşluklar veya yanlış sınıf kullanımı olup olmadığını kontrol edin. Ayrıca, hedeflediğiniz sınıfın formunuzun HTML'sinde gerçekten var olduğundan emin olun.
Yinelenen veya çakışan sınıfları kontrol edin – Kullandığınız sınıfın başka bir yerde farklı stillerle zaten uygulanmadığından emin olun; bu, değişikliklerinizi geçersiz kılabilir.
Genel en iyi uygulamaları izleyin – Sınıflarınız için açık ve tutarlı adlandırma kullanın, her CSS kuralını noktalı virgülle bitirin ve kod bloklarını her zaman süslü parantez (}) ile düzgün şekilde kapatın.
Kodunuzu bu yaygın sorunlar için dikkatlice gözden geçirmek, özel stillerinizin sitenizde doğru şekilde görünmesini sağlamaya yardımcı olur.
Örnek: Bir Contact Form 7 formu için tam özel CSS
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px 12px;
margin-bottom: 16px;
width: 100%;
box-sizing: border-box;
}
.wpcf7 input[type="submit"] {
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
padding: 10px 24px;
font-size: 1.1em;
cursor: pointer;
}
.wpcf7 input[type="submit"]:hover {
background-color: #218838;
}
Yukarıdaki CSS koduyla stillendirilmiş bir form örneği burada. Bu CSS kodu, Contact Form 7 formunuzdaki birkaç önemli öğenin görünümünü özelleştirir. Tüm metin alanlarını, e-posta alanlarını ve metin kutularını hedefler; onlara açık gri bir kenarlık, yuvarlatılmış köşeler, rahat bir dolgu ve temiz, modern bir görünüm için tutarlı genişlik kazandırır.
Kod ayrıca gönder butonunu yeşil arka plan, beyaz metin, yuvarlatılmış kenarlar ve kalın, okunması kolay bir yazı tipiyle stillendirir. Kullanıcılar gönder butonunun üzerine geldiğinde arka plan rengi daha koyu bir yeşile dönüşerek etkileşimli bir geri bildirim sağlar.
CSS ekleme: klasik temalar ve blok temalar
Bu rehberdeki Contact Form 7 formlarını CSS ile stillendirme adımları, WordPress'teki Klasik Temalar için tasarlanmıştır. Popüler Astra gibi Klasik Temalar, Özelleştirici'yi kullanır; burada "Ek CSS" bölümüne kolayca özel CSS ekleyebilirsiniz. Bu, formlarınızı kolayca stillendirmenizi ve değişiklikleri canlı olarak görmenizi sağlar.
Ancak, siteniz bir Blok Tema (bazen Tam Site Düzenleme veya FSE teması olarak da adlandırılır) kullanıyorsa, süreç farklıdır. Blok Temalar her zaman Özelleştirici'yi veya "Ek CSS" alanını varsayılan olarak içermez. Bunun yerine, tasarım değişiklikleri yapmak için Site Editörü'nü kullanırsınız. Renkler, tipografi ve düzen için genel stilleri ayarlayabilirsiniz, ancak rastgele özel CSS eklemek her zaman arayüzde mevcut değildir.
Blok Tema kullanıyorsanız ne yapmalısınız
WordPress kontrol panelinizi açın ve Görünüm > Editör (Site Editörü) bölümüne gidin.
Site Editörü'nde, Stiller panelini arayın (yarı gölgeli daire simgesi).
Bazı Blok Temalar artık Stiller panelinde "Ek CSS" seçeneği sunuyor, ancak bu tema ve WordPress sürümünüze bağlıdır.
Özel CSS ekleme seçeneğini görmüyorsanız, site genelinde özel CSS eklemek için WPCode gibi bir eklenti kullanabilirsiniz. WPCode yeni başlayanlar için uygundur ve herhangi bir tema ile çalışır; böylece temanınız doğrudan CSS düzenlemeyi desteklemese bile formlarınızı yine de stillendirebilirsiniz. Ancak, bu eklentiyi yüklemenin web sitenizdeki diğer önceden var olan formların stilini etkileyebileceğini unutmayın.
Ek kaynaklar
Contact Form 7 formlarınızı stillendirmek, sitenizin kullanıcı deneyimini yükseltmenin basit ama güçlü bir yoludur. Sadece birkaç satır CSS ile formlarınızı markanızın doğal bir parçası gibi gösterebilir ve hissettirebilirsiniz.