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.

• [message]
• ##info## Bilgilendirme
• Bir süredir paylaşmış olduğum iletişim formunun çalışmadığı yönünde mesajlar ve yorumlar alıyordum. Sanırım bu global bir problemdi. 06.04.2020 itibariyle birçok kez kendi blogumda test ettim ve gayet iyi bir şekilde iletişim formu çalışıyor. Yazılanları harfiyen uyguladığınızda hiçbir sorun olmadan bu iletişim formunu kullanabilirsiniz. Yine bir sorun olursa istediğiniz yerden yazabilirsiniz.

İletişim Formu

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.

HTML<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.