Dikkat

Artık daha güncel bir blog olacak !

  • Cem Karakurt
  • 144 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;
}
  • 9 Kasım 2013 tarihinde yazıldı.
  • 8 yorum yapıldı.

Yorumlar (8 Yorum)

Yazı hakkında görüşlerinizi belirtmek istermisiniz?