Cara membuat halaman kontak blogger

Cara Membuat Halaman Hubungi Kami di Blog (Contact Form) - Selamat datang sahabat blogger, beberapa sahabat mungkin banyak yang mengalami masalah contact form blogger error atau tidak bisa send pesan.

Hal ini disebabkan karena update beberapa tahun yang lalu dimana value random yang cuman di generate sama blogger belum bisa di akali pakai JS.

Sebenarnya contact form nya masih jalan kalau script bundle bawaan blogger gak dihapus, masalahnya rata rata semua template blogger sudah menghapus script bundle demi kecepatan blog.

Membuat contact form di halaman statis blogger

Nah disini saya akan memberikan solusi dan cara mengatasi contact form tidak bisa send pesan.

Untuk melihat contoh contact form nya bisa klik https://www.dionzi.com/p/contact.html

1. Pertama silahkan buka Tema >> Edit HTML, letakkan kode di bawah ini tepat di atas </body>

<!--[ Contact Form JS ]-->
<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[*/ (function(a){let b=function(a,b){for(let c in b)if(b.hasOwnProperty(c)){let d=b[c];a=a.replace(new RegExp("{{"+c+"}}","g"),d)}return a},c=function(a,b,d){if(void 0===a)return"";if(d=d||[],"object"==typeof a)for(var e in a)c(a[e],b||e,d);else d.push(b+"="+encodeURIComponent(a));return d.join("&")},d=null,e=function(b,c,e){e&&(b.classList.remove("notif","error","success","sending"),b.classList.add("notif",e)),b.innerHTML="<div class='form-notification'>"+c+"</div>",clearTimeout(d),d=setTimeout(function(){b.innerHTML="",b.classList.remove("notif","error","success","sending"),d=null},"number"==typeof a.notifTimeout?a.notifTimeout:4e3)},f=function(b){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;if(clearTimeout(d),!1===/^[+a-zA-Z0-9_.!#$%&'*\/=?^`{|}~-]+@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9]{2,63}$/.test(f.email))e(g,a.widget.invalidEmailNotif,"error");else if(""===f.message)e(g,a.widget.emptyMessageNotif,"error");else{e(g,a.widget.sendingNotif,"sending");let d=null;try{d=new XMLHttpRequest}catch(b){try{d=new ActiveXObject("Msxml2.XMLHTTP")}catch(b){try{d=new ActiveXObject("Microsoft.XMLHTTP")}catch(b){console.warn("XHR not supported")}}}null===d?e(g,a.widget.notSentNotif,"error"):(d.open("POST",b.action),d.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),d.onreadystatechange=function(){if(4===d.readyState){let c=d.responseText;200===d.status?(c=JSON.parse(c),"ok"===c.type?(e(g,a.widget.sentNotif,"success"),b.reset()):e(g,a.widget.notSentNotif,"error")):e(g,a.widget.notSentNotif,"error")}},d.send(c(f)))}},g=document.querySelectorAll("string"==typeof a.selectors?a.selectors:".bloggerForm");(function(a,b){Array.prototype.forEach.call(a,b)})(g,function(c,d){let e="contact-form-"+(d+1),g=document.createElement("form");g.name=e,g.method="POST",g.action=a.widget.submitUrl,g.classList.add("blogger-form"),g.innerHTML=b(a.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.querySelector("#"+e+"-notif");h.classList.add("form-notification-area"),g.notifElement=h,g.addEventListener("submit",function(a){a.preventDefault(),f(g,a)}),c.innerHTML="",c.appendChild(g)})}) ({ 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 nm'><label for='{{NAMEID}}'>{{NAME}}</label><input type='text' name='name' id='{{NAMEID}}'/></div><div class='input-field em'><label for='{{EMAILID}}'>{{EMAIL}}</label><input type='text' name='email' id='{{EMAILID}}'/></div><div class='input-field ms'><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>

Jika sudah silahkan simpan template.

2. Langkah kedua buat halaman contact form atau kalau sudah ada tanggal di ganti saja isinya.

Beralih ke Tampilan HTML

Paste atau ganti kode yang lama dengan kode di bawah ini.

<style>
/* Contact Form CSS */
.bloggerForm{position:relative}
.blogger-form .input-field{margin-bottom:12px}
.blogger-form .input-field>input,.blogger-form .input-field>textarea{width:100%;padding:8px 10px;border-radius:6px;border:1px solid #ccc;background:#fff;font-weight:500;font-size:16px;color:#6b7280;outline:0;resize:none}
.ms{clear:both}
.nm{width:calc(50% - 5px);float:left}
.em{width:calc(50% - 5px);float:right}
form textarea {min-height:130px}
.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:#005c61;color:#fff;padding:10px 20px;border-radius:6px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.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;position:absolute;bottom:50px;right:10px}
.error .form-notification{background:#ffd3d0}
.success .form-notification{background:#d0f4d7}
@media screen and (max-width:480px) {
.nm, .em {width:100%;float:none}
}
</style>
<div class="bloggerForm"></div>

Terakhir silahkan simpan.

Sampai disini anda sudah berhasil membuat halaman contact form dan tombol send sudah berfungsi dengan baik.

Saya rasa itu saja sedikit tutorial membuat contact form ala dionzi.com, semoga tutorial ini bermanfaat ya!!!