Blogger İletişim Formu Sayfası Nasıl Yapılır?

Blogger'a basit bir şekilde iletişim sayfası nasıl yapıldığı hakkında bir bilgilendirme yazısı.


Bir bloga sahipseniz; görüşlerini, şikayetlerini, tebrik mesajlarını, sorularını yazarak size ulaşmak isteyen kişilerin olması büyük olasıdır. Bu sebeple bir adet "İletişim" adlı sayfa bulundurmak hem size hem de ziyaretçilere kolaylık sağlayacaktır. Tahminimce zaten yukarıda yazdıklarımı bilerek yazıma geldiniz. Öyleyse en basit şekliyle ve Material Design tasarımına sahip nasıl iletişim sayfası yapacağınıza geçelim. Hemen aşağıdan ise bu iletişim formunu görüntüleyebilirsiniz.

Nasıl Yapılır


  • Blogger panelinden "Sayfalar" seçeneğine tıklayın ve "Yeni Sayfa" seçeneğine tıklayarak yeni bir sayfa oluşturun.
  • Sayfanın "HTML" kısmına tıklayın ve aşağıdaki kodları kopyalayıp yapıştırın.
  • Son olarak kod içerisinde işaretlediğim yerleri kendi bilgileriniz ile değiştirin.
<form name="contact-form"><div class="datainput"><input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div><div class="datainput"><input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div><div class="datainput"><textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="highlight"></span> <span class="bar"></span> <label>Message</label> </div><input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <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'] = '3247702708061337910';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3247702708061337910','//semihkececioglu.blogspot.com/','3247702708061337910');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '3247702708061337910', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script> <style scoped="scoped">
.datainput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.datainput input,.datainput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.datainput input:focus ~ label,.datainput input:valid ~ label,.datainput textarea:focus ~ label,.datainput textarea:valid ~ label{top:-20px;font-size:14px;color:#5264AE}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.datainput input:focus ~ .bar:before,.datainput input:focus ~ .bar:after,.datainput textarea:focus ~ .bar:before,.datainput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.datainput input:focus ~ .highlight,.datainput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.datainput input:focus ~ label,.datainput input:valid ~ label,.datainput textarea:focus ~ label,.datainput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#2196F3;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style> <div class='clear'></div>
<div style='clear:both;'></div>

Düzenlemeniz Gereken Yerler


Yukarıdaki kodların içerisinde su yeşilimsi renk ile işaretlediğim, yani 3247702708061337910 yerine kendi blogID numaranızı yazacaksınız. blogID numaranızı blog panelinizde iken adres çubuğundan öğrenebilirsiniz ve http://semihkececioglu.blogspot.com yazan yeri ise kendi blog adresiniz ile değiştirmelisiniz.

Yorumlar

Blogger: 42
  1. Iletişim formu bloglar için gercekten çok önemli, faydali bir paylaşım olmuş.

    YanıtlaSil
    Yanıtlar
    1. Yorumunuz için teşekkürler. Faydalı paylaşımlara devam edeceğim.

      Sil
  2. Kardeşim uzun süredir yazmıyordun, seni yeniden klavye başında görmek iyi oldu. Başarılı ✓

    YanıtlaSil
    Yanıtlar
    1. Evet haklısın, iyi dileklerin için teşekkür ederim.

      Sil
    2. Artık sıklıkla yazmaya devam edeceğim. Takipte ol.

      Sil
  3. Bilgilendirici yazı için teşekkürler. Uğraştırmayan güzel bir iletişim sayfası oluşturma yöntemi olmuş. Bilmeyenler için faydalı olacaktır kesinlikle. :)

    YanıtlaSil
    Yanıtlar
    1. Kendim de bu iletişim formunu kullanıyorum. Gerçekten de uğraşmaya gerek yok ve görüntüsü de gayet güzel.

      Sil
  4. Merhabalar. Günlerdir iletişim formu üzerine bi dolu yapboza döndürdüm bloğumu. Bu konuda yeni olan herkes benim gibi kodların arasında yüzüyordur herhalde. Öyle ki, tamamlamaya çalışırken yazmaya geçemiyorum bi türlü. Iletisim formunu deniycem şimdi. Bir de,bloğumun telif haklarını korumakla alakalı ibareye dair de yardımcı olursanız sevinirim. Ayna Hikayesi 'nden Sevgilerle...

    YanıtlaSil
    Yanıtlar
    1. Yapmanız geren sadece kopyalayıp yapıştırmaktır.

      Sil
  5. iyi hoşda yapmışsın eline sağlık biz kendi mailimize nasıl yönlendircez bunlarıda paylaşsaydın keşke

    YanıtlaSil
    Yanıtlar
    1. Blogger'da kullandığın Gmail hesabı hangisiyse otomatik olarak ona gidiyor, ekstra bir şey yapmana gerek yok.

      Sil
  6. Kardeşim siteme ekledim fakat deneme yaptığım da mailime gelmiyor

    YanıtlaSil
    Yanıtlar
    1. Uyarı için teşekkürler, sanırım kodlarda bir problem var. Uygun zamanda güncelleyeceğim.

      Sil
  7. Merhaba! Foruma nasıl ad-soyad kısmıda ekleeybiliriz?

    YanıtlaSil
  8. Merhaba! Ad, Soyad kısmı ekliyorum ama mail olarak algılıyor geçerli mail adresi girin hatası veriyor. Onu nasıl düzetebiliriz yardımcı olurmusunuz.

    YanıtlaSil
    Yanıtlar
    1. Sanırım widget'ta bir sorun var sizin gibi birkaç kişi daha hata olduğunu söylemişti. Gün içerisinde yazıyı güncelleyeceğim, beklemede kalın.

      Sil
    2. Geri dönüşünüz için teşekkür ederim. Diğer iletişim formu görsel olarak daha iyiydi ama olsun buda fena sayılmaz. Emeğinize sağlık.

      Sil
    3. İletişim Formu güzel olmuş ancak ad kısmını boş bıraktığımız zaman mesajı gönderiyor. Normalde zorunlu olması gerekiyor.

      Sil
    4. Rica ederim, daha önceden birkaç kez daha bu iletişim formundan hata aldığım için değiştirdim. Zaten değiştirmeyi düşünüyordum, yorumunuz hatırlatıcı oldu. Ad soyadın zorunlu olup olmaması eklentiden eklentiye değişiyor bu arada.

      Sil
  9. Çok teşekkürler.
    Bu arada temanız çok hoş

    YanıtlaSil
  10. Merhaba bu iletişim formunu iki blog sayfamda kullanıyorum birinde normal çalışıyor diğerinde gönder dediğim zaman gönderiliyor da kalıyor. Bu teplate ile alakalı bir sorunmudur acaba?

    YanıtlaSil
    Yanıtlar
    1. İletişim formunu kendi blogumda denedim, gayet sorunsuz bir şekilde çalışıyor.

      Sil
  11. hocam iletişim formundaki mesaj bölümüne yazı yazarken boşluk tuşu çalışmıyor kelimeler boşluksuz oluyor bunun sebebi nedir?

    YanıtlaSil
    Yanıtlar
    1. Boşluk tuşuna tıklandığında herhangi bir sorunla karşılaşmadım ben.

      Sil
  12. Elinize sağlık çok güzel bir tasarım. Rengin biraz değiştirip blogumda kullandım. Gerçekten en çok hoşuma giden forum bu oldu :)

    YanıtlaSil
    Yanıtlar
    1. Blogunuzda iletişim formu çok güzel duruyor. Yorumunuz için teşekkür ederim.

      Sil
  13. hacı arka plan rengi nasıl değiştiricez kod içinde arka plan ve kanarlık nasıl eklenir

    YanıtlaSil
    Yanıtlar
    1. ".datainput textarea" kodundan sonraki parantez içerisine "background:#renkkodu" şeklinde ekleme yapabilirsiniz. Kenarlık içinse ".datainput" kodundan sonraki paranteze "border: 1px solid" şeklinde ekleme yapabilirsiniz.

      Sil
  14. Gerçekten çok teşekkürler. sonunda!

    YanıtlaSil
  15. Teşekkürler faydalı bir yazı olmuş

    YanıtlaSil
  16. Hocam elinize sağlık. Benim bir yemek blogum var orada bunu tarif gönder olarak kullanmak istiyorum ama bana 2 alan(ad-soyad, mail gibi) daha lazım onu nasıl yapabilirim. Şimdiden teşekkür ediyorum

    YanıtlaSil
    Yanıtlar
    1. Merhabalar, Jotform adlı siteden istediğiniz türde iletişim formu oluşturabilirsiniz.

      Sil
    2. Jotform adlı siteden form oluşturunca reklamı çıkıyor onu engelleme yolunu biliyor musunuz

      Sil
    3. Bilmiyorum fakat sanırım engelleyemiyorsunuz.

      Sil
  17. Teşekkürler , güzel bilgilendirme

    YanıtlaSil
  18. Eksik bilgi, bilmeyenler için lütfen İletişim widgetini ekleyin ve XML panelinden ContactFrom1 içeriği silin. Detaylı bilgi; https://bloghocam.blogspot.com/2013/07/resmi-blogger-iletisim-formunu-sabit.html

    YanıtlaSil

