Anasayfa / CSS ile Contact Form 7 Düzenleme

CSS ile Contact Form 7 Düzenleme

Birçok kişinin css bilgisi olmadığı için Contact Form 7‘yi olduğu gibi sade kullanıyor ve dolayısıyla canlı bir sitede iletişim sayfası cok sözük kalıyor. Bugün ki yazımda Contact Form 7 kullanan arkadaşlarıma CSS ile nasıl güzel bir iletişim formu hazırlayacağımızı  anlatıcam. Anlatıma geçiyorum hemen;

Aşağıdaki gibi bir form oluşturduk p class değerleri iletisim olan

Ben yukarıda normal bir iletişim formunda olması gerekenleri yaptım sizde sizin ihtiyacınıza göre bir çok şey ekleyip çıkartabilirsiniz.

Şimdi gelelim CSS ayarlarına, kendi siteme uygun css ayarları yaptım siz renklerini değitirip kendi sitenize göre entegre edebilirsiniz

input.wpcf7-form-control {
height:25px;
line-height:25px;
width: 260px;
padding: 10px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: none;
/* add submit button a rounded corner */
-o-border-radius: 5px;
/*for opera*/
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* add input box a inset shadow  */
-moz-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
/*for Mozilla*/
-webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
/*for Chrome and Safari*/
box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
}
input.wpcf7-form-control:focus {
border:solid 1px #73ac57;
}
textarea.wpcf7-form-control:focus {
border:solid 1px #ccc;
}
textarea.wpcf7-form-control {
height:100px;
width: 520px;
padding: 10px 3px 3px 15px;
margin: 2px 13px 16px 0;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: none;
/* add submit button a rounded corner */
-o-border-radius: 5px;
/*for opera*/
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* add input box a inset shadow  */
-moz-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
/*for Mozilla*/
-webkit-box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
/*for Chrome and Safari*/
box-shadow: inset 1px 1px 2px rgba(200, 200, 200, 0.2);
}
p.iletisim {
width:271px;
float:left
}
input#gonder {
width:100px;
line-height:25px;
font-weight: bold;
color: #777;
margin-right:30px;
background-color: #ececec;
text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
padding: 3px 10px;
cursor: pointer;
/* add submit button a rounded corner */
-o-border-radius: 5px;
/*for opera*/
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/* add background gradient effet */
/*for Chrome and Safari*/
background: -webkit-gradient(linear, left top, left bottom, from(#ececec), to(#ddd));
/*for Mozilla*/
background: -moz-linear-gradient(top, #ececec, #ddd);
/*for IE*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ececec', endColorstr='#ddd');
}
input#gonder:hover {
background:#303030;
color:#fff;
}

Sonuç

contact-form-7-css

WordPress Emlak Teması

16 yorum

  1. aşağıdaki linktekine benzer bir CSS şekli bulabilirmiyiz ki veya nasıl yapılır ?
    CSS

  2. bide adam gibi yazı yazın ben ayarları yaptım uygun yere koy diyoo uygun yer nere

  3. hocam ben r10 daki konunu bulamadım. 🙂 yazacaktım 3 yorum yapıldı diye ama olmadı. 🙂 bunla beraber 4 yorum olsun önemli değil nabiz61.com yazarsın kolay gelsin iyi çalışmalar

  4. Volkan Akpınar

    Bir zamanlar bende yapmıştım ama artık eklenti kullanmıyorum kendim entegre ettim en sağlıklısıda bu bence, ama bunu arayan bir çok insan var, teşekkürler.

  5. ben bunu ekliyorum ama bu şeyler birbirine karışıyor bunu nasıl düzenleriz bide o sonuç kısmını nasıl yaptınız ben eklenyince sayfaya kodlar gözüküyor

  6. Çok teşekkürler işime yaradı.

  7. çalışmalarınızda başarılar dilerim paylaşım güzel

  8. Benim gibi bu işe yeni başlayan insanlar için gerçekten harika bir anlatım olmuş.

  9. Sitemde kullandığım eklentilerden birisi ancak işlevsellik açısından jotform daha iyi.

    • bende jotform kullanıyorum cünkü hostum mail göndermiyor dolayısıyla contact form 7 çalışmıyor

  10. Kodlamalar ve anlatım çok başarılı teşekkürler.

  11. Kodları paylaşmanız acemi webmasterler açısından çok iyi olmuş. Benimde işime yarar açıkcası.

Cevapla

E-posta adresiniz yayınlanmayacak. Gerekli alanlar işaretlenmelidir *

*

x

İlginizi Çekebilir

PayPal.Me İle Ödeme Alın

Paypal’ın çıkarmış olduğu PayPal.Me ile artık direk olarak kullanıcı profilinizden ödeme alabilirsiniz.PayPal.Me ...