Contact Form 7 Temaya Özel CSS Düzenleme

WordPress temasında en fazla kullanılan form eklentisi olan Contact Form 7 yi kullanıyoruz. Contact Form 7 nin varsayılan stili basit durmaktadır. Bu yüzden nasıl değiştireceğimizi anlatacağım.

1. Öncelikle aşağıdaki kodları Contact Form 7 nin form alanına yapıştırınız.


 

 

 

 [submit "Gönder"]

 

2. Temanın style.css dosyasının içine aşağıdaki stil kodlarını atalım.

div#wpcf7-f68-o1{ 
background-color: #282828;
border: 1px solid #282828;
padding:20px;
}
#wpcf7-f68-o1 input[type="text"],
#wpcf7-f68-o1 input[type="email"],
#wpcf7-f68-o1 textarea {
background:#d8d8d8;
color:#111111;
width:100%;
font-family:lora, "Open Sans", sans-serif; 
font-style:italic;    
}
#wpcf7-f68-o1 input[type="submit"],
#wpcf7-f68-o1 input[type="button"] { 
background-color:#1e73be;
width:100%;
text-align:center;
text-transform:uppercase;
}

3.

Yukarıda da görüldüğü üzere form alanına gelip sağa tıkla diyoruz. Sonra “Sayfa kaynağını görüntüle” tıklıyoruz.

4. Gelen sayfadan Contact Form 7 nin olduğu kısma geliyoruz. Aşağıdaki resimde seçili kısmı koplalıyoruz.

5. Kopyaladığımız ID yi style.css dosyasına eklediğimiz kodların içindeki koyu ile gösterilen “wpcf7-f68-o1” yerine yazıyoruz.

Kaydet diyoruz işlem bu kadar.

style.css dosyasına kopyaladığımız stil kodlarında oynamalar yaparak formun renk ve fontlarını değiştirebilirsiniz.

Bir cevap yazın

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

+ 34 = 35