Blogger : İletişim Formu Nasıl Oluşturulur?

Merhaba blog yazarları!

Bu yazımda blogunuzun herhangi bir alanına nasıl iletişim formu yerleştirebileceğinizi anlatacağım.

1. Dinamik Sayfalara İletişim Formu Yerleştirmek

1. blogger.com adresini ziyaret edin ve hesabınıza giriş yapın. Açılan sayfada iletişim formu oluşturmak istediğiniz sitenin başlığına tıklayın. Sağ kısımdaki sekmeden Yerleşim seçeneğine tıklayın.

2. Sağ köşede ya da sayfanın alt kısmında bulunan Gadget Ekle seçeneklerinden birine tıklayınız.

3. Açılan Gadget Ekle sayfasından Diğer Gadgetler seçeneğine tıklayın ve İletişim Formu gadget'ının yanında bulunan + simgesine tıklayın ve kaydet tuşuna basın.

 Oluşturduğunuz iletişim formu internet sitenizin bütün sayfalarında görünecektir. Bu formun tasarımını özelleştirmek veya bu formu oluşturduğunuz statik sayfalara (hakkında, iletişim, reklam sayfaları gibi) yerleştirmek istiyorsanız sizi yazının devamına alalım.

2. Statik Sayfalara İletişim Formu Yerleştirmek ve Formun Tasarımını Değiştirmek 

1. Dinamik sayfalara iletişim formu yerleştirmek için uyguladığınız adımları biraz önce uygulamadıysanız şimdi uygulayın. Sonrasında sağ sekmede bulunan Şablon'a, açılan sayfada ise HTML'yi Düzenle seçeneğine tıklayın.

2. Açılan editörde boş bir alana tıklayın ve CTRL+F tuşlarına aynı anda basarak arama kutusunu aktifleştirin.









3. Arama bölümünde şu kodu aratın :

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

4. Kodu bulduğunuzda; aşağı tarafta şöyle bir kod göreceksiniz.

<b:includable id='main'>

5. Bu koda çift tıklayın ve kodun tamamının açılmasını sağlayın. Kodun tamamı açıldığında aşağıdaki gibi bir kod dizilimi göreceksiniz:

<b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'> <data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/> <p/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/> <p/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span> <br/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <p/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form> </div> </div> <b:include name='quickedit'/> </b:includable>

6. Başlık ve bitiş kodları dışında her şeyi silin. Yani; şu iki kod arasında bulunan bütün metni silin :

<b:includable id='main'></b:includable>

7. Arama kutusunu tekrar aktifleştirerek ]]></b:skin> kodunu aratın ve kodun öncesine (yani üst kısmına) hemen aşağıdaki kodu yapıştırın:

/*OZEL ILETISIM FORMU BY TASARIMSOZLUGU */ .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; }

8. Kaydet tuşuna basın ve editörden çıkın. Şimdi, önceden oluşturduğunuz (oluşturmadıysanız şimdi oluşturabilirsiniz) statik sayfaya gidin ve HTML seçeneğini seçin.

9. HTML kısmına aşağıdaki kodu yazın ve kaydedin.

<div class="widget ContactForm" id="ContactForm1"> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <div class="fm_name"> Adınız: <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">

İletişim formu Türkçe içerik üreten blog yazarları için yerelleştirilmiştir. İngilizce olarak kullanmak isterseniz HTML'kodunu yapıştırdığınız sayfada arama kutusunu etkinleştirip "E-Posta, Adınız, Mesajınız" kelimelerini aratarak, bu kelimeleri dilediğiniz kelimelerle değiştirebilirsiniz.

Umarım bu içerik faydalı olmuştur. Beni desteklemek ve daha fazla içeriğin üretilmesini sağlamak için bu içeriği paylaşırsanız mutlu olurum.