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.