Ad

1. Cilt,1,100,1,1080P,1,11.22.63,1,12 Kızgın Adam,1,2018,1,4. Sezon,1,44. Çocuk,1,A Thousand Kisses Deep,1,Aksiyon Filmleri,3,Alcatraz'dan Kaçış,1,Alexa,2,Amelie,1,Analiz,1,Android,14,Android Haberleri,1,Android İpuçları,2,Android Uygulamaları,10,Animasyonlu İndirme Butonu,1,Anket,1,Antonio Banderas,1,Antremanlarla Matematik,1,Apk,2,Apk İndir,2,Arama Açıklaması,1,Arama Motorları,1,Arı,1,Bana Dair,66,Base,1,Başarı,1,Başlık Efekt,1,Blog,2,Blog Keşif Etkinliği,1,Blog Nasıl Açılır?,1,Blogger,54,Blogger Eklentileri,18,Blogger Eklentisi,1,Blogger İpuçları,15,Blogger İstatistikler Widget'ı,1,Blogger Nedir,1,Blogger Sayfa Kaydırma Efekti,1,Blogger Sorunları,1,Blogger Tavsiyeleri,1,Blogger Temaları,5,Blogger Widget'ları,7,Blogger Yedekleme,1,Boks,1,Buton,2,camera,1,Can Dostum,1,Checker Gmail,1,Child 44,1,Chroma Keyboard,1,Cillian Murphy,1,Clev Note,1,CSS,2,Deadpool,1,Deadpool İndir,1,Ders,1,Ders Çalışma,1,Diğer Kategoriler,10,Dinlediklerim,4,Dives İkon,1,Dizi,1,Dizi Replikleri,1,Drama Filmleri,3,Drop Caps,1,Duvar Kağıtları,1,Düşünce,1,Editörün Seçtikleri,4,Eklenti,2,Elementary,1,Etkileşim,1,exi2.net,1,Fabrizio De André,1,Facebook,1,Film,5,Film İncelemesi,1,Film Puanlama,1,Film Replikleri,2,Filmler,6,First Character,1,First Letter,1,Flat İcon,1,Font,1,Forever,1,Forrest Gump,2,Frank Sinatra,1,Fringe,3,Galeri,5,Gary Oldman,1,Geçmişin Gölgesinde,2,Gerilim Filmleri,2,GetSiteControl,2,Google,2,Google Chrome,2,Google Fonts,1,Google Friend Connect,1,Google Plus,1,Google+,1,Google+ Toplulukları,1,Görsel,2,Guadalupe Pineda,1,Hayal Gücü Yüksek Sorular,1,Hayat ve Düşünce,1,Historia De Un Amor,1,HTML,2,Hugh Jackman,1,Instagram,1,Intoucheables,1,İcon,1,İkon Paketleri,1,İndex,1,İndir,4,İndirme Butonu,1,İnfografik,1,İstatistikler,1,İzlediklerim,17,Kalıcı Bağlantı,1,Kaliteli Blogger Eklentileri,1,Kaptan Amerika Kahramanların Savaşı,1,Kim Bu Semih,1,Kimdir,1,Kingsman: Gizli Servis,1,Kişisel Blog,7,Kişisel Yazılar,39,Kitap,1,Kullandıklarım,5,Launcher,1,Leonard Cohen,1,Logan,1,Logo Efekt,1,Material,2,Material Design,2,MeloCloud+ Music Player,1,Meta Açıklaması,1,Mijia Quartz Watch,1,Mim,10,Minimal Design,1,Mobil,2,Mobil Uyumlu Blogger Temaları,1,Muhammad Ali,1,Muhammad Ali Sözleri,1,Muhammad Ali'nin Hayatı,1,Müzik,6,Müzisyen,1,Nah Neh Nah,1,Nasıl Yapılır,5,Nasıl Yapılır?,3,Nedir,3,OGInstagram,1,Okuduklarım,2,Osmia Avosetta,1,Önemi,1,Öp Evlen Uçurumdan At,1,Özel Başlık Etiketleri,1,Paris'te Gece Yarısı,1,Paylaşım,1,PC,2,PC Uygulamaları,1,Peaky Blinders,2,Peppino Gagliardi,1,Pocket,1,Popüler Yayınlar,1,Radiogram,1,Radyo,1,Renato Carosone,1,Replikler,2,Repo Men,1,Resim ve Video,1,Resimli İndirme Butonu,1,Responsive,2,Robots txt,1,Rodrigo Amarante,1,Romantik Filmler,1,Root,2,Satın Aldıklarım,1,Schindler'in Listesi,2,Scroll Smooth,1,SEO,3,SEO Ayarları,1,Shareaholic,1,Shareit,2,Sherlock,3,Sherlock Holmes,1,Sınav,1,Sıralama,1,Sinema,1,Site Haritası,1,Social Meter,1,Sosyal Medya,2,Soundcloud,1,Sözler,1,Spor,1,Sting,1,Tasarım,1,Tavsiye,1,Tavsiyelerim,1,Teknoloji,1,Tema,1,Template Clue,1,The Blacklist,1,The Mentalist,2,The Mentalist Replikleri,1,The Pianist,1,Tom Hardy,2,Tozlu ve Yıkık Blog,1,True Detective,2,Tuyo,1,TVShow Time,2,Uygulama,1,Ücretsiz İkon,1,Üst Sıralara Çıkmak,1,Vaya Con Dios,1,Video,2,Videolar,1,Website,1,WhatFont,1,Woorank,1,Word Count,1,Wordpress,1,Xiaomi,1,Yabancı Diziler,9,Yabancı Radyo,1,Yardımlaşma,1,Yayın Ayarları,1,Yaz Tatili,1,Yazar Olmak,1,Yazı,2,Yazı Kutusu,1,Yazı Yazmak,1,YGS,1,YGS Süreci,1,Yıl Dönümü,1,Yıldız Sıralamalı,1,Yıldızlararası,1,Youtube,1,Ziyaretçi Trafiği,1,
ltr
item
Semih Keçecioğlu - Kişisel Blog: Blogger İletişim Formu Sayfası Nasıl Yapılır?
Blogger İletişim Formu Sayfası Nasıl Yapılır?
Blogger'a basit bir şekilde iletişim sayfası nasıl yapıldığı hakkında bir bilgilendirme yazısı.
https://1.bp.blogspot.com/-i8Ag9bNrnws/WuCIEn6YDxI/AAAAAAAAMKA/ZlIO1dXJdm8JY06hYCxBpWJUCfGDKLStACLcBGAs/s640/Blogger%2B%25C4%25B0leti%25C5%259Fim%2BFormu%2BSayfas%25C4%25B1%2BNas%25C4%25B1l%2BYap%25C4%25B1l%25C4%25B1r.png
https://1.bp.blogspot.com/-i8Ag9bNrnws/WuCIEn6YDxI/AAAAAAAAMKA/ZlIO1dXJdm8JY06hYCxBpWJUCfGDKLStACLcBGAs/s72-c/Blogger%2B%25C4%25B0leti%25C5%259Fim%2BFormu%2BSayfas%25C4%25B1%2BNas%25C4%25B1l%2BYap%25C4%25B1l%25C4%25B1r.png
Semih Keçecioğlu - Kişisel Blog
https://semihkececioglu.blogspot.com/2016/04/blogger-iletisim-formu-sayfasi-nasil-yapilir.html
https://semihkececioglu.blogspot.com/
https://semihkececioglu.blogspot.com/
https://semihkececioglu.blogspot.com/2016/04/blogger-iletisim-formu-sayfasi-nasil-yapilir.html
true
3247702708061337910
UTF-8
Tüm yazılar yüklendi. Hiçbir yazı bulunamadı. Tümünü Gör Devamını Oku Yanıtla Yanıtlamaktan Vazgeç Sil Yazan: Ana Sayfa Sayfalar Yazılar Tümünü Gör BENZER YAZILAR Etiket Arşiv SEARCH Tüm Yazılar Bulunamadı Geri Ana Sayfa Pazar Pazartesi Salı Çarşamba Perşembe Cuma Cumartesi Paz Pzt Sal Çar Per Cum Cmt Ocak Şubat Mart Nisas Mayıs Haziran Temmuz Ağustos Eylül Ekim Kasım Aralık Oca Şub Mar Nis Mayıs Haz Tem Ağu Eyl Eki Kas Ara şimdi 1 dakika önce $$1$$ minutes ago 1 saat önce $$1$$ hours ago Dün $$1$$ days ago $$1$$ weeks ago 5 haftadan uzun bir süre önce Takipçiler Takip Et Premium STEP 1: Share to a social network STEP 2: Click the link on your social network Tüm kodları kopyala Tüm kodları seç Tüm kodlar kopyalandı Çalışmazsa CTRL+C kombinasyonunu kullan