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; }
Genellikle Windows ve Mac OS işletim sistemli bilgisayarlarda WordPress tema geliştiricileri localhost kurulumu yapmak için…
Her birey zaman zaman şifrelerini güncellemelidir. WordPress yönetici şifresini değiştirmek oldukça basit bir işlemdir, ancak…
Emlak temaları hakkında daha fazla bilgi edinmek için sizleri ücretsiz WordPress emlak teması serimize davet…
Markanız için bir site oluşturmak istiyorsanız en iyi ücretsiz kurumsal WordPress teması seçeneklerine bakabilir ve…
Cloudflare ile WordPress güvenliğini artırma çalışmasından önce kısaca size Cloudflare'i neden tercih ettiğimden bahsedeyim. Cloudflare'in…
Son zamanların en gözde yatırım araçlarının başında kripto paralar geliyor. Bir anda yükselişe geçmesi ve…
Bu web sitesinde çerezler kullanılıyor.