BLOGGER İLETİŞİM FORMUNU SABİT SAYFAYA EKLEME

Uzun zamandır bloguma güzel birblogger 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.

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.

İLETİŞİM FORMU KODU

<script>
var blogId = '1579251088135274134';

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.

• Tweet
• PAYLAŞ
• PAYLAŞ
• PAYLAŞ
• PAYLAŞ