İletişim sayfası, yazarların ziyaretçilerle haberleşmesini sağlar
ve her sitede bulunması gereken bir önemli bir ögedir. Çünkü
ziyaretçiler yöneticilerin çoğunlukla girmedikleri sayfalara girerler ve
fark edilmeyen detayları fark ederler...
Büyük çaplı siteler yaptıkları
yeniliklerin hemen ardından sayfalarının herhangi bir köşesine "Geri Bildirim" butonu ekler. Bunun amacı eksikleri olabildiğince hızlı şekilde gidermek ve kullanıcı odaklı çalışıldığını göstermektir.
Blogger sayfalara eklenecek basit bir form sayesinde insanlar
istek, öneri ve şikayetlerini istedikleri gibi iletebilirler. Bu
iletişimi 2013 yılı Mayıs ayındaki güncellemeden önce Jotform, Google dökümanlar, contactme gibi araçlarla sağlıyorduk.
Neyse ki Google sesimizi
duydu ve bizi bu zahmetlerden kurtararak iletişim formu gadgetini
kullanıma sundu. Ancak buna rağmen hala eski yöntemleri kullananlar var.
Maalesef diyorum çünkü böyle bir hizmet varken siteye ayrıca kod yükü
bindirmek bana pek mantıklı gelmiyor.
Aşağıda blogger'in resmi iletişim formunu sabit sayfaya nasıl
ekleyebileceğinizi resimli şekilde anlattım. İnşallah işinize yarar...
Formun yan menüye eklenmesi
Kodları direk sayfaya eklediğiniz takdirde eklenti çalışmadığından dolayı ufak bir bağlantı ayarı yapmamız gerek.
Bunun için; Yerleşim > Gadget Ekle > Diğer Gadget'lar kısmına gelin ve İletişim Formu'nu seçip kaydet deyip çıkın.
Sayfaya eklenecek kodların alınması :
Gadgetimizi ekledikten sonra; Şablon > Html'yi düzenle kısmına giderek Ctrl+F ile aşağıdaki kodları bulun.
İletişim Formu veya ContactForm
şeklinde aramanız işinizi kolaylaştıracaktır. Bulduktan sonra siyah ok
ile gösterdiğim ... veya ▶ işaretine tıklayarak kodları açın.
Kodlar arasından turuncu renk ile işaretlediğim kısımları silin.
<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'>
<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>
</b:widget>
Sonuç olarak yalnızca aşağıdaki kodlar kalacak. Temanızı kaydedin.
Kodların sabit sayfaya eklenmesi :
.
Blogunuz > Sayfalar > Yeni Sayfa diyerek iletişim sayfasını oluşturun.
Oluşturduğunuz sayfadaki HTML kısmına aşağıdaki kodları kopyalayıp yapıştırın.
<div class="form">
<form name="contact-form">
İsim
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-Posta
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Mesaj
<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" />
<div style="max-width: 222px; 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>
</div>
<style>
.contact-form-widget{width:350px;max-width:300%;padding:10px}
.contact-form-name,.contact-form-email,.contact-form-email-message{max-width:350px}
.contact-form-button-submit{width:100px;height:28px}
#ContactForm1_contact-form-email-message{width:350px;border-radius:4px;margin-bottom:10px;padding:15px 10px 15px 5px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:250px;height:30px;border-radius:4px;margin-bottom:10px;padding-left:5px}
.comments{display:none}
</style> Notlar :
1) Yeni sayfa oluştururken sağ menüde Seçenekler kısmını göreceksiniz.
Eğer iletişim sayfanıza yorum gelmesini istiyorsanız okuyucu yorumlarına
izin ver'i seçebilirsiniz.
Bu durumda yapmanız
gereken stil kodları arasında turuncu renk işaretlediğim .comments{display:none} kodunu kaldırmaktır.
2) Bu gadget aracılığıyla atılan mesajlar sitenin sadece yöneticilerine ulaşır, yazarlara gitmez.
3) Tarayıcı linkinizin daha güzel görünmesi için sayfayı ilk
oluşturduğunuzda başlığı Türkçe karakter kullanmadan ve ayırarak yani
iletisim, bize-ulasin şeklinde yazıp yayınlayın. Daha sonra dönerek
düzeltebilirsiniz.
Tüm işlem bu kadardı arkadaşlar. Takıldığınız bir yer olursa bizzat yardımcı olabilirim.
