Çünkü blogunuzu ziyaret edenler bu İletişim Sayfası aracılığı ile size her türden duygu ve düşüncelerini yazabilecekler. Bu bazen bir görüş, bazende şikayet olabilir. Bazen bir tebrik mesajı, bazende merak ettikleri bir konuda soru olabilir. Yani kısaca herkes size buradan ulaşabilir. Bu nedenle blog da bir iletişim sayfası oluşturmak siz ve ziyaretçileriniz açısından iyi olacaktır.

Şimdi lafı fazla uzatmadan kolay ve basit bir şekilde nasıl iletişim sayfası oluşturabiliriz. Oluşturduğumuz iletişim sayfası içeriğine nasıl güzel bir iletişim formu yerleştirebiliriz. Hemen anlatmaya başlayalım. Oluşturduğumuz iletişim sayfası ve iletişim formu örneğini iletişim demo yazan yere tıklayarak görebilirsiniz





İletişim formu nasıl yapılır





İlk olarak blogger panelimizden "Sayfalar" menüsüne tıklayalım.





Blogger İletişim Sayfası





Sayfalar menüsüne girdiğimiz zaman "Yeni Sayfa" seçeneğine tıklayarak yeni bir sayfa oluşturuyoruz. Sayfa ismi olarak mesela "İletişim" ismini verebilirsiniz.





Blogger İletişim Sayfası





Oluşturduğumuz sayfada "HTML" kısmına tıklıyoruz.





Blogger İletişim Sayfası









Blogger İletişim Sayfası

"HTML" kısmına aşağıda eklemiş olduğum kodu resimdeki gibi kopyalayıp yapıştırıyoruz.

Kopyalayıp yapıştıracağımız iletişim sayfası kodu





<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'] = ' 6566259485196298438 ';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d 6566259485196298438 ',' //www.filmdizifragmanseyret.com/ ',' 6566259485196298438 ');

_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': ' 6566259485196298438 ', '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>





Son olarak kod içerisinde işaretlediğim yerleri kendi bilgileriniz ile değiştirin. Düzenlememiz gereken yerleri kırmızı ve mavi renk ile işaretledim.



Düzenlenecek yerler



Verdiğim kodların içeriğinde bulunan ve kırmızı renk ile işaretlediğim, " 3247702708061337910 " blogID yazılı yerlere kendi blogID numaramızı yazıyoruz. BlogID numarasını blogunuza girdiğiniz zaman adres çubuğuna bakarsanız orada yazar. BlogID değiştirdikten sonra mavi renk ile işaretlediğim //www.filmdizifragmanseyret.com/ blog adresini de kendi blog adresimiz ile değiştiriyoruz.





Artık her şey hazır. Sağ üst kısımda bulunan "Yayınla" seçeneğine tıklayıp çıkıyoruz.





Blogger İletişim Sayfası





İletişim Sayfamızı bu şekilde tamamladık. Aşağıda verdiğim görüntüden de gördüğünüz gibi iletişim formunu sayfamıza da yerleştirdik. Artık ziyaretçileriniz bu form aracılığı ile size rahatça ulaşabilecekler.



