Blogger için İletişim Formu Eklentisi

Blogger iletişim formu eklentisini kullanmak için 2 farklı yol var. Bu yollardan ilki bir gadget olarak sitenizin sağ tarafına veya en altına eklemek. Bu şekilde kullanımlarda siteye girenler iletişim formunu tüm sayfalarda görebilirler. Bu kolay olay yöntemdir. Diğer yol ise bu eklentiyi bir statik sayfaya eklemek. Canlı bir örneğini görmek isterseniz benim İletişim sayfama bakabilirsiniz. Her iki yöntemin detaylarına bakalım.

İletişim Formunu Gadget Olarak Eklemek

• Blogger.com sitesini açın.
• İletişim formunu eklemek istediğiniz sitenizi seçin.
• Sol menüden Yerleşim'i seçin ve Gadget Ekle'yin.
• Diğer Gadgetler sekmesine geçip İletişim Formu'na tıklayın ve ardından Kaydet diyerek işlemi tamamlayın

Sitenize İletişim Formu'nu gadget olarak eklemiş oldunuz. Diğer yöntemde statik sayfaya iletişim formu eklemeye de göz atabilirsiniz. Bu sayede blog sitelerinize özel iletişim sayfaları oluşturabilirsiniz.

Blogger İletişim Sayfası Oluşturma

Blogger.com sitesini açın.

Sol menüden Sayfalar'ı seçin ve Yeni Sayfa oluşturun.

HTML bölümüne aşağıdaki kodları kendinize göre düzenledikten sonra kopyalayıp yapıştırın.

Alttaki kodun en üstündeki "420692696674173166" rakamlarını kendi blog numaranızla değiştirin.

<script>

var blogId = '420692696674173166';//this number should be mandatorily edited.

//The below message 5 Strings can also be edited

var contactFormMessageSendingMsg ='Gönderiliyor...';

var contactFormMessageSentMsg = 'Mesajınız gönderildi.';

var contactFormMessageNotSentMsg = 'Mesaj gönderilemedi. Lütfen tekrar deneyin.';

var contactFormEmptyMessageMsg ='Mesaj bölümü boş bırakılamaz.';

var contactFormInvalidEmailMsg = 'Geçerli bir e-posta adresi gerekli.'


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 <em>(zorunlu)</em></div>

<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

<div>

Mesaj <em>(zorunlu)</em></div>

<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></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>

<style>

.contact-form-widget{margin:0;width:500px;max-width:100%;padding:5px;color:#000}

.fm_name,.fm_email{float:left;padding:5px;width:50%}

.fm_message{padding:5px}

.contact-form-name,.contact-form-email{width:100%;max-width:100%;margin-bottom:10px;height:30px;padding:5px;font-size:13px}

.contact-form-email-message{width:100%;max-width:100%;height:100px;margin-bottom:10px;padding:10px;font-size:13px}

.contact-form-button-submit{height:32px;padding:4px 55px;margin-bottom:10px;font-size:13px}

input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message {

min-width: 190px;

max-width: 360px;

width: 100%;

margin-bottom: 15px;

}

.contact-form-email-message, .contact-form-email-message:hover{

padding: 5px;

min-width: 290px;

max-width: 460px;

width: 100%;

margin-bottom: 15px

</style>

Kodları HTML kısmına ekledikten sonra Yayınla diyerek iletişim sayfasını tamamlayabilirsiniz.