Blogger'da Özel İletişim Formu Hazırlamak

Blogger kendi bünyesinde iletişim formu ekledi ve bu iletişim formunu sitenizin yan tarafından yani sidebar'da kullanabiliyorsunuz. Ancak bazı durumlarda sayfa olarak kullanmak isteyenler olabilir benim gibi.

Bu işlemde bir tane sayfa açıp orada iletişim formu çalıştıracağız ama öncesinde orjinal Blogger İletişim Formunu sidebara yerleştirip kodlarını inceleyelim. Daha sonrasında o kodları alıp sayfada kullanacağız.Yönetim panelinden Yerleşim > Sidebar Gadget Ekle > Diğer Gadgetler > İletişim Formu + işaretine basarak sidebara iletişim formunu ekliyoruz.

Daha sonra Düzenlemeyi Kaydet diyerek aşağıdaki resimdeki gibi, Tema > HTML Düzenleme > bölümüne gelip CTRL+F diyerek kodların arasında ContactForm ifadesini aratıyor ve buluyoruz.

Yukarıdaki resimde 3 ve 4 numarada gösterdiğim siyah üçgenlere tıklatıldığında kodların tamamı görünecektir. ve aşağıdaki gibi kırmızı alanla bellirttiğim kodları sileceğiz.

Kısaca belirtmek gerekirse <b:includable id='main'></b:includable> kodları arasındaki herşeyi siliyoruz.

Yukarıdaki işlemleri yaptıktan sonra, ]]></b:skin> kodunu CTRL +F diyerek arama kutusunda buluyoruz. ]]></b:skin> kodunun hemen üstüne aşağıdaki kodları yapıştırıyoruz.

/*CUSTOM CONTACT FORM BY ERGEZER.COM */
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height:30px;
font-size:16px;
}
.contact-form-button-submit:hover{
background: #ffffff;
color: #000000;
border: 1px solid #FAFAFA;
}

Temayı kaydet dedikten sonra SAYFALAR > Yeni Sayfa diyerek yeni bir sayfa oluşturuyoruz. Oluşturacağımız Yeni Sayfanın HTML modundayken aşağıdaki kodu yapıştırıyoruz.

<div class="widget ContactForm" id="ContactForm1">
<br />
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div class="fm_name">
Ad Soyad:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div>
<div class="fm_email">
E-posta *:
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div>
<div style="clear: both;">
</div>
<div class="fm_message">
Mesajınız *:
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<br />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>

Yukarıda anlattığım Blogger Özel İletişim Formu konusunu tam olarak yaptıysanız kendi sitemde kullandığım şuradaki gibi bir sonuç almanız gerekiyor. Code dosyalarını txt formatında indirmek için burayı tıklayabilirsiniz.