Contact Form eklentisi WordPress’in güzel bir iletişim formu eklentisidir. Ara yüz tasarımını kendine özgü yapmak isteyenler için kendi iletişim sayfamda kullandığım kodları düzenleyerek siz değerli Türk webmasterlar için güzel bir makale oluşturmak istedim. İnternette bu konuda başlı başına bir kaynak yok. Kimse sormamış mı bilmiyorum ama tasarıma önem verenlerin işine yarayacağına eminim 🙂 Girişte de bahsettiğim gibi kullandığımız eklenti Contact Form – 7’dir.
Anlatımın diğer eklentilerle uyumluluk sağlaması pek olası değildir. Eklentiyi buradan indirebilirsiniz.
Haydi başlayalım 🙂
Öncelikle style.css’den aşağıdaki stilleri ekleyin.
.iletisim{padding: 5px;}
.iletisim .alan{width: 300px; height:24px;background-color:#fff; margin-top: 5px; border: 1px solid #666; padding: 5px; color:#333;font-size: 14px;}
.iletisim .alan:focus { background-color:#f9f9f9;border: 1px solid #000;}
.iletisim textarea {background-color:#fff;margin-top: 5px;background-color:#f9f9f9;border: 1px solid #666; padding: 5px; width: 480px; color:#333; font-size: 14px;}
.iletisim textarea:focus { border: 1px solid #000;background-color:#f9f9f9;}
.iletisim .button { background-color:#fff;width: 100px; height: 30px; border: 1px solid #666; color:#333;display:block;}
.iletisim .button:hover { border: 1px solid #666; background-color:#f9f9f9;}
Daha sonra Yönetici Paneli > Contact Form eklentisinden iletişim formunu oluşturduğunuz sayfaya gelin ve aşağıdaki kodu yapıştırın.
<div class="iletisim"> <p>Adınız<br /> 1 </p> <p>E-Mailiniz<br /> [email* your-email class:alan] </p> <p>Konu<br /> 1 </p> <p>Mesajınız<br /> [textarea* your-message class:alan]</p> <p>[submit class:button "Gönder"]</p> </div>
Güvenlik sorgusu:
Eğer iletişim formunuza 5+1 kaç eder? gibi bir bot engelleme sorusu eklemek isterseniz aşağıdaki kodlardan yardım alabilisiniz.
“Güvenlik Sorusu” kutucuğu için yine yukarıdaki kodlamayı ekledikten sonra iletişim formu eklenen bölüme aşağıdakini;
<p>Güvenlik Koruması:<br /><br /> [quiz quiz-543 class:soru "5+5=?|10" ]</p>
Daha sonra da style.css’ye aşağıdaki kodları ekleyin;
.iletisim .soru { font-size:11px; width:20px;border: 1px solid #666; height: 15px;}
.iletisim .soru:focus { font-size:11px; border: 1px solid #000; width:20px; height: 15px;}
Ön izleme yapacak olursanız fark edeceksiniz ki, iletişim formu tasarımımız değişti. CSS kodları ile oynayarak çok farklı görünümler elde edebilirsiniz 🙂 Kısaca her şey stili ile oynamak istediğiniz bölüme “class:” tagını girip CSS’nizde “.stili-degisecek-yer” gibi bir class tanımlamakta bitmektedir.