របៀបធ្វើឱ្យទម្រង់ទំនាក់ទំនង Blogger ដំណើរការដោយមិនចាំបាច់ផ្ទុក widgets.js

How to make Blogger Contact Form work without loading widgets.js

វាប្រហែលជាមិនដំណើរការទេ ប្រសិនបើដែនរបស់អ្នកត្រូវបានភ្ជាប់ជាមួយ Cloudflare DNS។

សំខាន់! មុនពេលយើងចាប់ផ្តើមបន្ថែមកូដនៅក្នុង XML ខ្ញុំនឹងណែនាំអ្នកឱ្យធ្វើការ Backup នៃ theme បច្ចុប្បន្នរបស់អ្នក។ ដោយចៃដន្យ ប្រសិនបើមានបញ្ហាណាមួយកើតឡើង អ្នកអាចស្ដារវាឡើងវិញនៅពេលក្រោយ។

ជំហានទី 1: ជាដំបូងនៃការទាំងអស់ចូលទៅរបស់អ្នក។ ផ្ទាំងគ្រប់គ្រង Blogger ។

ជំហានទី 2: នៅលើផ្ទាំងគ្រប់គ្រង Blogger ចុច Theme ។

ជំហានទី 3: ចុចរូបតំណាងព្រួញចុះក្រោម នៅជាប់នឹង ប៊ូតុង 'ប្ដូរតាមបំណង' ។

ជំហានទី 4: ចុច កែសម្រួល HTML អ្នកនឹងត្រូវបានប្តូរទិសទៅទំព័រកែសម្រួល។

ជំហានទី 5: ឥឡូវនេះស្វែងរកកូដ ]]></b:skin> ហើយបិទភ្ជាប់ កូដ CSS ខាងក្រោមទៅវា។

/* CSS by Fineshop Design */
.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}

ជំហានទី 6: បិទភ្ជាប់ Code ខាងក្រោមដើម្បី ដាក់ស្លាក។ ប្រសិនបើអ្នករកមិនឃើញទេ វាប្រហែលជាត្រូវបានញែករួចហើយ </body>។

<!--[ Contact Form JS by Fineshop Design ]--> <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'><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>

ជំហានទី 7: រក្សាទុកការផ្លាស់ប្តូរដោយចុចលើរូបតំណាងនេះ។

ជំហានទី 8៖ បន្ថែមកូដខាងក្រោមក្នុងទំព័ររបស់អ្នក ដើម្បីបន្ថែមទម្រង់ទំនាក់ទំនង៖

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