Şık Blogger İletişim Formu Sayfası Nasıl Yapılır?(Responsive Tasarım)

Merhaba arkadaşlar bu yazımda blogger'a basit bir şekilde iletişim sayfası nasıl yapıldığı hakkında bilgi vereceğim.

Bir blogunuz var ise size görüşlerini, şikayetlerini, sorularını yazarak size ulaşmak isteyen kişilerde olacak elbet. Bu nedenle bir adet "İletişim" adlı sayfa bulundurmak hem size hem de ziyaretçilere kolaylık sağlayacaktır. Zaten bu makaleyi okuyor iseniz bu sebepten dolayı buradasınız. Hemen en basit şekliyle ve Material Design tasarımına sahip nasıl iletişim sayfası yapacağınıza geçelim. 
Hemen aşağıdan benimde kullandığım iletişim formunu görüntüleyebilirsiniz.

İLETİŞİM FORMUNA ULAŞMAK İÇİN TIKLAYIN

Bloguma nasıl eklerim?

• 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 düzeltmeniz gereken 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'] = '5430682911425904947';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\5430682911425904947','//kendineblog.com/','5430682911425904947');
_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': '5430682911425904947', '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>

Nereleri düzeltmem gerekli?

Yukarıdaki kodların içerisinde CTRL+F yardımıyla 5430682911425904947 BlogID numarasını bulup yerine kendi blogID numaranızı yazacaksınız. blogID numaranızı blog panelinizde iken adres çubuğundan öğrenebilirsiniz ve tekrar CTRL+F yardımı ile http://kendineblog.com yazan yeri bulup oraya ise kendi blog adresiniz ile değiştirmelisiniz.


blogger iletişim formu, blog için iletişim formu, iletişim sayfası, iletişim formu kodu, blogger contact form code