Contact Form 7 CSS Düzenleme

Bu makalemde WordPress‘in en popüler 10 eklentisinden biri olan “Contact Form 7” yani “İletişim Formu” nu css ile güzelleşirmeyi gösteceğim.Bildiğiniz gibi iletişim formu websiteniz üzerinden insanların size mail atmasına olanak tanıyor.Aslında eklentiyi yüklediğinizde direk olarak kullanabiliyorsunuz fakat eklenti kendi CSS‘ini kullandığı için biraz basit görünümlü oluyor.Neyse iletişim formlarınızı daha şekil göstermek isterseniz aşşağıdaki işlemleri uygulayabilirsiniz.İşlemi tamamladığınızda formunuz aşşağıdaki gibi gözükecek.

google-analytics-kitap

Hemen alttaki kodu WordPress admin panelinize giriş yaparak “İletişim > İletişim Forumları > Form” adresine ekliyorsunuz.

Kodu Göster

Ardından “Görünüm > Düzenleyici > Style.css ” adresine girerek temamızın CSS dosyasının en altına hemen aşşağıdaki kodu eklıyoruz.

#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;

Son işlemi de yaptığımıza göre artık iletişim formunuzu daha hoş bir şekilde sitenize ekleyebilirsiniz.

Sosyal ağlarda paylaşın : Share on Google+1Tweet about this on TwitterShare on LinkedIn0Share on Facebook1

3 yorum. Yorum yapmak istiyorum!

Burak Şen
27 Ocak 2014 21:54

Teşekkür ederim , sitemin iletişim formunu daha şık hale getirdim sayenizde :)

Cevapla

Ben teşekür ederim :)

Cevapla

Contact form 7 eklentisi her websitenin kullanmasi gereken olmazsa olmaz eklentilerden. Birde makalede anlatilan adimlari uyguladigimizda cok daha guzel bir gorunum elde ediyoruz. Ellerinize saglik

Cevapla

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir