• Cem Karakurt
  • 96 Okunma
  • 9 Kasım 2013
  • 8
  •  

Contact Form 7 Css İle Düzenleme

WordPress’in popüler iletişim eklentisini bilirsiniz. Contact Form 7 wordpress sisteminde iletişim alanında lider.Hem kolay kullanımı hem de geniş işlevi ile kullanıcıları etkiliyor.Görünümü biraz basite kaçıyor.Bu yüzden bugün sizlere contact form 7 eklentisini css ile renklendirmeyi anlatacağım.

Demo Resim :

contact form 7
Aşağıdaki kodu Admin Paneli >İletişim >İletişim Formu > Form alanına ekleyin ve güncelleyin.

<ul id="contact">
<li><span class="text">Adınız</span><span class="required">(*)</span> </li>
<li><span class="text">E-mail</span><span class="required">(*)</span>[email* your-email] </li>
<li><span class="text">Konu</span> </li>
<li id="message"><span class="text">Mesajınız</span>[textarea your-message] </li>
<li id="submit">[submit "Send"]</li>
</ul>

Daha sonra

Aşağıdaki kodu Görünüm > Düzenleyici > style.css   belgesinin en altına yapıştırıyoruz.Ve dosyayı güncelle diyoruz.

Verdiğim Kodda istediğiniz yeri değiştirebilirsiniz.Tek yapmanız gereken değerler ile oynamak.Ya da renk kodlarını değiştirebilirsiniz.
Eğer text alanları sitenize büyük geliyor ise “width” kelimesinin yanındaki değeri küçültün.

 

#contact{
list-style:none;
margin:0;
}
#contact li{
float: left;
height: 60px;
margin:0 0 20px;
position: relative;
width: 540px;
}
#contact li .text{
background: #F0EFEF;
padding:15px 10px 10px 0;
position:absolute;
z-index:100;
min-width:85px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius: 5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
text-indent: 5px;
}
#contact li .required{
position:absolute;
right:10px;
top:10px;
z-index:100;
}
#contact li .wpcf7-form-control-wrap{
position: absolute;
}
#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
background:#fff;
border:solid 5px #F0EFEF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:15px 10px 25px;
width: 509px;
text-indent:95px;
z-index:100;
margin:0;
}
#contact li .wpcf7-form-control-wrap input:focus, #contact li .wpcf7-form-control-wrap textarea:focus{
background:#F0EFEF
}
#contact li .wpcf7-form-control-wrap textarea{
line-height: 28px;
padding: 10px;
height:200px;
}
#contact li#message{
min-height:220px;
}
#contact li#submit input{
color:#fff;
text-decoration:none;
margin:10px 30px 0 0;
background:#09b2f3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#69d2f9', endColorstr='#09b2f3');
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#69d2f9), to(#09b2f3));
background: -moz-linear-gradient(top, #69d2f9, #09b2f3);
border:none;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-0-border-radius:3px;
border-radius:3px;
display:block;
padding:10px 25px;
text-align:center;
text-shadow:0 1px 0 #09b2f3;
text-transform:uppercase;
}
#contact li#submit input:hover{
background:#69d2f9;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#09b2f3', endColorstr='#69d2f9');
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#09b2f3), to(#69d2f9));
background: -moz-linear-gradient(top, #09b2f3, #69d2f9);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
-o-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
color:#06506c;
text-shadow:0 1px 0 rgba(255,255,255,.25);
text-transform:uppercase;
cursor:pointer;
}
div.wpcf7-validation-errors {
clear: left;
}
İlginizi Çekebilir :   Wordpress Sitenin Temasını Bulmak

YORUM YAP


BU YAZIYA 8 YORUM YAPILMIŞ

    Salih Toy 9 Kasım 2013 - 12:40

    Belki bunda değil ama diğer formlarda kullanabilirim dostum (:

      İsmail Cem 9 Kasım 2013 - 12:45

      Css kodları ortak olduğu için her türlü formda olur sadece .wpcf7 yazan yeri değiştirmek yeterli.

    Burak ALHAS 9 Kasım 2013 - 18:09

    Bu tur alinti konularda kaynak belirtmeniz en iyisi olacaktir. Alinti : Ugur Dalkiran yazarsaniz sizin acinizdan daha iyi olacaktir.

      İsmail Cem 9 Kasım 2013 - 19:04

      Sadece css kod alıntıydı.Onu da değiştirdim.Alıntı konu değildir.

    Nedim Yıldırım 9 Kasım 2013 - 20:44

    Güzel bir bilgi fakat senden en kısa zamanda blogger iletişim formu da bekliyoruzzz :))

      İsmail Cem 9 Kasım 2013 - 20:47

      Bloggerda sistem farklı ama denerim.

    Sistem Gereksinimleri 15 Kasım 2013 - 09:43

    Az önce blogger iletişim formu konunu okumuştum, oda çok başarılıydı buda ;)

    furkan yalcınkaya 15 Aralık 2013 - 10:57

    teşekkürler güzel yazı.