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

Blogger iletişim formu sayfası oluşturmanın adımları ve önemi hakkında sizlere bilgilendirici bir yazı hazırladık. İletişim formu, blogunuzun ziyaretçileriyle iletişim kurmanızı sağlayan önemli bir araçtır. Bu form sayesinde ziyaretçileriniz size mesaj gönderebilir, sorularını sorabilir ve geri bildirimde bulunabilir. İletişim formu sayfası, blogunuzun profesyonel ve güvenilir bir imajını yansıtır ve ziyaretçilerinizin sizinle kolayca iletişim kurmasını sağlar.

Blogger İletişim Formu Sayfası Nasıl Oluşturulur?

İletişim formunu oluşturmak için, Blogger Yönetici Paneli’nde sol taraftaki menüden Sayfalar seçeneğine tıklayın.

Sayfalar bölümüne girdikten sonra, mevcut sayfalarınızı göreceksiniz. İletişim formunu oluşturmak için yeni bir sayfa oluşturmanız gerekmektedir. Bunun için sayfaların üzerinde bulunan Yeni Sayfa butonuna tıklayın.

Açılan boş sayfada, görünüme (kalem simgesi) tıklayarak HTML görünümü seçeneğini seçin. Ardından aşağıdaki kodları boş alana yapıştırın.

<div class='bloggerForm'></div>

Sayfayı kaydedin ve yayınlayın.

Blogger > Tema > Özelleştir > HTML'yi Düzenle‘ye gidin.

CTRL+F yardımıyla ]]></b:skin> kodunu aratın.

Arattığımız kodun üstüne aşağıdaki kodları yapıştırın.

