Blogger İçin İletişim Formu Kodları

Formspree.io Sitesi Üzerinden İletişim Formu Yapımı

1-) Blogger yönetim panelinde yeni sayfa açılır.

2-) Html görünümüne geçilir.

3-) Aşağıdaki kodlar yapıştırılır.

4-) Kodların arasındaki MAİLADRESİ kısmına Blogger'a girişte kullanılan mail adresi yazılır.

5-) Sonra sayfa yayınlanır.

6-) Form deneme olarak doldurulup gönderilir.

7-) Form sizi Formspree.io sitesine yönlendirir. 

8-) Bu siteye kayıt olunup mail adresi aktifleştirilir.

Bu sitede kayıt oluşturulduktan sonra form tanımlanmış olacak. Bundan sonra bloktan gönderilen formlar mail adresine gelecektir.

<div dir="ltr" style="text-align: left;" trbidi="on">

<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>

<br />

  

  

<form action="https://formspree.io/MAİLADRESİ" id="contactForm" method="POST" name="sentMessage" target="_blank">

<div class="styled-input">

<div class="styled-input-in">

<div style="text-align: left;">

  

<input name="name" required="required" type="text" />

<label>İsim</label>

  

</div>

<span class="span2"></span>

    

</div>

</div>

  

  

<div class="styled-input">

<div class="styled-input-in">

  

<input name="_replyto" required="required" type="text" />

  

<label>Email</label>

  

<span class="span1"></span><span class="span2"></span> 

  

</div>

</div>

  

  

<div class="styled-input">

<div class="styled-input-in">

    

<input name="konu" required="required" type="Konu" />

  

<label>Konu</label>

  

<span class="span1"></span><span class="span2"></span> 

  

</div>

</div>

  

<div class="styled-input wide">

<div class="styled-input-in">

  

<textarea name="message"></textarea>

  

  Mesajınız

  

 </div>

</div>

<button class="btn btn-default" type="submit">Gönder</button>

</form>

</div>