Bloger Sabit Açılır İletişim Formu

Bloguna iletişim formu eklemek isteyen Blogger kullanıcıları için farklı ve güzel bir alternatif sunmak istiyorum. Blogger’ın kendi gadgetları arasında bulunan iletişim formu üzerinde biraz değişiklikler yaparak floating dediğimiz yüzen yani sayfayı yukarı aşağı kaydırsanız dahi belirlediğimiz pozisyonda sabit kalan bir iletişim butonu koyacağız ve bu butonun üzerine gelindiğinde şık bir iletişim formu açılacak.


Bloger sabit açılır iletişim formu

Öncelikle şunu belirtmek isterim ki iletişim formu kesinlikle çalışıyor ve iletişim formu aracılığıyla gönderilen mesajlar blogunuza bağlı Gmail hesabınızdaki sosyal sekmesi altına geliyor.



Görmüş olduğunuz Blogger iletişim formunu blogunuza eklemek için öncelikle Yerleşim > Gadget Ekle > İletişim Formu diyerek Blogger’ın kendi iletişim formunu eklemelisiniz. Ardından aşağıdaki kodları HTML/JavaScript Gadget olarak ekleyeceksiniz ve iletişim formu eklediğiniz yerde değil de belirlediğimiz pozisyonda yüzen ve açılır şekilde, görünümünde de bazı değişikliklerle göreceksiniz.

