Skip to content Skip to left sidebar Skip to right sidebar Skip to footer

Contact Form 7 Dizayn

Abone Ol 

İletişim formunu nasıl biçimlendirebilirim? Bu, destek forumlarında yaygın bir sorudur. Contact Form 7, şekillendirme için herhangi bir kişiselleştirme barındırmaz. CSS stil sayfalarını düzenlemek, iletişim formlarını stillendirmek için en iyi yöntemdir. Bu makalede, iletişim formlarınızı şekillendirmek için size bazı önemli adımlar göstereceğim. CSS’yi biliyorsanız,  CSS’ye aşina değilseniz, lütfen bu bilgilendirici web sitelerini ziyaret edin ve biraz CSS’yi öğrenin:

Hangi Stil Sayfasını Düzenlemeliyim?

Herhangi bir stil sayfası, ancak temanızın ana stil sayfasını düzenlemenizi öneririz. Eklenti ile stil sayfalarını düzenlememek daha iyidir, çünkü eklenti güncellendiğinde değişiklikler yazdığınız kodların üzerine yazılacaktır. Temalar güncellenebilir, ancak genellikle eklentilerden daha az sıklıkta güncellenir. Temanız sık sık güncelleniyorsa, bir alt tema oluşturabilir ve alt temada stil sayfasını yönetebilirsiniz.

Ayrıca doğrudan tema stil sayfalarını değiştirmek yerine Ek CSS de kullanabilirsiniz.  Bu birkaç avantaja sahiptir.

İletişim Formunda Stil Alanları

Tek tek alanları bir iletişim formunda nasıl biçimlendirebileceğimizi görelim. Birkaç tür giriş alanı vardır. En yaygın alan tek satırlık bir metin giriş alanıdır, bu nedenle bunun için bir stil kuralı ekleyelim:

input[type="text"]
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

Bu seçici, ‘type’ özelliği tam olarak ‘text’ değerine sahip olan tüm ‘input’ öğelerini eşleştirir (örn. Tek satırlık metin giriş alanları). Ayrıca, bu stil kuralı, arka plan rengi olarak beyaz, ön plan rengi (siyah) olarak siyah ve alan genişliği olarak% 50 olarak belirtilen üç özelliğe sahiptir.

Bu stil kuralını diğer alan türlerine uygulamak isteyebilirsiniz. Bir e-posta adresi giriş alanı ve çok satırlı bir metin giriş alanı için seçiciler ekleyelim:

input[type="text"],
input[type="email"],
textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

Şimdi bu stil sitenizin her bölümüne uygulanacak. İletişim formlarıyla sınırlandırmak isteyebilirsiniz. Contact Form 7’nin formu ‘wpcf7’ sınıfına sahip bir sarmalayıcı öğeye sahiptir. Ana seçicileri ekleyerek hedefin kapsamını sınırlayabilirsiniz:

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea
{
    background-color: #fff;
    color: #000;
    width: 50%;
}

Tarzlara Özel Alanlar

Sadece belirli alanlara stil vermek isteyebilirsiniz. İlk olarak, iletişim formunda stil vermek istediğiniz alanların form etiketlerine bir ‘id’ veya ‘sınıf’ seçeneği ekleyin:

[text text-123 id:very-special-field]

Sonra kimliği veya sınıfı kullanarak stil kuralları ekleyin:

#very-special-field
{
    color: #f00;
    border: 1px solid #f00;
}

Bütün Stil

Daha önce de belirttiğim gibi, iletişim formunun en üst düzey elemanı ‘wpcf7’ sınıfına sahip. Tüm iletişim formunu stillendirmek için sınıf seçiciye stil kuralları ekleyin:

.wpcf7
{
    background-color: #f7f7f7;
    border: 2px solid #0f0;
}

Bu stil kuralı, irtibat kişinize açık gri bir arka plan ve yeşil bir sınır verir.

Ayrıca bakınız

8 Yorum

Yorum Bırak

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ajax-loader