Blogger Static İletişim Sayfası Formu

Blogger Static İletişim Sayfası Formu

Bloggerda yerleşik iletişim sayfasını oluşturmak için Bloggerda sunulan İletişim Formu Widgetin den  yararlanacağız. İletişim Formu widgetini Css Style kodlarını kullanarak kendi sayfamıza göre şekillendirebiliriz. Static iletişim sayfamızda İletişim formunu kullana bilmemiz için bloggerin yerleşik script kodunu kullanmamız gerekir. İletişim Formu kodlarını Css ve Html olarak iki gurupta vereceğim ve Script kodu da Html kodunun içinde olacak. Html kodunda dört yerde değiştirmeniz gereken blogID numarasını ve blog adresini göstermek için metin arka planını kırmızı, değiştirmeniz gereken yeri yeşil olacak bir şekilde göstereceğim. İletişim Formu kodlarında tek bir hata yapmanız durumun da bile formun çalışmayacağını unutmayın ve gerekli gördüğünüz yorumları da göndermeyi ihmal etmeyin.


BlogID Numaranız Blogger Panelinde Url adres çubuğunda bulunan ( https://www.blogger.com/blogger.g?blogID=0000000000000000000#allpages ) yeşil arka plandaki 19 karakter olan sayı blogID numaranızdır.

Blogger site adresiniz, sayfanızı normal olarak görüntülediğinizde Url adres çubuğunda bulunan ( https://bilgisayartechnologykoddeneme.blogspot.com/ ) yeşil arka plandaki adres Blog adresinizdir.

Not: Eğer iletişim formunu çalıştırmayı başaramazsanız sayfa sonun daki iletişim formundan bana blogID numaranızı ve blog Url adresinizi göndermeniz halinde size Ücretli  bir şekilde yardım edebilirim.

Css Uygulama Kodu

 #contact-form{
  background-color:#272727;
  border:5px solid #0068FF;
  display:block;
  text-align:center;
 }
 .baslik{
  background-color:#0068FF;
  color:white;
  width:100%;
  height:auto;
  font-size:24px;
  font-weight:bold;
  text-align:center;
 }

 .isim1{
  background-color:#0068FF;
  height:20px;
  color:white;
  font-size:18px;
  font-weight:bold;
  text-align:left;
  margin-top:25px;
  padding:0px;
 }

 .isim{
  background-color:#0068FF;
  height:20px;
  color:white;
  font-size:18px;
  font-weight:bold;
  text-align:left;
  margin-top:10px;
  padding:0px;
 }


@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

 .validate{
  border-top:5px solid #0068FF;
  border-bottom:5px solid #0068FF;
  border-left-width:0px;
  border-right-width:0px;
  width:100%;
  height:38px;
  font-size:14px;
  font-family: 'Open Sans', sans-serif;
  font-weight:bold;
  margin-bottom:15px; 
 }

 #ContactForm1_contact-form-email-message{
  height:100px;
 }

 #ContactForm1_contact-form-submit {
  display: inline;
  float:none;
  width: 90%;
  height:35px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  text-align:center;
  text-decoration: none;
  outline: none;
  color: #ffffff;
  background-color: #0068FF;
  border:5px solid #ffffff;
  border-radius: 10px;
  margin-top:10px;
  margin-bottom:20pxpx;
 }

 #ContactForm1_contact-form-submit:hover {
  background-color: #0068FF; 
  color:#fff; box-shadow: 0 5px #fff;
 }

 #ContactForm1_contact-form-submit:active {
  background-color: #0068FF;
  box-shadow: 0 5px #fff;
  color: #fff;
  transform: translateY(4px);
 }
  
 #ContactForm1_contact-form-submit {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
 }

 #ContactForm1_contact-form-error-message{
  background-color:#bd0012;
  color:white;
  height:auto;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  margin-top:10px;
  border:2px solid #0068FF;
  padding:0px;
 }

 #ContactForm1_contact-form-success-message{
  background-color:#059610;
  color:white;
  height:auto;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  margin-top:10px;
  margin-bottom:20px;
  border:2px solid #0068FF;
  padding:0px;
 }

 .contact-form-cross{
  background-color:white;
  float:right;
  color:red;
  width:19px;
  height:19px;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  margin-right:3px;
  border:1px solid black;
 }

Html Uygulama Kodu

<div class="baslik">
İletişim Formu</div>
<form id="contact-form" name="contact-form">
<div class="datainput">
<div class="isim1">
İsim</div>
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" placeholder="Ad Soyad"/>
 </div>
<div class="isim">
Mail Adresi</div>
<div class="datainput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" placeholder="mail@adresiniz.com"/> 
 </div>
<div class="isim">
Mesaj</div>
<div class="datainput">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"placeholder="BlogID ve Site Url Adresini unutmayın..."></textarea> 
 </div>
<input class="breset" id="ContactForm1_contact-form-submit" type="button" value="Gönder" /> 
 <br />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> 
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) {
 window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '0000000000000000000';BLOG_attachCsiOnload(''); }
 _WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d0000000000000000000','//bilgisayartechnologykoddeneme.blogspot.com/ ','0000000000000000000');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Mesajınız gönderiliyor...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Mesajınız gönderildi.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Mesaj gönderilemedi. Lütfen daha sonra tekrar deneyiniz.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">Geçerli bir e-posta adresi girmelisiniz.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Mesaj alanı boş bırakılamaz.</span>', 'title': 'Contact Form', 'blogId': '0000000000000000000', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email',  'contactFormNameMsg': 'Name', 'contactFormNameMsg': 'Name', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Not: Eğer iletişim formunu çalıştırmayı başaramazsanız sayfa sonundaki iletişim formundan bana blogID numaranızı ve blog Url adresinizi gönderirseniz size Ücretli  bir şekilde yardım edebilirim.

İletişim Formu

İsim

Mail Adresi

Mesaj