<style>
.form-parent {width:323px;height:auto;background: transparent url('http://i.hizliresim.com/5VQ4AL.png') no-repeat right 10px;position:fixed;top:240px;left: -275px;z-index:9999999;transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.form-parent:hover {left:0;}
.cc-float-form {background:-moz-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-webkit-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-o-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);    background:-ms-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);    background:linear-gradient(to bottom, #2b2a2b 5%, #0a0a0a 100%);color:#fafafa;padding:10px;    width:250px;border:2px solid #000;    border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#ContactForm1 {display:none;}
.contact-form-area {background: #222;width: 245px;padding: 10px 0px;border: 1px solid #111;box-shadow: 2px 2px 2px #111 inset;    -webkit-box-shadow: 2px 2px 2px #111 inset;font-family:Verdana, Geneva, sans-serif;color:#fafafa;font-size: 12px;}
#cc {float:right;font-size:9px;margin-top:-10px;color:#777;}#cc a {    color: #777;text-decoration:none;}
</style>
<div class='form-parent'>
<form name="contact-form" class="cc-float-form">
<p></p>
İsim:<br />
<input class="contact-form-area" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Email:
<span style="color:red;">*</span><br />
<input class="contact-form-area" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Mesaj: <span style="color:red;">*</span><br />
<textarea class="contact-form-area"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Gönder" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>

Kodlarda hiçbir değişiklik yapmanıza gerek yok. Tabi gadget olarak eklediğiniz iletişim formunu da kaldırmamanız gerekiyor. Herkese iyi bloglar…

32 yorum:

  1. Iyivarsin hocam omrune bereket versin rabbim

    YanıtlaSil
  2. Serdar bey çok teşekkürler. Bunun bir de sosyal medya için olanları oluyor. Onlar içinde güzel bir içerik bekliyoruz. :)

    YanıtlaSil
  3. Hocam güzel.Ama yeni başlayanlar için gelişim bloglarınız bulunuyormu?Saygılarımla

    YanıtlaSil
  4. İletişim sayfasını olumsuz etkileyecektir :D

    www.zompir.com

    YanıtlaSil
  5. Teşekkürler, güzel bir eklenti.

    YanıtlaSil
  6. Çok güzel Serdar Bey çok teşekkür ederim. Ayrıca bu tarz blogger eklenti tarzı yazıları bekliyorum :)

    YanıtlaSil
  7. Çok güzel yararlı bir paylaşım olmuş.Bu açılır pencere her tarayıcıda açılır umarım.

    YanıtlaSil
  8. Kod çalışıyor ama gönderdiğim mesaj gitmiyor malesef.Sebebi ne,hocam?

    YanıtlaSil
  9. Merhaba,

    Kod çalışıyor. Eklediğiniz gadgeti kaldırmayın. Zaten sola eklendiğinde diğeri kalkıyor.


    Teşekkür ederim.

    YanıtlaSil
  10. Kodu kendi sitem için denedim sorunsuz şekilde çalışıyor. Teşekkürler!

    YanıtlaSil
  11. Floating iletişim formunu siteme eklemek istiyorum ama bazı sıkıntılar yaşıyorum yardım eder misiniz?

    YanıtlaSil
  12. Günümüzde bu tarz formlar çok kullanılmıyor ama site tasarımına göre oldukça kaliteli oluyor bazen. teşekkürler :)

    YanıtlaSil
  13. Sorun yaşayan olursa yardımcı olabilirim.

    YanıtlaSil
  14. Paylaşım için sağolun hocam, kesinlikle güzel bir anlatım.

    YanıtlaSil
  15. benim anlamadığım konu bu kodları nereye yapıştırmamız gerekiyor ?

    YanıtlaSil
  16. Çok hoş durdu elinize sağlık

    YanıtlaSil
  17. Cok başarılı teşekkürler

    YanıtlaSil
  18. hocam blogger konusunda ciddi anlamda Türkiye'de teksin :)

    YanıtlaSil
  19. Elinize sağlık hocam!

    sanalkariyer.blogspot.com

    YanıtlaSil
  20. Teşekkürler işime yaradı

    YanıtlaSil
  21. hocam bende çalışmadı mesajı göndermiyor bi çözümü varmı

    YanıtlaSil
  22. uzun zamandır bilgi birikiminiz ve paylaşımlarınızdan faydalanmaya çalışıyorum. Bu iletişim formunu ekledim bloğuma ve gayet güzel durdu. Fakat ad soyad ya da mail adresi girip mesaj yazmaya çalıştığım zaman hiç bir sonuç alamadım. Yazı yazma imkanım yok. Yani çalışmıyor. Sebebi ne olabilir acaba?

    YanıtlaSil
    Yanıtlar
    1. Bloggerin kendi iletişim formu çalışmıyor. Sorun bundan kaynaklı sanırım. Sizin paylaştığınız iletişim formu çok hoşuma gitmişti. Sanıyorum onda bir sorun yok. Yerleşimden iletişim formunu kaldırıp terar ekledim. Ekleme esnasında hiç bir bilgi girişi istemeden sadece kaydet seçeneği çıkıyor. Kaydettikten sonra ayarları kaydedip sayfayı kontrol ettiğimde iletişim kutusu var, fakat bilgi girişi yapılamıyor. Bana ne önerebilirsin?

      Sil
  23. sagolun hocam yaptık sonunda çalışıyor sorunsuz

    YanıtlaSil
  24. Saol Hacam Çok Güzel Oldu.Sorunsuz Çalışıyor

    YanıtlaSil
  25. Selam kendi mailime nasıl yönlendireceğim

    YanıtlaSil
  26. bu formdan gönderilen mesajı nereden göreceğiz ben ekledim oldu ama biri bi şey yazınca nereden okuyacagız

    YanıtlaSil
    Yanıtlar
    1. Blog hesabını açtığın e-posta adresine gelecektir mesajlar.

      Sil
  27. arkadaşlar ben ekledim ana ekranda çıkıyor bunda sorun yok ama göndere bastığımda gönder tuşu aktif olamıyor gitmiyor ne yaptıysam olmadı ne yapabilirim

    YanıtlaSil
  28. normal sayfa iletişimim çalışıyor email ama bunu bir türlü yapamadım kodu kopyalayıp yapıştırdım

    YanıtlaSil

Blogger tarafından desteklenmektedir.