Öncelikle ben kendi zevkime göre bu şekilde düzenledim İletişim sayfamızdan kontrol edebilirsiniz. Sizlere hem tüm kodları vereceğim hem de renkleri nasıl düzenleyebilirsiniz bunları göstereceğim.
Öncelikle eğer iletişim sayfanız yoksa Contact Form 7 eklentisini indiriniz.
Eklentiyi kurduğunuzda varsayılan stil görünür.
Sonrasında düzenleyiciden style.css dosyamıza girelim. Uygun bir bölümü aşağıdaki kodları ekleyiniz.
.your-name input, .your-email input, .your-subject input, .wpcf7 textarea{
outline:none;
border: 1px dashed #808080;
width:290px; height:18px;
padding:5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
-webkit-transition: box-shadow 1s;
-moz-transition: box-shadow 1s;
-o-transition: box-shadow 1s;
transition: box-shadow 1s;
}
.wpcf7 textarea{
width:580px; height:100px;
}
.your-name input:Focus, .your-email input:Focus, .your-subject input:Focus, .wpcf7 textarea:Focus{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow:0px 0px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0px 0px 15px rgba(0, 0, 0, 0.2);
box-shadow:0px 0px 15px rgba(0, 0, 0, 0.2);
-webkit-transition: box-shadow 1s;
-moz-transition: box-shadow 1s;
-o-transition: box-shadow 1s;
transition: box-shadow 1s;
}
Bu kodları eklediğiniz zaman benim iletişim sayfam gibi bir sayfanız olucak.
Yani bu şekilde;
Tabi herkesin teması farklı olduğu için bu tasarım sizin temanıza uymayabilir. Kendi temanıza göre düzenlemek için kodlar üstünden bir kaç değişiklik yapmalısınız.
Örneğin;
“border: 1px dashed #808080;”
Bu kod gri renkli yerleri değiştirir yani kutucukların etrafını kaplayan yerleri. Bunu diğer renk kodlarını deneyerek kendi temanıza uygun hale getirebilirsin.
Bir diğeri;
“.uneditable-input:focus” style.css dosyasına gelerek verdiğim kelimeyi aratın. Bir alt satırında
“border-color: #78bcf0;”
bu tarz bir kod olacak buradaki “#78bcf0″ sizde değişiklik gösterebilir. Buradaki renk ise kutucuğa tıkladığınızda çıkan renktir.
Umarım işinize yarar. Bunlar daha ilk anlatımlarım olduğu için biraz acemice olabilir. Bir hatam var ise kusura bakmayın.
Kaynak: WordPress İletişim Formu Tasarım Düzenleme (Contact Form 7)
