24 Ocak 2015 Cumartesi

Blogger İletişim Formunu Sabit Sayfaya Ekleme
Uzun zamandır bloguma güzel bir blogger iletişim formu eklemek istiyordum. Blogger'ın ilk zamanlarda kendine ait bir iletişim formu olmaması nedeniyle, diğer bloglarım da hep Google Docs ile oluşturduğum iletişim forumlarını kullandım. Nihayet geçen sene blogger resmi iletişim formu eklentisini yayınlandı fakat eklenti sadece sidebar'da kullanılabiliyordu.

Blogger iletişim formu eklentisinin sadece kenar çubuğunda kullanmak blog'da görüntü kirliliğine sebep olabiliyor. Açık söylemek gerekirse blogumun her yerinde bir iletişim formu görmek istemiyorum. Bu nedenle bu konumuzda blogger iletişim formunu kullanarak iletişim sayfası oluşturmayı anlatacağım.

Neden İletişim Formu Kullanmalıyım ?
Blogger sayfanıza iletişim kutusu eklemek okuyucularınızın size ulaşmasını kolaylaştıracaktır. Size ulaşmak için konu altına mail adresilerini bırakıp sizin onlara ulaşmanızı beklemek yerine, gerekli bilgileri iletişim formuna doldurup Gönder butonuna basarak kolay bir şekilde size ulaşabilir. Tabi bu sadece blog okuyucuları için değil blogger yöneticileri içinde oldukça kullanışlı bir yöntemdir.

Blogger İletişim Sayfası Oluşturma

Aşağıda ki adımları izleyerek blogger iletişim formunu kullanarak iletişim sayfası oluşturabilirsiniz. Eğer demo görmek isterseniz, kullanmış olduğum iletişim sayfasını kontrol edebilirsiniz.

Adım 1: İlk olarak sidebar'da blogger resmi iletişim formu kullanıyorsanız Blogger Yönetici Paneli > Yerleşim sekmesinden formu kaldırın.

Adım 2: Şimdi blogunuzun benzersiz blogID numarasını bulun. Blogger Yönetici Panelin'de herhangi bir sayfada iken tarayıcınızın URL çubuğunda blogID'i bulabilirsiniz. Bu blogID yeni iletişim sayfası oluşturmak için gereklidir. BlogID girmediğiniz taktir de iletişim kutusu çalışmayacaktır. Aşağıda ki ekran görüntüsünde blogID'in nasıl bulunacağını öğrenebilirsiniz. Bu numarayı bulduktan sonra bir yere kayıt edin.

blogger iletişim formu eklentisi
Adım 3: Blogger Yönetici Paneli > Sayfalar'dan Yeni Sayfa oluşturun.
Adım 3: Yeni sayfa oluşturduktan sonra HTML mod'u seçin ve aşağıda ki kodu boş alana yapıştırın. Kırmızı ile gösterdiğim kodu Adım 2'de not ettiğiniz blogID ile değiştirin.
<script>
var blogId = '3325432071104196405';

var contactFormMessageSendingMsg ='Gönderiliyor...';
var contactFormMessageSentMsg = 'Mesajınız başarılı bir şekilde gönderildi.';
var contactFormMessageNotSentMsg = 'Mesaj gönderilemedi. Lütfen daha sonra tekrar deneyiniz..';
var contactFormEmptyMessageMsg ='Mesaj alanı boş olamaz.';
var contactFormInvalidEmailMsg = 'Lütfen geçerli e-mail adresi girin'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name='contact-form'>
<div>İsim : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>E-posta Adresiniz: <em>**</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>İletiniz <em>**</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='7'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gönder' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; 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>

Gerekli düzenlemeyi yapıp kodu yapıştırdıktan sonra Sayfa ayarları > Seçeneklere tıklayın. Okuyucu yorumları'nı engelleyin ve Oluşturma modunu Yazılan HTML'i yorumla olarak değiştirin. Aşağıda ki ekran görüntüsünde gerekli ayarları görebilirsiniz.
blogger iletişim formu eklentisi

Hepsi bu kadar arkadaşlar, gerekli ayarlamaları yaptıktan sonra iletişim sayfasını yayınlayabilirsiniz. İletişim sayfasını sitenizde yayınlamadan önce iletişim kutusunu test etmeyi unutmayın.

Bu yazıyı beğendiğiniz mi? Paylaşın!

