Blogger İletişim Formu Ekleme

Web sitesinde olması gereken iletişim formunun nasıl oluşturulup eklendiğini göstereceğiz.Google'nin de önem verdiği iletişim bölümü tüm web sitelerinin olmazsa olmazlarındandır.İletişim formu aracılığıyla sitenizdeki kullanıcılar sizinle iletişime geçebilme imkanı sağlamaktadır.


İletişim bölümü olmayan siteler güvensiz olarak değerlendirilmektedir.Onun için iletişim formu Seo açısından artı 1 puan demektir.



1.Aşama


İlk önce Blogger adresinizden Yerleşim-Gadget Ekle-Diğer Gadgetler deyip İletişim Formunu Blogger'a ekliyoruz.

2.Aşama

Şablonu düzenle kısmından kısa yoldan Widget'a atla bölümünden ContactForm1 kısmına tıklıyoruz.Eğer kodlar kapalıysa ► ikonu olan satıra tıklayıp kodları genişletiyoruz.

Daha sonra



<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'>
 <b:includable id='main'>
kısmından sonra başlayarak

</b:includable>  yan taraftaki kodlara kadar aradaki kodları siliyoruz.Yan taraftaki kodlar kalacak.
 </b:widget>



Aradaki kodları sildikten sonra şablonu kaydet diyoruz.Bu şekilde iletişim formu ana sayfadan çıkarıp ayrı bir iletişim formu olacak şeklinde düzenleyeceğiz.

3.Aşama

Blogger Sayfalar bölümünden yeni bir sayfa oluştur deyip sayfa ismine iletişim yazarak sol üst köşede bulunan HTML olan kısmına aşağıdaki istediğiniz farklı iletişim formu kodlarından birini ekleyebilirsiniz.Ekledikten sonra yayınla diyoruz.

İletişim Formu Çeşitleri

Standart İletişim Formu

<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>İsim<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-Posta *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Mesaj *</p>
        <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'/>
        <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>
      </form>
    </div>
  </div>
</div>

İletişim Formu 1

<style type='text/css'>
#ContactForm1{display:none;}
#contact_wrap{width:321px;height:360px;border-radius:1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#ccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f2f2f2',endColorstr='#cccccc');background-image:linear-gradient(top,#f2f2f20%,#e6e6e650%,#cccccc100%);box-shadow:1px 1px 5px #ccc;margin:auto;padding:25px;}
#contact_wrap h3{color:#e8f3f9;font-family:"Microsoft Sans Serif",Georgia,arial;font-size:20px;font-weight:400;text-align:center;text-shadow:2px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;position:relative;margin:0 -36px 20px;padding:12px;}
#contact_wrap h3:before{content:' ';position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px;}
#contact_wrap h3:after{content:' ';position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px;}
#ContactForm1_contact-form-name{width:270px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWOLuajrNi0Jmf_DAdzvgD4oH4gG4pAodftdQ3QDblVl5lTe7njwAtn4MlVCT7uP7aq_7VkqbxLjzPR7unbELTR6arIRlEmHmLF4gRu5bFEPqqg7shS_pVkE7PnXyeMw3pbrXfoN1lmU/s1600/user.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-email{width:270px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqC4PGKaFS1mD6c-AMAROlnrCzJOxZWqK7xTU8qCJRH_aSkrtjtuVU8k088HmQasOuL9Q_mg_VkDgDP3W9p8Ie28JyR_8wA1WvFry1F_uzlppPhwLVrsVGxx2R9hakkAEvrplgVE153dY/s1600/msg2.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-email-message{width:270px;height:150px;font-family:Arial, sans-serif;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_N4OFvkjYUukGAD9-fabHE_4ifZJ0dmIPAAjlYjKGD-20cnaCQg6bxgRSFMp2xwbx6-C4MhjVm5gfRAYbIG8iqDAuppSz_PvrUubroMZpwQRrskX2lOq3wb5BwZiaN2E403vzLT8tO1U/s1600/pen.png)no-repeat 10px 10px;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-submit{width:95px;height:30px;float:right;color:#FFF;cursor:pointer;border-radius:4px;text-shadow:1px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;border:1px solid #194f6d;margin:10px 0;padding:0;}
#ContactForm1_contact-form-submit:hover{background:#4c9bc9;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:320px;margin-top:35px;}
</style>
<div id="contact_wrap">
<h3>İletişim</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="İsim" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="E-Posta" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mesaj" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

İletişim Formu 2

<style type='text/css'>
.contact-form-widget{width:500px;max-width:100%;background:#E6E7E8;color:#000;border:1px solid #656E75;box-shadow:0 1px 4px rgba(0,0,0,0.25);border-radius:10px;margin:0 auto;padding:10px;}
.contact-form-name,.contact-form-email,.contact-form-email-message{width:100%;max-width:100%;margin-bottom:10px;}
.contact-form-button-submit{background:#E6E7E8;color:#000;width:20%;max-width:20%;margin:0;border:1px solid #656E75;}
.contact-form-button-submit:hover{background:#679EC9;color:#fff;border:1px solid #FAFAFA;}
</style>
<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>İsim<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-Posta *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Mesaj *</p>
<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'/>
<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>
</form>
</div>
</div>
</div>

İletişim Formu 3

<style type='text/css'>
.contact-form-widget{width:75%;max-width:100%;background:#5F8CB0;color:#fff;border:1px solid #5F8CB0;border-radius:1px;margin:0 auto;padding:10px;}
.contact-form-name,.contact-form-email,.contact-form-email-message{width:100%;max-width:100%;margin-bottom:10px;}
.contact-form-button-submit{height:40px;color:#5F8CB0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMf8KSQrP9u1dSNZs0HhfdOk8v3frGmcWqFltnldtNCu5EQrWJiKH-Iulb4ObNx0PNdpwb6AySjMP62RvOlhWWerhrGsRcNp6JMs9sWTkU-95TLJGUDvihMArhyphenhypheniS0F4795OMOCRGIpgI2/s1600/send_message_40.png) #fff 5px center no-repeat;padding-left:44px;}
.contact-form-button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMf8KSQrP9u1dSNZs0HhfdOk8v3frGmcWqFltnldtNCu5EQrWJiKH-Iulb4ObNx0PNdpwb6AySjMP62RvOlhWWerhrGsRcNp6JMs9sWTkU-95TLJGUDvihMArhyphenhypheniS0F4795OMOCRGIpgI2/s1600/send_message_40.png) #357AE8 5px center no-repeat;border:1px solid #404040;color:#FFF;border-color:#2F5BB7;}
</style>
<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>İsim<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-Posta *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Mesaj *</p>
<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'/>
<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>
</form>
</div>
</div>
</div>

İletişim Formunu Siteye Ekleme

Oluşturduğumuz İletişim Formunu  Yerleşim-Gadget Ekle-Sayfalar-Sayfalar Listesini Yapılandır kısmında bulunan iletişim sayfasını da ekleyip sitenizin üst bölümünde gösterebilirsiniz.

Önemli Not:

''İletişim formundan gönderilen mesajlar gelmiyor'' şikayetleri üzerine bir çözüm bulduk.Eğer iletişim formu üzerinden gönderilen mesajlar size gelmiyorsa Ayarlar Blog yazarları kısmından başka bir e posta adresinizi yönetici olarak ekleyin.Bu sayede iletişim formuna gönderilen mesajlar eklediğiniz ikinci e mail adresinize gelecektir.