أخيرا!! حل نهائي لصفحة اتصل بنا على بلوجر 2024

أخيرا!! حل نهائي لصفحة اتصل بنا على بلوجر 2024

مرحبًا بكم أيها القراء الأعزاء! اليوم سنتحدث عن موضوع هام جدًا لكل من يستخدم منصة بلوجر لإنشاء المدونات: حل نهائي لمشكلة صفحة "اتصل بنا" على بلوجر في عام 2024. دعونا نغوص في التفاصيل ونكتشف كيف يمكننا حل هذه المشكلة بشكل فعال.

لقد لاحظ الكثير منا في الأشهر الأخيرة مشكلة مزعجة في صفحة "اتصل بنا" على منصة بلوجر. المشكلة تتمثل في أن الصفحة تظل في حالة "جارٍ الإرسال..." دون أن يتم إرسال الرسالة فعليًا. هذا الأمر قد يكون محبطًا للغاية، خاصة إذا كنت تعتمد على هذه الصفحة للتواصل مع قرائك أو عملائك.


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

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

والآن، دعونا نبدأ بخطوات حل مشكلة صفحة "اتصل بنا" على بلوجر:

  1. أولاً، توجهوا إلى لوحة التحكم الخاصة بمدونتكم.
  2. انتقلوا إلى قسم "المظهر" ثم اختاروا "تعديل HTML".
  3. في محرر HTML، ابحثوا عن الوسم<b:defaultmarkup type='Common'> بعد هذا الوسم مباشرة، قوموا بإضافة الكود التالي:

     <b:includable id='contact-form-content'>
      <div class='widget-content contact-form-widget'>
        <form class='contact-form-form' name='contact-form'>
          <input class='contact-form-name cf-s' expr:ariby='data:contactFormNameMsg' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
          <input class='contact-form-email cf-s' expr:ariby='data:contactFormEmailMsg + &quot; *&quot;' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' expr:placeholder='data:contactFormEmailMsg + &quot; *&quot;' name='email' size='30' type='text' value=''/>
          <textarea class='contact-form-email-message cf-s' cols='25' expr:ariby='data:contactFormMessageMsg + &quot; *&quot;' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' expr:placeholder='data:contactFormMessageMsg + &quot; *&quot;' name='email-message' rows='5'/>
          <input class='contact-form-button contact-form-button-submit btn' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </form>
      </div>
    </b:includable>


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

      <b:defaultmarkup type='ContactForm'>
    <b:includable id='main' var='this'>
      <b:include name='widget-title'/>
      <b:include name='content'/>
    </b:includable>
    <b:includable id='content'>
      <b:include name='contact-form-content'/>
    </b:includable>       
    </b:defaultmarkup>
  5. الآن، ابحثوا عن الوسم </head>. قبل هذا الوسم مباشرة، أضيفوا الكود CSS التالي:

    <style>.hidden{display:none!important;opacity:0}</style>


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

    <b:if cond='data:view.isSingleItem'>
    <b:section class='hidden' deleted='true' id='hidden-widgets' maxwidgets='1' showaddelement='no'>
    <b:widget id='ContactForm1' locked='true' title='نموذج الاتصال' type='ContactForm' visible='true'>
      <b:includable id='main' var='this'>
      <b:include name='widget-title'/>
      <b:include name='content'/>
    </b:includable>
      <b:includable id='content'>
      <b:include name='contact-form-content'/>
    </b:includable>
    </b:widget>
    </b:section>
    </b:if>


     هذا الكود يقوم بإضافة نموذج الاتصال إلى الصفحات الثابتة والمقالات.

من المهم أن نلاحظ أن هذه التعديلات ستجعل نموذج الاتصال يعمل على الصفحات الثابتة والمقالات فقط. إذا كنتم ترغبون في إضافة نموذج الاتصال إلى الصفحة الرئيسية أيضًا، فما عليكم سوى إزالة السطر الأول <b:if cond='data:view.isSingleItem'> والسطر الأخير </b:if> من الكود الأخير.

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

تذكروا أن هذه التعديلات قد تختلف قليلاً اعتمادًا على القالب الذي تستخدمونه. إذا واجهتم أي صعوبات، فلا تترددوا في طرح أسئلتكم في قسم التعليقات أدناه. نحن هنا لمساعدتكم!

أتمنى أن يكون هذا الشرح قد ساعدكم في حل مشكلة صفحة "اتصل بنا" على مدونتكم. استمروا في الإبداع والتواصل مع جمهوركم! وإلى اللقاء في مقال آخر مفيد إن شاء الله.

avatar

jistweb

مدونة جيست ويب هي مدونة متخصصة في مجال الربح من التدوين واحتراف السيو. تهدف هذه المدونة إلى تزويد القراء بالمعلومات والموارد اللازمة لتحقيق النجاح في مجال التدوين وتحسين محركات البحث (SEO) للمواقع على الإنترنت.

أحدث أقدم

نموذج الاتصال