.blogger-form .input-field{margin-bottom:12px}
.blogger-form .input-field>input,.blogger-form .input-field>textarea{width:100%;padding:12px 24px;border-radius:6px;border:1px solid #e0e0e0;background:#fff;font-weight:500;font-size:16px;color:#6b7280;outline:0;resize:none}
.input-field>input:focus{border-color:#6a64f1;box-shadow:0 3px 8px rgba(0,0,0,.05)}
.blogger-form .input-field>label{font-size:14px;opacity:.8}
.blogger-form .submit-button{outline:0;border:none;background:#204ecf;color:#fff;padding:10px 14px;border-radius:30px;font-size:14px;display:inline-flex;align-items:center;justify-content:center}
.blogger-form .submit-button:hover{box-shadow:2px 2px 8px rgba(0,0,0,.1)}
.blogger-form .submit-button:active{box-shadow:4px 4px 8px rgba(0,0,0,.15)}
.form-notification{background:#c1e4ff;border-radius:10px;padding:15px;font-size:13px;line-height:.9rem;margin:15px 0}
.error .form-notification{background:#ffd3d0}
.success .form-notification{background:#d0f4d7}

Son olarak </body> kodunu aratın (çıkmazsa </body> şeklinde de aratabilirsiniz). Üzerine alttaki kodları yerleştirin.

<b:section class='hidden' id='section-contact-form' maxwidgets='1' showaddelement='false'>
<b:widget id='ContactForm005' locked='true' title='Contact Form' type='ContactForm' version='2' visible='true'>
<b:includable id='main'><b:include name='content'/></b:includable>
<b:includable id='content'>
<script>/*<![CDATA[*/ undefinedfunctionundefineda){let b=functionundefineda,b){forundefinedlet c in b)ifundefinedb.hasOwnPropertyundefinedc)){let d=b[c];a=a.replaceundefinednew RegExpundefined"{{"+c+"}}","g"),d)}return a},c=functionundefineda,b,d){ifundefinedvoid 0===a)return"";ifundefinedd=d||[],"object"==typeof a)forundefinedvar e in a)cundefineda[e],b||e,d);else d.pushundefinedb+"="+encodeURIComponentundefineda));return d.joinundefined"&")},d=null,e=functionundefinedb,c,e){e&&undefinedb.classList.removeundefined"notif","error","success","sending"),b.classList.addundefined"notif",e)),b.innerHTML="<div class='form-notification'>"+c+"</div>",clearTimeoutundefinedd),d=setTimeoutundefinedfunctionundefined){b.innerHTML="",b.classList.removeundefined"notif","error","success","sending"),d=null},"number"==typeof a.notifTimeout?a.notifTimeout:4e3)},f=functionundefinedb){let f={name:b.elements.name.value,email:b.elements.email.value,message:b.elements.message.value,blogID:a.widget.blogId,token:a.widget.token},g=b.notifElement;ifundefinedclearTimeoutundefinedd),!1===/^[+a-zA-Z0-9_.!#$%&'*/=?^`{|}~-]+@undefined[a-zA-Z0-9-]+.)+[a-zA-Z0-9]{2,63}$/.testundefinedf.email))eundefinedg,a.widget.invalidEmailNotif,"error");else ifundefined""===f.message)eundefinedg,a.widget.emptyMessageNotif,"error");else{eundefinedg,a.widget.sendingNotif,"sending");let d=null;try{d=new XMLHttpRequest}catchundefinedb){try{d=new ActiveXObjectundefined"Msxml2.XMLHTTP")}catchundefinedb){try{d=new ActiveXObjectundefined"Microsoft.XMLHTTP")}catchundefinedb){console.warnundefined"XHR not supported")}}}null===d?eundefinedg,a.widget.notSentNotif,"error"):undefinedd.openundefined"POST",b.action),d.setRequestHeaderundefined"Content-Type","application/x-www-form-urlencoded"),d.onreadystatechange=functionundefined){ifundefined4===d.readyState){let c=d.responseText;200===d.status?undefinedc=JSON.parseundefinedc),"ok"===c.type?undefinedeundefinedg,a.widget.sentNotif,"success"),b.resetundefined)):eundefinedg,a.widget.notSentNotif,"error")):eundefinedg,a.widget.notSentNotif,"error")}},d.sendundefinedcundefinedf)))}},g=document.querySelectorAllundefined"string"==typeof a.selectors?a.selectors:".bloggerForm");undefinedfunctionundefineda,b){Array.prototype.forEach.callundefineda,b)})undefinedg,functionundefinedc,d){let e="contact-form-"+undefinedd+1),g=document.createElementundefined"form");g.name=e,g.method="POST",g.action=a.widget.submitUrl,g.classList.addundefined"blogger-form"),g.innerHTML=bundefineda.template,{NAMEID:e+"-name",EMAILID:e+"-email",MESSAGEID:e+"-message",SUBMITID:e+"-submit",NOTIFID:e+"-notif",NAME:a.widget.nameText,EMAIL:a.widget.emailText,MESSAGE:a.widget.messageText,SUBMIT:a.widget.sendText});let h=g.querySelectorundefined"#"+e+"-notif");h.classList.addundefined"form-notification-area"),g.notifElement=h,g.addEventListenerundefined"submit",functionundefineda){a.preventDefaultundefined),fundefinedg,a)}),c.innerHTML="",c.appendChildundefinedg)})}) undefined{ widget: /*]]>*/{ sendingNotif: &quot;<data:contactFormMessageSendingMsg.jsonEscaped/>&quot;, sentNotif: &quot;<data:contactFormMessageSentMsg.jsonEscaped/>&quot;, notSentNotif: &quot;<data:contactFormMessageNotSentMsg.jsonEscaped/>&quot;, invalidEmailNotif: &quot;<data:contactFormInvalidEmailMsg.jsonEscaped/>&quot;, emptyMessageNotif: &quot;<data:contactFormEmptyMessageMsg.jsonEscaped/>&quot;, title: &quot;<data:title.jsonEscaped/>&quot;, blogId: &quot;<data:blogId.jsonEscaped/>&quot;, nameText: &quot;<data:contactFormNameMsg.jsonEscaped/>&quot;, emailText: &quot;<data:contactFormEmailMsg.jsonEscaped/>&quot;, messageText: &quot;<data:contactFormMessageMsg.jsonEscaped/>&quot;, sendText: &quot;<data:contactFormSendMsg.jsonEscaped/>&quot;, token: &quot;<data:contactFormToken.jsonEscaped/>&quot;, submitUrl: &quot;<data:submitUrl.jsonEscaped/>&quot; }/*<![CDATA[*/, selectors: ".bloggerForm", notifTimeout: 6000, template: "<div class='input-field'><label for='{{NAMEID}}'>{{NAME}}</label><input type='text' name='name' id='{{NAMEID}}'/></div><div class='input-field'><label for='{{EMAILID}}'>{{EMAIL}}</label><input type='text' name='email' id='{{EMAILID}}'/></div><div class='input-field'><label for='{{MESSAGEID}}'>{{MESSAGE}}</label><textarea name='message' id='{{MESSAGEID}}'></textarea></div><button class='submit-button' type='submit' id='{{SUBMITID}}'>{{SUBMIT}}</button><div id='{{NOTIFID}}' class='notification-cont'></div>" }) /*]]>*/</script>
</b:includable>
</b:widget>
</b:section>

Ardından temanızı kaydedin.

Bu adımları takip ederek, Blogger hesabınızda iletişim formu sayfanızı oluşturabilirsiniz. İletişim formu eklentisi, kullanıcıların adını, e-posta adresini ve mesajlarını girmelerine olanak tanır. Böylece ziyaretçileriniz sizinle iletişime geçebilir ve size mesaj gönderebilir. Artık iletişim formunu deneyebilirsiniz. Kullanıcılardan gelen e-postaları Blogger’a bağlı olan e-posta adresinizden görebilirsiniz.