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

Blogger İletişim Formu Sayfası Oluşturma

Bu yazımızda Blogger altyapısını kullanan kullanıcılar için şık ve aynı zamanda tema dostu bir iletişim formu nasıl yapılır? Detayları üzerine konuşacağız.

Sizi takip eden veya içeriklerinizi okuyan kişilere sağlıklı bir hizmet vermeniz için , iletişim kanallarınızı takipçilerinizle paylaşmanız gerekmektedir. İletişimi iki yolla sağlarsınız.

1 – Sosyal Medya Hesaplarınızla

2 – İletişim Formlarıyla

Sosyal medya hesabı olmayan bir kişinin size ulaşması için ikinci seçeneğin yani iletişim formunun oluşturulması gerekmektedir. Bunu takipçileriyle sağlıklı bir iletişim kurmak isteyen tüm siteler yapmak zorunda.

Daha önce WordPress altyapısını kullanan kullanıcılar için, iletişim formu nasıl oluşturulur adlı bir makalemizi yayınlamıştık. Bu yazımızda ise Blogger kullanıcıları için bir iletişim formu nasıl oluşturulur? Bunun detaylarını anlatmaya çalışacağız.

WordPress İletişim Formu Nasıl Oluşturulur ?

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

Böyle bir sayfanın oluşturulması için öncelikle Blogger paneline giriş yapmanız gerekmektedir. Blogger panelinde sol menüde yer alan ” Sayfalar ” sekmesine giriş yapın, ardından ” Yeni Sayfa Oluştur’a ” tıklayınız.

Oluşturmuş olduğunuz İletişim sayfanızın HTML kısmına giriş yaparak aşağıda sizlerle paylaştığımız kodları bu HTML penceresine yapıştırın.

&lt;form name="contact-form">&lt;div class="datainput">&lt;input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> &lt;span class="highlight">&lt;/span> &lt;span class="bar">&lt;/span> &lt;label>Adınız&lt;/label> &lt;/div>&lt;div class="datainput">&lt;input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> &lt;span class="highlight">&lt;/span> &lt;span class="bar">&lt;/span> &lt;label>E-Posta Adresiniz&lt;/label> &lt;/div>&lt;div class="datainput">&lt;textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5">&lt;/textarea> &lt;span class="highlight">&lt;/span> &lt;span class="bar">&lt;/span> &lt;label>Mesajınız&lt;/label> &lt;/div>&lt;input id="ContactForm1_contact-form-submit" type="button" value="Gönder" /> &lt;div id="ContactForm1_contact-form-error-message">&lt;/div>&lt;div id="ContactForm1_contact-form-success-message">&lt;/div>&lt;/form>&lt;script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript">&lt;/script> &lt;script type="text/javascript">
//&lt;![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' &amp;&amp; BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6480876472007603946';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6480876472007603946','https://denemecalismalarim.blogspot.com//','6480876472007603946');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '&lt;span style="padding:5px 10px">Sending...&lt;/span>', 'contactFormMessageSentMsg': '&lt;span style="padding:5px 10px">Your message has been sent.&lt;/span>', 'contactFormMessageNotSentMsg': '&lt;span style="padding:5px 10px">Message could not be sent. Please try again later.&lt;/span>', 'contactFormInvalidEmailMsg': '&lt;span style="padding:5px 10px">A valid email address is required.&lt;/span>', 'contactFormEmptyMessageMsg': '&lt;span style="padding:5px 10px">Message field cannot be empty.&lt;/span>', 'title': 'Contact Form', 'blogId': '6480876472007603946contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
&lt;/script> &lt;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}
&lt;/style> &lt;div class='clear'>&lt;/div>
&lt;div style='clear:both;'>&lt;/div>

<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>Adınız</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>E-Posta Adresiniz</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>Mesajınız</label> </div><input id="ContactForm1_contact-form-submit" type="button" value="Gönder" /> <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'] = '6480876472007603946';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6480876472007603946','https://denemecalismalarim.blogspot.com//','6480876472007603946');

_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': '6480876472007603946contactFormNameMsg': '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>

Bu kodlar içerisinde düzeltmeniz gereken alanlar olacaktır. İlk düzeltmeniz gereken yerlerden biri, kendimize göre uyarladığımız iletişim sayfasında blogumuzun ID’sini kullandık. Burada 6480876472007603946 ile başlayan blog ID’sini siz kendi ID’niz ile değiştireceksiniz.

Blogger ID Öğrenme

Blog ID’nizi öğrenmek için blog panelinizin üst kısmında yer alan adres çubuğundaki linke bakmalısınız. Örneğin https://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx gibi .

Daha sonra blog adresinizin bulunduğu alana kendi sitenizin adresini yazıyorsunuz. Yapacağınız işlemler bu kadar basit. Ardından bu değişikleri yaptıktan sonra iletişim sayfanızı yayınlayın.

Oluşturulmuş Örnek Bir İletişim Sayfası

Bu yazımız da Blogger altyapılı Blogspot siteleri için gerekli olan bir eklentiden bahsettik. Bunun için yukarıda aşamalarını tek tek anlattığımız örnek bir iletişim sayfası nasıl oluşturulur ve burada izlenmesi gereken yollar nelerdir ? Sorularının cevaplarını vermeye çalıştık. Blog sayfalarınız için faydalı olması dileğiyle hoşçakalın.

27 Paylaşımlar