WordPress İletişim Formunuzu Özelleştirin

WordPress İletişim Formunuzu Özelleştirin

Contact Form eklentisi WordPress’in güzel bir iletişim formu eklentisidir. Arayü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 />
    [text* your-name class:alan] </p>

<p>E-Mailiniz<br />
    [email* your-email class:alan] </p>

<p>Konu<br />
    [text* your-subject class:alan] </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;}

Önizleme yapacak olursanız farkedeceksiniz 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 bitiyor :)

Bir dahaki yazımızda görüşmek dileğiyle :)

13 Yorum

  1. ÖBÖ 17 Haziran 2011
  2. MuRaTCaN 17 Haziran 2011
  3. Ceyhun Ulaş 18 Haziran 2011
  4. temizlik şirketi 20 Haziran 2011
  5. AlpEreN 20 Haziran 2011
  6. Aycan Doğanlar 20 Haziran 2011
  7. Wordpress 26 Haziran 2011
  8. bedava film seyret 28 Haziran 2011
  9. Görkem KARA 02 Temmuz 2011
  10. Muharrem kömeç 07 Temmuz 2011
  11. Selinti 12 Ağustos 2011
  12. Seçil Soylu 02 Eylül 2011
  13. mehmet 01 Eylül 2012

Yorum Yaz