Merhaba arkadaşlar
Bu Makalemizde WordPressin en çok kullanılan iletişim formu eklentisi olan contact form 7 eklentisi ile hazırlamış olduğumuz formun daha şık halde görünmesini sağlayacağız.
Bilmeyenler için eklentiyi buraya tıklayarak indirebilirler.
Öncelikle Formun örnek haline MB Tasarım Köy ve Dernek Teması v2 Demo sitesinden bakabilirsiniz.
İlk olarak bunun için gerekli olan css kodlarımızı temamızın style.css dosyasına ekliyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
.input { background: #fff7e9; font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 14px; border: 1px solid #c8c8c8; width: 600px; height: 25px; color: #696969; } .input:hover { background: #daebff; font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 14px; border: 1px solid #969696; width: 600px; height: 25px; color: #696969; } .notunuz { background: #fff7e9; font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 14px; border: 1px solid #c8c8c8; width: 600px; height: 100px; color: #696969; } .notunuz:hover { background: #daebff; font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 14px; border: 1px solid #969696; width: 600px; height: 100px; color: #696969; } .gonderbuton { background: #009cff; font-family: Trebuchet MS; font-size: 14px; font-weight: BOLD; border: 2px solid #CCCCCC; width: 100px; height: 30px; color: #FFFFFF; } .gonderbuton:hover { background: #ff9000; font-family: Trebuchet MS; font-size: 14px; font-weight: BOLD; border: 2px solid #000000; width: 100px; height: 30px; color: #FFFFFF; } |
Daha sonra Contact form 7 eklentisi form ayarlarına gelip Form bölümündeki alana alttaki kodları giriniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<p>Adınız Soyadınız (*)<br /> [text* your-name class:input] </p> <p>E-posta (*)<br /> [email* your-email class:input] </p> <p>Telefon<br /> [text your-telefon class:input]</p> <p>Konu<br /> [text your-subject class:input] </p> <p>Mesajınız<br /> [textarea your-message class:notunuz] </p> <p>[submit class:gonderbuton "GÖNDER"]</p> |
Daha sonra Sağdaki ileti gövdesi bölümüne alttaki kodları girin.
|
1 2 3 4 5 |
Adınız Soyadınız : [your-name] E-Posta : [your-email] Telefon : [your-telefon] Konu : [your-subject] Mesajınız : [your-message] |
Bu şekilde Kriterleri çoğaltarak istediğiniz gibi değiştirebilirsiniz.
Kaydettikten sonra işlem tamamdır. formunuz aynı MB Tasarım Köy ve Dernek Teması v2 Demo sitemizdeki gibi çıkıcaktır.
Tüm İşlemleri yaptınız ama gönderilenler mailinize gelmiyormu ? Ozaman WordPress SMTP Ayarları adlı konumuzu inceleyin.
İçerik izinsiz ve kaynaksız Kopyalanamaz.!
İyi Bloglamalar 