Blogger İletişim Formunu Sabit Sayfaya Eklemek

Kendinize ait bir iletişim sayfanızın olmasını istiyorsanız aşağıdaki adımları izleyerek kolayca yapabilirsiniz.

1. Adım
İlk olarak blogger'ın iletişim formunu blogunuzun sidebar, footer vs kısmına eklemelisiniz. Bunu Yerleşim > Gadget Ekle > Diğer Gadgetlar > İletişim Formu yolunu takip ederek yapabilirsiniz.

2. Adım
İletişim formunun blogumuzun sidebar, footer vs gibi kısımlarında görünmemesi için Blogger > Tema > HTML'yi Düzenle bölümüne girip ister aşağıdaki kodu CTRL + F komutuyla bulabilirsiniz. İsterseniz de Widget’a Atla > ContactForm1 yolunu takip ederek ulaşabilirsiniz.

[<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'>
    <b:includable id='main'>
   <b:if cond='data:title != &quot;&quot;'>
    <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 + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/></b:includable>
  </b:widget>]

3. Adım
Yukarıda turuncu renkle belirttiğim kısımları siliyoruz.

4. Adım
Blogger > Sayfalar > Yeni Sayfa yolunu takip ederek yeni sayfa oluşturalım. Sayfayı ilk oluştururken sayfa başlığında Türkçe karakter kullanmamaya özen gösterelim. Sonradan değiştirebilirsiniz. İletişim yerine iletisim yazalım. Daha sonra sayfa başlığını isterseniz kaldırabilirsiniz isterseniz de değiştirebilirsiniz. Sayfanızın adresi https://blogadresi.blogspot.com.tr/p/iletisim.html gibi olsun. Oluşturduğunuz sayfada HTML bölümüne gelip aşağıdaki kodları yapıştırın.

[<form name="contact-form">
<span style="color: #666666; font-weight: 700;"><i class="fa fa-user"></i> İsim </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<span style="color: #666666; font-weight: 700;"><i class="fa fa-envelope"></i> Eposta Adresi <span style="color: #f56954; font-size: x-small; font-weight: bold;">gerekli</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<span style="color: #666666; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Mesaj <span style="color: #f56954; font-size: x-small; font-weight: bold;">gerekli</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<br />
<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>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{min-height:150px;min-width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(255,61,0,1);box-shadow:0 0 5px rgba(255,61,0,0.7);}
#ContactForm1_contact-form-submit {width:100%;float:left;background:#fff;color:#444;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #ff3d00 0%, #ff3d00 50%, transparent 50%, transparent 100%);background-size:210%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#ff3d00;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
</style>]

Sonuç