WordPress İletişim Formunuzu Özelleştirin

Tarih: 17 Haziran 2011   Yazar: editor  |  2.328 kez okundu
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 :)


    Bu yazı için 12 yorum yapılmış.
  1. ÖBÖ dedi ki:

    Teşekkürler Aycan.Hep aklımda olan bir konuydu.Deneyip hatam olursa buraya yazacağım.

  2. MuRaTCaN dedi ki:

    En Kısa Sürede Deneyeceğim Teşekkürler

  3. Ceyhun Ulaş dedi ki:

    Çok teşekkürler Aycan en kısa sürede deneyeceğim.

  4. daha detaylı bir iletişim formu yapmak için ne yapmamız gerekir acaba şimdidden teşekkürler…

  5. AlpEreN dedi ki:

    Farklı bir eklentiyi özelleştirip kullanıyordum lakin bunu da deneyelim senin gösterdiğin CSS ayarları ile.

  6. Aycan Doğanlar dedi ki:

    Bu tasarım olarak iyi değil :) Sadece nasıl özelleştirebilceğimizi anlattım :) CSS’yi kendinize göre oynarsınız :)

  7. Wordpress dedi ki:

    Bir de önizleme ekleseydiniz daha güzel olacaktı…

  8. Bi düşün abla çözmüş olayı beyler bize kullanmak kalıyor :)

  9. Görkem KARA dedi ki:

    Evet tasarım olarak iyi değil. Ben uğraşmak istemedim. Burada güvenlik sorusu işime yaradı, teşekkürler…

  10. Muharrem kömeç dedi ki:

    Paylaşımın için teşekkür ederim gerçekten çok güzel..

  11. Selinti dedi ki:

    hocam style css ye ekledim kodu fakat 2. kodu nereye ekliyeceğimi bulamadım. beceremedim yani yardımcı olur musun ?

  12. Seçil Soylu dedi ki:

    Aycan hanım wmaracı forum sitenize de üye olmak istiyorum web mailim var , yardımcı olursanız sevinirim ; iyi çalışmalar


Yorum yazmak istermisiniz?

Sorbize RSS Beslemesi    Sorbize E-Posta Aboneliği    Sorbize'yi Facebooktan Takip Edin    Sorbize'yi Twitter'dan Takip Edin    Abone

Yazılar E-Posta'na Gelsin:

Lazım Olabilir
  • Webmaster Portalı
  • Url Kısaltma Servisi
  • Sorbize.com bir çok kategoride güzel ve özgün makaleler okuyabileceğiniz güncel web 2.0 bir blogdur.
    © Tüm Hakları Saklıdır.
    Bu websitesi DMCA Protection ile lisanslanmıştır. Yazılar kaynak belirtilmeden kullanılamaz.