Blogger AMP İletişim Formu

10/06/2016
Blogger AMP İletişim Formu

Blogger AMP İletişim Formu - Blogger sitelerinde kullanılan iletişim formu oluşturmak için ya javaScript eklemek gerek yada iletişim formu gatget'i eklemek gerekti, şimdi bunlara hiç ihtiyat duymadan sadece CSS kodları ile tasarlanmış ve Blogger AMP uyumlu olup blog sitelerinizin daha hızlı olmasına katkı sağlayan bir blogger iletişim formu tasarladık.

Blogger AMP iletişim formuna animasyonlar ekleyerek şık bir görünüm tasarladık ve tasarladığımız formu ek olarak zoom özelliğide eklenerek mobil cihazlarda daha iyi çalışmasını sağladık. Hızlandırılmış mobil sayfalar için tam performans gösteren iletişim formunu Blogger, WordPress veya diğer bir bloglar için kullanılabilir.

Blogger AMP İletişim Formu Nasıl Eklenir?


1. Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Sayfalar > Yeni sayfa oluştur yolunu takip ederek yeni sayfanın HTML bölümünü açın. Aşağıdaki CSS kodlarını HTML bölüme ekleyin.

<style type='text/css'>
#contactForm input:focus ~ label,#contactForm textarea:focus ~ label,#contactForm input:valid ~ label,#contactForm textarea:valid ~ label{font-size:0.75em;color:#D35400;top:-2.25rem;-webkit-transition:all 0.125s ease;transition:all 0.125s ease}
#contactForm .styled-input{float:left;width:33.3333%;margin:2rem 0 1rem;padding:0 10px 0 0;position:relative;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#contactForm .styled-input-in{position:relative}
#contactForm{margin-right:-10px}
#contactForm .styled-input label{color:#999;padding:1rem;position:absolute;top:0;left:0;-webkit-transition:all 0.25s ease;transition:all 0.25s ease;pointer-events:none;line-height:1}
#contactForm .styled-input.wide{width:100%}
#contactForm input,#contactForm textarea{padding:1rem 1rem;border:1px solid #ddd;width:100%;font-size:1rem;background:#fafafa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#contactForm input ~ .span1,#contactForm textarea ~ .span1{display:block;width:0;height:3px;background:#D35400;position:absolute;left:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}
#contactForm input ~ .span2,#contactForm textarea ~ .span2{display:block;width:0;height:3px;background:#D35400;position:absolute;right:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}
#contactForm input ~ span{bottom:0}
#contactForm textarea ~ span{bottom:5px}
#contactForm input:focus,#contactForm textarea:focus{outline:0}
#contactForm input:focus ~ .span1,#contactForm textarea:focus ~ .span1,#contactForm input:focus ~ .span2,#contactForm textarea:focus ~ .span2{width:50%}
#contactForm textarea{width:100%;min-height:15em}
#contactForm .btn{font-family:"Helvetica","Arial",sans-serif;text-transform:uppercase;font-size:14px;font-weight:800;letter-spacing:1px;border-radius:0;padding:0 25px;height:51px;line-height:51px;color:#333;background-color:#fafafa;border:1px solid #ddd;cursor:pointer;margin:20px 0 0;background-image:none}
#contactForm .btn-default:hover,#contactForm .btn-default:focus{background-color:#D35400;border:1px solid #0400bf;color:white}
</style>

2. Aşağıdaki HTML kodları yukarıdaki eklediğiniz CSS kodlarının hemen altına ekleyin.

<form action="https://formspree.io/email@gmail.com" method="POST" target="_blank" name="sentMessage" id="contactForm">
<div class="styled-input">
<div class="styled-input-in">
<input type="text" name="name" required="required" />
<label>Adınız</label>
<span class="span1"></span><span class="span2"></span> </div></div>
<div class="styled-input">
<div class="styled-input-in">
<input type="email" name="_replyto" required="required" />
<label>Email</label>
<span class="span1"></span><span class="span2"></span> </div></div><div class="styled-input">
<div class="styled-input-in">
<input type="text" name="_subject" required="required" />
<label>Konu</label>
<span class="span1"></span><span class="span2"></span> </div></div>
<div class="styled-input wide">
<div class="styled-input-in">
<textarea required="required"></textarea>
<label>Mesajınız</label>
<span class="span1"></span><span class="span2"></span> </div></div>
<button type="submit" class="btn btn-default">Gönder</button>
</form>

3. HTML kod içerisinde bulunan email@gmail.com email adresinizi yazın. Ve sayfayı kaydedin.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

3 yorum

BoomBox is Extremely Customizable

Our demos aren't just predefined skins - it's set of options from endless variations!

Cevap

aynısı olmuyor ekledim çok farklı bir şey oldu ? http://guncelkpssnotlari.blogspot.com.tr/p/contactform-inputfocus-labelcontactform.html

Cevap

Bu AMP temalar için tasarlanmış bir widget, sizin kullandığınız temaya uygun değil

Cevap