Blogger'a iletişim formu ekleme

Sizlerde Blogger sitenize iletişim Formu Eklemek İster misiniz?

Merhaba arkadaşlar öncelikle sizlerden gelen mesajlara cevap vererek konular paylaşıyoruz.Bu konumuzda istek üzerine Blogger tabanlı bir siteye nasıl iletişim formu eklenir onu anlattık.Adım adım işlemleri yaparsanız sizlerde blogunuza rahatlıkla bir iletişim formu ekleyebilirsiniz.

Öncelikle Yerleşim kısmından herhangi bir yere iletişim formu gadgetini eklememiz gerekiyor.

Daha sonra Şablon>HTML Düzenle kısmından CTRL+F ile

ContactForm1 

yazan kod satırına geliyoruz.Bu kodun altında

<b:includable id='main'>

ile başlayan ve

</b:includable>

ile biten kodların arasında ki kodları kesiyoruz ve şablonu kaydediyoruz.

Daha sonra Blogger kontrol panelinden Sayfalar diyerek yeni bir sayfa oluşturuyoruz adını iletişim,bize ulaşın gibi bir şeyler yapabilirsiniz. Burada HTML yazan yere tıklayıp kestiğimiz kodları yapıştırıyoruz.

Gelen hatayı gidermek için

 <textarea class="contact-form-email-message" cols="25" expr:id="data:widget.instanceId + &quot;_contact-form-email-message&quot;" name="email-message" rows="5"/>

kodunu

<textarea class="contact-form-email-message" cols="25" expr:id="data:widget.instanceId + &quot;_contact-form-email-message&quot;" name="email-message" rows="5"></textarea>

bu hale getiriyoruz.
Son hali bu şekilde oldu

Yayınla dediğimiz de artık iletişim formunu eklemiş olduk.
Artık CSS ile düzenleme işlemimizi gerçekleştirebiliriz.
İnternetten bulduğumuz iletişim formlarına benzetmek için o formların div veya table kod yapısına bakıyoruz ve kendi formlarımızda ki inputları,textareayı silmeden stillerini kendi inputlarımıza uyguluyoruz.
Örneğin. kestiğimiz ilk kodlar ile

<b:if cond="data:title != &quot;&quot;">
    </b:if><br />
<h2 class="title">
<data:title></data:title></h2>
<br />
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<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="" />
        </data:contactformnamemsg><br />
<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="" />
        </data:contactformemailmsg><br />
<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"></textarea>
        </data:contactformmessagemsg><br />
<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" />
        <br />
<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" expr:id="data:widget.instanceId + &quot;_contact-form-error-message&quot;">
</div>
<div class="contact-form-success-message" expr:id="data:widget.instanceId + &quot;_contact-form-success-message&quot;">
</div>
</div>
<br />
<br /></form>
</div>
</div>
<br />
<br />

bizim sitemizin iletişim formu kodlarına bakarak yapabilirsiniz.

<br />
<div style="text-align: center;">
<a href="https://draft.blogger.com/p/sss.html" target="_blank">Sıkça Sorulan Soruları</a> okudunuz mu?</div>
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<style>
.twist_blogger_cntct_form_wrap {
  margin: 0 auto;
  max-width: 840px;
  padding: 0 10px;
  position: relative;
}
.twist_blogger_cntct_form_wrap:after, .twist_blogger_cntct_form_wrap:before {
  content: '';
  display: table;
  clear: both;
}
/*----Change Contact Form Background Color Here----*/
div#twist_blogger_cntct_form {
  padding: 20px 20px 10px 20px;
  background: #64ABD5;
  border-radius: 2px;
  margin: 20px auto 20px;
  color: #FFF;
  font-size: 16px;
  max-width: 260px;
}
input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
  padding: 5px;
  box-shadow: none!Important;
  min-width: 186px;
  max-width: 260px;
  width: 100%;
  border: 0 !important;
  line-height: 1em;
  min-height: 31px;
  background: #FCFCFC;
  margin-bottom: 15px;
}
/**** Submit button style ****/
.contact-form-button-submit {
  background: #64ABD5;
  font-size: 20px;
  letter-spacing: 2px;
  cursor: pointer;
  outline: none!important;
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,1);
  border-radius: 50px;
  min-width: 186px;
  max-width: 260px;
  width: 100%;
  text-transform: uppercase;
  height: 46px;
  margin-top: 10px!important;
  transition: all 300ms ease-;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
}
/**** Submit button on mouse hover ****/
.contact-form-button-submit:hover {
  border: 2px solid;
  color: #FFFFFF;
  background: #EF4800 !important;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}
/**** Error message and Success Message ****/
.contact-form-error-message-with-border .contact-form-success-message {
  background: #64ABD5;
  border: 1px solid #f0c36d;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  color: #666;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  line-height: 19px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
}
</style>
<br />
<div class="twist_blogger_cntct_form_wrap">
<div id="twist_blogger_cntct_form">
<form name="contact-form">
Adınız : <br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Adınız..." size="30" type="text" value="" /><br />
<br />
Email Adresiniz :*<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email adresiniz..." size="30" type="text" value="" /><br />
<br />
Mesajınız :*<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mesajınızı yazınız." rows="5"></textarea><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: 260px; 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>
<br /></div>
</div>
</div>

biraz form yapısı ile oynandığı zaman değişik şekillerde iletişim formları yapabilirsiniz. Yorumlarınızı ve sosyal medya paylaşımlarınızı eksik etmeyin.