25 yorum:

  1. saglam yazı olmuş tşkler

    YanıtlaSil
  2. Teşekkürler arkadaşım.

    YanıtlaSil
  3. selam.ilettişim formu ana sayfamda gözüküyor.bunu iletişim linkine nasıl bağlarım.yani sadece iletişim linkinde tıklandığında gözüksün.teşekkürler

    YanıtlaSil
    Yanıtlar
    1. Merhaba, yukarı da anlattıklarımı uygularsanız iletişim formunu sabit sayfaya ekleyebilirsiniz.

      Sil
  4. Peki bu atılan mailler hangi hesabımıza geliyor? Bloggere giriş yaptığım e postamı kontrol ettim mail yok (deneme amaçlı mail attığım halde)

    YanıtlaSil
    Yanıtlar
    1. Blogger'a giriş yaptığınız mail adresinize gelmesi gerekiyor. Eğer gelmiyorsa "blogİD" kodunu yanlış ya da eksik kopyalamış olabilirsiniz.

      Sil
  5. Hazır başka bişey varmı. Bi yardımcı olurmuzunuz

    YanıtlaSil
    Yanıtlar
    1. Jotform.com isimli siteden'de kendinize iletişim sayfası yapabilirsiniz.

      Sil
  6. Merhaba,
    Ben sizin dediklerinizi uyguladım fakat menüde çıkmıyor ne yapmam gerekli?

    YanıtlaSil
    Yanıtlar
    1. Galiba Anasayfadaki menüyü kast ettiniz, eğer öyleyse zaten çıkmaz siz kendiniz manüel eklemeniz lazım.

      Sil
  7. Merhaba
    Tüm adımları tek tek uyguladım. Kod numarasını iletişim sayfası HTML ye doğru olarak yerleştirdim. Ayarlar kısmında yayınlar ve yorumla ile e-posta kısmına blogun mail adresini girdim. Ve iletişim sayfasından farklı bir mail adresi ile kendime mesaj gönderdim. Gönderiliyor... ve mesaj gönderildi diyor.
    Gelelim sorunlara;
    1. İletişim kısmında, ad soyad ve mesaj yazarken, boşluk tuşunu dikkate almıyor ve herşeyi birleşik yazıyor.
    2. Hiç bir şekilde blogger gmail adresi/sosyal kısmına mail göndermiyor.
    Nerdeyse bir haftadır bu iki sorunu çözmek için uğraşıyorum.
    Yardımcı olacak arkadaşlara minnettar olurum. Teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Siz yanlış mail adresi seçmişsiniz o yüzden kankam (:

      Sil
  8. Sana tek kelimem teşekkürler !!! ilk defa yorum yazma ihtiyacı duyuyorum.

    YanıtlaSil
  9. Çok teşekkürler, inanılmaz işime yaradı. Hem basit anlatmışsınız hem de yöntem çok basit.

    YanıtlaSil
  10. Teşekküler En yararlı Makale http://www.muhammedakif.com/p/iletisim.html

    YanıtlaSil
  11. Acayip güzel oldu çok sağolun blogger temamla aynı görünüm oldu nasıl olduysa acaba :D

    YanıtlaSil
  12. pki üstadım mail yerine telefon numarası almak istiyorum

    YanıtlaSil
    Yanıtlar
    1. Blogger sadece mail adresi ile gönderiyor şimdilik.

      Sil
  13. zorunlu alan uyarısında çıkan X (çıkış) ikonunu değiştirmek istiyorum nasıl değiştireceğim yardımcı olurmusunuz?

    YanıtlaSil
    Yanıtlar
    1. Kodların olduğu bölüme gelerek CTRL+F tuşlarına basarak arama penceresini açın. Ve zorunlu alan uyarısı artık neyse oraya yazıp arayın. Bulduktan sonra değiştirebilirsiniz.

      Sil
  14. söylediklerinizi aynen uyguladım formu iletişim sayfasına sabitledim ancak gönder butonu çalışmıyor. farklı kullanıcılar ile defalarca denedim

    YanıtlaSil
  15. İlgili iletişim formu maalesef çalışmıyor.

    YanıtlaSil
  16. yararlı bilgiler için teşekkür ederim

    YanıtlaSil

Lütfen yalnızca yazı ile ilgili yorumlar yazın.Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın.