Blogger sitelerinde bugüne kadar bir çok iletişim kutusu tasarımı blogculara sunulmuştu, fakat bugün ben size blog sitenizde kullanabileceğiniz mini iletişim kutusunu sizlerle paylaşıyorum. İlk kez sitemizde yayınlamış olduğumuz ve özellikle PHP kodlaması ile oluşturulmuş bu iletitişim kutusu diğer blogger iletişim kutularından çok farklı özelliklere sahip. Şunu özellikle vurgulamak istiyorum blogger sitelerinde iletişim kutusu tasarımları bir birine çok yakın, fakat bu süper iletişim kutusu hem tasarımı hem de diğer animasyon özellikleri ile blogger iletişim formlarından ne kadar farklı olduğunu göstermektedir.
Animasyonlu Blogger İletişim Formu Nasıl Çalışır?
- Blogunuzun iletişim sayfasına gelindiğinde iletişim formu yukardan aşağı inen animasyon özelliklidir.
- İletişim formu sayfaya geldiğinde muhteşem görünümü ile ziyaretçilerinizi karşılamaktadır.
- Animasyonlu blogger iletişim formunun ön yüzünde blogunuzun isminden önce "Hoşgeldiniz" yazamakta olup, hemen alt kısmında iletiye en kısa sürede cevap verileceği bilgi paylaşılmaktadır.
- İletişim formunun alt kısmında bulunan kırmızı buton (Buraya tıklayın) ile iletişime geçmek için tıklıyoruz ve süper mesaj kutusu karşımıza çıkmaktadır.
- Yine iletişim formunda isim, e-posta ve mesaj alanları yer almaktadır. İleti gönderilirken Font Awesome 360 derece dönen fa-cog iconu kullanılmıştır.
Blogger İletişim Formu Animasyonlu PHP Versiyonu Özellikleri;
- PHP, HTML5 kodlama
- PHP Animasyon Özellikli
- Özel Animasyonlu Açılır Buton
- İleti Gönderme Animasyonu
- WordPress Tabanlı Blogger İletişim Formu
Blogger Animasyonlu Süper İletişim Kutusu Kurulumu
1. Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Sayfalar > Yeni sayfa yolunu takip ederek iletişim sayfası oluşturuyoruz. Eğer blogunuzun zaten bir iletişim sayfası varsa, sadece yapmanız gereken aşağıdaki değişiklikleri yapmanız yeterli olacaktır.2. Eğer yeni bir iletişim sayfası oluşturuyorsanız blogunuza eklediğiniz sayfanın HTML kısmına aşağıdaki kodları ekleyin, sayfanızın başlığını ve arama açıklamasını ekledikten sonra sayfayı kaydedin. İletişim sayfanız hazır.
<link rel="stylesheet" href="https://cdn.rawgit.com/jquerycods/pgs/master/anmt.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/jquerycods/pgs/master/contact.css" />
<div class="wrapper">
<div class="notice-holder">
<form role="form" id="contactForm" data-toggle="validator" novalidate="true">
<div class="notice">
<h3 class="notice-heading">Hoşgeldiniz <span class="alternate"><i class="fa fa-envelope"></i><br> Blogger Eklentileri</span></h3>
<hr class="colorgraph">
<div id="show_form" class="uploadbox">
<!-- Blogger Eklentileri Süper Mesaj Kutusu -->
<div class="tab_info">
<div class="wabel">
<img src="https://cdn.rawgit.com/jquerycods/pgs/master/iletisim.png">
<span>Biz blogger üzerinde çalışıyoruz! <strong>Size dönüş yapacağız!</strong></span>
</div>
</div>
<div class="tab_form hidden">
<span>Süper Mesaj Kutusu!</span>
<div class="form-group">
<input id="ContactForm1_contact-form-name" name="name" class="form-control wat" placeholder="Adınız *" size="30" type="text" value="" />
</div>
<div class="form-group">
<input id="ContactForm1_contact-form-email" name="email" class="form-control wat" placeholder="Email adresiniz *" size="30" type="text" value="" />
</div>
<div class="form-group">
<textarea cols="25" id="ContactForm1_contact-form-email-message" class="form-control wat" name="email-message" placeholder="Mesajınız *" rows="5"></textarea>
</div>
<div id="msgClasses"class="text-center hidden"></div>
<div id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></div>
<div id="ContactForm1_contact-form-error-message">
</div>
</div>
</div>
</div>
<input id="ContactForm1_contact-form-submit" class="btn btn-lg btn-warning btn-block notice-button height-zero" style="pointer-events: all; cursor: pointer;" type="submit" value="Mesajı Gönder" />
</form>
<a id="form-call" href="#!"><button id="form-show" class="btn btn-lg btn-danger btn-block notice-button">Buraya tıklayın</button></a>
</div>
</div>
<div class="foot-smooth"></div>
<script src="https://cdn.rawgit.com/jquerycods/e21/master/.snd.js"></script>
<script src="https://cdn.rawgit.com/jquerycods/pgs/master/contact.js"></script>
3. İletişim formunun çalışmaması durumunda, blogunuzda yerleşim sayfasından iletişim formu gadget'i eklediğinizden emin olun. Örnek iletişim formu widget'i aşağıdaki gibidir. Bu widget'in blogunuzun şablon kodları arasında yok ise blogunuzun şablon kodları arasında sidebar'ı bularak sidebar içerisine ekleyin. Eğer kodlar ile ilgili fazla bir bilginiz yok ise blogunuzun kumanda panelinde bulunan Yerleşim > Sidebar menüsünden yeni Gadget ekle yolunu takip ediyoruz. Eklenen yeni Gadget içerisinden Diğer seçeneğini tıklayarak ikinci sırada bulunan İletişim Formu widget'ini ekleyin ve kaydedin.
<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<div class='formcolumn1'>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' placeholder='Name *' size='30' type='text' value=''/>
</div>
<br/>
<div class='formcolumn2'>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' placeholder='Email *' size='30' type='text' value=''/>
</div>
<br/>
<div class='formcolumn3'>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' placeholder='Message *' rows='5'/>
</div>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<div>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>
4. Eklemiş olduğunzun İletişim Formu gadget'inin anasayfa'da görünmemesi için, blogunuzun şablon kodları arasında bulunan CSS dosyalarının içerisine aşağıdaki CSS kodunu ekleyin.
#ContactForm1,#ContactForm1 br {display:none}Kısa Bilgiler ve Açıklama
1. Yukarıdaki ileşim formu kodları arasında bulunan renkli alanları kendi blogunuza göre düzenleyin.2. Bu yeni ileşim formu widget'inin kurulumu aşamasında yaşanabilecek herhangi sorun için yorum kısmından bize danışabilirsiniz.
3. Bu iletişim formu wordpress'ten blogger sitelerinde uyarlanmıştır. Bu iletişim formu widget'i üzerinde blog yöneticilerimizin büyük bir emeği vardır. Bu nedenle sayfamıza bir yorum bırakarak bize destek olabilirsiniz.
Etiketler: Blogger PHP İletişim Formu, HTML5 Blogger İletişim Formu, Animasyonlu Blogger İletişim Formu
Yorum Gönder