15 Haziran 2016 Çarşamba

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

25 yorum
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…

25 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

Picardes

LİNKLER