كيفية تشغيل نموذج الإتصال في بلوجر بدون الحاجة إلى widget.js

يفضل العديد من المدونين على منصة Blogger إستخدام نموذج الإتصال من بلوجر نفسها نظراً لأنه يدعم ميزة حفض الخصوصية بحيث لا يظهر الإيميل الخاص بك لزوار موقعك عند دخولهم لصفحة إتصل بنا قصد مراسلتك.

لاكن مع التحديثات الأخيرة التي تجريها البلوجر على المنصة أصبح الكثير من الأشخاص يعانون من مشكلة تعطل زر الإرسال على صفحة إتصل بنا على البعض من قوالب بلوجر التي لم يتم تحديثها لكي تتوافق مع التغييرات الجديدة.

إذا كان زر إتصل بنا على مدونتك لا يعمل فقد سبق لنا وأن شرحنا طريقة لتركيب صفحة إتصل بنا جاهزة عبر بوت تلجرام. لاكن، إن كنت تفضل فقط العمل على إصلاح مشكلة زر الإرسال في صفحة إتصل بنا فسنقدم لك طريقة لجعلها تعمل مع الإستغناء عن مساعدات بلوجر الإفتراضية widget.js.

- هل تريد معاينة شكل الصفحة ؟

معاينة 1 معاينة 2

شرح تركيب صفحة إتصل بنا بلوجر بدون تحميل widget.js

تنبيه:
يرجى تحميل وحفض نسخة إحتياطية من القالب الخاص بك للعودة إليها لاحقاً في حالة حدوث مشاكل أثناء تركيب الإضافة.

طبق الخطوات التالية بعناية لكي تستغني عن أكواد مساعدات البلوجر الإفتراضية وجعل صفحة إتصل بنا Blogger تعمل بدون الحاجة إلى تحميل widget.js.

الخطوة الأولى: قم بتسجيل الدخول إلى لوحة التحكم بلوجر.

الخطوة الثانية: من القائمة الجانبية إذهب إلى الثيمات، بجوار التخصيص حدد السهم للأسفل تم إضغط تعديل HTML.

الخطوة الثالثة: إبحث عن وسم ]]></b:skin> وقم بلصق كود CSS التالي فوقه مباشرة، {إضغط مرتين لنسخ الكود}.

/* Contact Form CSS By Echrah.Net */
.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}

الخطوة الرابعة: إبحث عن الكود التالي </body> سوف تجده في نهاية صفحة الأكواد، ضع هذه الأكواد البرمجية فوقه مباشرة. 

<!--[ Contact Form JS By Echrah.Net ]-->
<b:section class='hidden' id='section-contact-form' maxwidgets='1' showaddelement='false'>
  <b:widget id='ContactForm1' 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>

الخطوة الخامسة: الآن يمكنك تعطيل أكواد مساعدات البلوجر الإفتراضية إن أردت، للقيام بذلك قم بالبحث عن وسم نهاية البودي </body> ستجده في أخر صفحة أكواد القالب وقم باستبداله بهذا الكود &lt;noscript id=&#39;blogger-components&#39;&gt;&lt;!--</body>--&gt;&lt;/noscript&gt;&lt;/body&gt; واضغط حفض .

ملاحظة:
قد يؤدي تعطيل الأدوات الإفتراضية إلى حدوث مشاكل في بعض أجزاء القالب إذا كان المطور لم يقم ببنائه ليعمل بدونها، الرجاء منك معانية جميع أجزاء موقعك بعد إنهاء كل تعديلات تركيب صفحة إتصل بنا بدون widget.js وذلك للتأكد من أن المظهر يعمل بشكل صحيح.

شاهد أيضاً

الخطوة الأخيرة: في صفحة إتصل بنا على موقعك، قم باستبدال وضع الإنشاء إلى تحرير HTML والصق الكود التالي هناك تم أنشر الصفحة واذهب لمعاينتها.

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

ستلاحض أن نفس شكل صفحة إتصل بنا بلوجر يتم إستدعائها بسهولة √ والجميل في الأمر أن زر إتصل بنا سيعمل معك بشكل صحيح وستصلك الرسالة إلى بريدك الإلكتروني email في الحين مع ضمان أنها لن يتعطل في المستقبل لأن الـ JavaScript المستخدمة يتم تركيبها داخلياً وليس عبر رابط URL.

إشرح نت هو الدليل الأكثر شمولاً لتعلم المعرفة التقنية وشروحات عالم الإنترنت.