Siteye iletişim formu eklemekiçin esasında birçok hazır kod bulmak mümkündür. Olayın temeline inilecek olursa az bir html bilgisiyle siz de kendi iletişim formunuzu oluşturabilir ve hatta az bir CSS bilgisiyle de bu formu daha güzel bir görünüme kavuşturabilirsiniz.
Blogger siteye iletişim formu ekleme işlemi ise normal bir web sitesinden pek farklı değildir. E biz ne HTML ne de CSS bilmiyoruz diyorsanız da üzülmeyin. Çünkü internette bununla ilgili birçok kod bulmanız mümkün.
Bu yazımda ben de bir Blogger bloga iletişim formu eklemek için hazır bir kod kullanacağım.
Ancak kodu eklemeden önce yapılması gereken birkaç ufak işlem var. Bunları hallettikten sonra aslında siteye iletişim formu eklemenin ne kadar kolay olduğunu sizler de göreceksiniz.
İsterseniz hemen iletişim formu ekleme işlemine başlayalım.
lk adım olarak Blogger panelimize girerek yerleşime tıklayalım. Ardından Gadget ekle diyelim ve açılan ekrandan en altlarda yer alan “iletişim Formu” seçeneğini tıklayarak ekleyelim.
Ardından ise yine Blogger panelinden Tema > HTML’yi düzenleyi tıklayalım. Kod ekranı açıldığında Ctrl+F’e basıp açılan arama kutusuna ]]></b:skin> yapıştıralım ve bulalım. Bulduktan sonra ise hemen üstüne aşağıdaki kodları yapıştıralım.
div#ContactForm1 {
display: none !important;
}
Bu kodu yapıştırdıktan sonra başka bir işlem yapmamıza gerek yok. Temayı kaydet butonuna basarak çıkalım.
Bu kodu eklememizdeki amaç, belki display: none kodundan da fark etmişsinizdir, daha önce eklemiş olduğumuz iletişim formunun görünmesini engellemektir. Çünkü biz birazdan yeni bir kod ekleyerek, Ad/E-Posta/Mesaj bölümleri olan yeni bir iletişim formu elde edeceğiz. Bu nedenle blogger’ın kendisinin kullandığı iletişim formu açık olacak ancak görünmeyecek.
Şimdi geldik son aşamaya… Öncelikle iletişim formunun kodunu eklemek için yeni bir sayfa oluşturalım. Bu sayfada resimdeki gibi HTML bölümünü tıklayalım. Ardından ise aşağıdaki kodları buraya yapıştıralım.
<form name="contact-form">
<div>
Ad </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<br />
<div>
E-posta <i>(gerekli)</i></div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
<div>
İleti: <i>(gerekli)</i></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<br />
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<br />
<div style="max-width: 450px; text-align: center; width: 100%;">
<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>
Bu kodları yapıştırdıktan ben daha önce Türkçe olması gereken bölümleri düzelttiğim için herhangi bir değişiklik yapmanıza gerek bulunmamaktadır.
Blogdaki görünümü ise yukarıdaki gibidir. Görüldüğü gibi görünümü oldukça hoş bir iletişim formu aslında.
Bu kod sizin feed adresinizi kullanacağı için feed adresinizde hangi mail adresi yazılıysa, bu formdan gönderilen mailler o mail adresine gidecektir.
Blogger siteye iletişim formu ekleme konusu sizlerin de gördüğü gibi aslında hiçte zor değil. Bu işlemi yaparken önemli olan hatasız kodlar bulabilmek. Bunun dışında zor bir işlem değil.
Umarım işinize yarar. Eğer herhangi bir problem yaşarsanız yorum bölümünde belirtmeyi unutmayın.
Herkese saygılar, sevgiler…
Etiket:
Blogger
