Blogger AMP İletişim Formu

Arlina Design: Blogger AMP İletişim Formu 6.10.16
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.

Yorum Gönder