الديوان

الصفحة الرئيسية
الإظافات

كيف تجعل نموذج اتصل بنا يعمل في بلوجر؟ الحل الحصري Contact Form المجرب بدون خدمات خارجية 2026

كيف تجعل نموذج اتصل بنا يعمل في بلوجر؟ الحل الحصري Contact Form المجرب بدون خدمات خارجية 2026
شرح حل مشكلة نموذج اتصل بنا في بلوجر وتشغيل Blogger Contact Form لإرسال الرسائل بنجاح

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

واجهنا هذه المشكلة أثناء تطوير قالب مدونة Diouane، وبعد عدة تعديلات وصلنا إلى طريقة تجعل Contact Form في Blogger يعمل فعليًا دون الاعتماد على Formspree أو Google Forms أو خادم PHP أو خدمة بريد خارجية.

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

لماذا لا يعمل نموذج اتصل بنا في بعض قوالب بلوجر؟

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

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

المشكلة التي قد تظهر في القوالب المعدلة هي أن المصمم يخفي Widget الاتصال، أو ينسخ حقوله فقط، أو يعطل أجزاء من JavaScript الخاصة بـBlogger لتحسين الأداء، ثم يكتشف أن شكل النموذج موجود لكن وظيفة الإرسال لم تعد تعمل.

ما الحل الذي استخدمناه في قالب Diouane؟

رسالة اختبار وصلت إلى البريد الإلكتروني بنجاح بعد إرسالها من نموذج اتصل بنا في مدونة بلوجر

بدل إنشاء نظام إرسال جديد من الصفر، اعتمدنا على ContactForm الأصلي في Blogger وأعدنا بناء واجهته داخل القالب.

الفكرة تتكون من ثلاثة أجزاء:

  1. إضافة Widget من نوع ContactForm داخل قالب Blogger.
  2. عرضه فقط داخل صفحة اتصل بنا.
  3. الإبقاء على Runtime الخاص بـBlogger فعالًا في تلك الصفحة حتى يستطيع زر الإرسال تنفيذ وظيفته.

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

الخطوة الأولى: إنشاء صفحة اتصل بنا في Blogger

من لوحة تحكم Blogger انتقل إلى:

الصفحات ← صفحة جديدة

أنشئ صفحة باسم اتصل بنا. في مثالنا استخدمنا الرابط:

/p/contact.html

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

الخطوة الثانية: إضافة ContactForm الأصلي إلى قالب بلوجر

قبل تعديل القالب، خذ نسخة احتياطية منه. بعد ذلك انتقل إلى:

المظهر ← تعديل HTML

في المكان المناسب داخل قسم المحتوى في القالب، استخدم Widget من نوع ContactForm. النسخة التي طبقناها تعتمد على البنية التالية: 

<b:widget
  cond='data:blog.url.canonical == data:blog.homepageUrl.canonical path "p/contact.html"'
  id='ContactForm1'
  locked='true'
  mobile='yes'
  title='أرسل رسالة'
  type='ContactForm'
  version='1'>

  <b:includable id='main'>

    <div class='contactFormShell'>

      <h2 class='contactFormTitle'>أرسل رسالة</h2>

      <p class='contactFormIntro'>
        استخدم النموذج التالي للتواصل معنا مباشرة.
        الحقول المعلّمة بأنها مطلوبة يجب تعبئتها قبل الإرسال.
      </p>

      <div class='contact-form-widget formB'>
        <div class='form'>

          <form aria-label='نموذج الاتصال' name='contact-form'>

            <label class='area'>
              <input
                autocomplete='name'
                class='contact-form-name'
                expr:id='data:widget.instanceId + "_contact-form-name"'
                name='name'
                type='text'
                value=''/>

              <span class='n'>الاسم</span>
              <span class='sup'>اختياري</span>
            </label>

            <label class='area'>
              <input
                autocomplete='email'
                class='contact-form-email'
                expr:id='data:widget.instanceId + "_contact-form-email"'
                inputmode='email'
                name='email'
                required='required'
                type='email'
                value=''/>

              <span class='n'>البريد الإلكتروني</span>
              <span class='sup'>مطلوب</span>
            </label>

            <label class='area'>
              <textarea
                class='contact-form-email-message'
                expr:id='data:widget.instanceId + "_contact-form-email-message"'
                name='email-message'
                required='required'
                rows='6'/>

              <span class='n'>الرسالة</span>
              <span class='sup'>مطلوب</span>
            </label>

            <input
              class='button contact-form-button contact-form-button-submit'
              expr:id='data:widget.instanceId + "_contact-form-submit"'
              type='button'
              value='إرسال الرسالة'/>

            <p
              aria-live='polite'
              class='contact-form-error-message'
              expr:id='data:widget.instanceId + "_contact-form-error-message"'
              role='status'/>

            <p
              aria-live='polite'
              class='contact-form-success-message'
              expr:id='data:widget.instanceId + "_contact-form-success-message"'
              role='status'/>

          </form>

        </div>
      </div>

    </div>

  </b:includable>

</b:widget>

ماذا يفعل شرط contact.html في الكود؟

لاحظ السطر الموجود في بداية Widget:

cond='data:blog.url.canonical == data:blog.homepageUrl.canonical path "p/contact.html"'

وظيفته هي جعل Widget يظهر في صفحة /p/contact.html فقط، بدل تحميل نموذج الاتصال في الصفحة الرئيسية وجميع المقالات والأقسام.

إذا كان رابط صفحة الاتصال لديك مختلفًا، غيّر:

p/contact.html

إلى مسار صفحة الاتصال الخاصة بك.

لماذا أسماء Classes وIDs مهمة؟

هذه النقطة مهمة جدًا. لا تتعامل مع النموذج وكأنه مجرد تصميم يمكن تغيير أسماء عناصره عشوائيًا.

نستخدم على سبيل المثال:

contact-form-name
contact-form-email
contact-form-email-message
contact-form-button-submit
contact-form-error-message
contact-form-success-message

كما تُنشأ معرفات العناصر بالاعتماد على:

data:widget.instanceId

والهدف هو إبقاء بنية النموذج متوافقة مع Widget الاتصال الذي يتعامل معه Blogger. لذلك إذا كنت تريد تغيير المظهر، فمن الأفضل تعديل CSS المحيط بالعناصر بدل تغيير البنية الوظيفية للنموذج دون معرفة تأثير ذلك على ارسال ووصول الرسائل.

لماذا زر الإرسال type="button" وليس submit؟

قد يبدو غريبًا أن يكون الزر:

type='button'

لكننا لا نعتمد هنا على إرسال HTML تقليدي إلى ملف PHP عبر action. الزر جزء من ContactForm الخاص بـBlogger، ووظيفة الإرسال الفعلية تعتمد على Runtime الخاص بالمنصة.

لهذا السبب فإن تحويل النموذج إلى Form HTML عادي أو نسخ شكله وحده قد يؤدي إلى ظهور كل الحقول بشكل طبيعي بينما لا تصل أي رسالة.

الخطوة الأهم: لا تعطل JavaScript الخاص بـBlogger في صفحة الاتصال

هذه كانت من أهم النقاط في تطبيقنا.

بعض قوالب Blogger المعدلة تستخدم حيلًا لمنع أجزاء من JavaScript الافتراضي الخاص ببلوجر من التحميل، غالبًا بهدف تقليل الطلبات وتحسين الأداء. قد يعمل الموقع بصورة طبيعية بعد ذلك، لكن Widgets التي تعتمد على JavaScript الأصلي قد تتوقف.

إذا كان قالبك يفعل ذلك، يجب استثناء صفحة الاتصال من التعطيل.

في قالبنا استخدمنا شرطًا عند إغلاق body حتى يبقى Runtime الأصلي متاحًا على صفحة الاتصال: 

<b:if cond='!data:view.isPreview and data:blog.url.canonical != data:blog.homepageUrl.canonical path "p/contact.html"'>&lt;!--</b:if></body><b:if cond='!data:view.isPreview and data:blog.url.canonical != data:blog.homepageUrl.canonical path "p/contact.html"'>--&gt;&lt;/body&gt;</b:if>

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

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

هل نحتاج إلى Formspree أو PHP أو استضافة خارجية؟

لا، ليس لهذه الطريقة التي استخدمناها.

الحل يعتمد على ContactForm الأصلي في Blogger، ولذلك لم نحتج إلى:

  • استضافة PHP.
  • خادم VPS.
  • Formspree.
  • Web3Forms.
  • Google Forms.
  • API لإرسال البريد.

وهذا أحد الأسباب التي جعلتنا نختار هذه الطريقة لموقع يعمل بالكامل على Blogger.

هل يمكن تصميم نموذج Contact Form كما أريد؟

نعم. تستطيع تغيير شكل الحقول والألوان والمسافات وحجم الزر ورسائل النجاح والخطأ باستخدام CSS، مع الحفاظ على العناصر التي يحتاج إليها ContactForm.

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

مثال مبسط:

#ContactForm1 {
  max-width: 560px;
  margin: 12px auto 40px;
}

#ContactForm1 .contactFormShell {
  padding: 24px;
}

#ContactForm1 .formB form {
  display: grid;
  gap: 20px;
}

#ContactForm1 .contact-form-button-submit {
  min-width: 150px;
  cursor: pointer;
}

@media screen and (max-width:640px) {
  #ContactForm1 .contact-form-button-submit {
    width: 100%;
  }
}

هذا CSS مجرد نقطة بداية. يمكنك تصميم النموذج بما يتناسب مع قالبك دون تغيير آلية الإرسال نفسها.

ماذا يحدث بعد ضغط المستخدم على إرسال الرسالة؟

إذا كان ContactForm وRuntime الخاص ببلوجر يعملان بصورة صحيحة، يتعامل Blogger مع طلب الإرسال ثم يستخدم العنصر المخصص لرسالة النجاح أو الخطأ لإظهار النتيجة للمستخدم.

ولهذا احتفظنا في النموذج بهذين العنصرين:

contact-form-error-message
contact-form-success-message

وجود رسالة واضحة بعد الضغط على الزر أفضل من ترك المستخدم يتساءل هل أُرسلت رسالته أم لا.

كيف تختبر نموذج اتصل بنا بعد تركيبه؟

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

  1. اكتب اسمًا تجريبيًا.
  2. أدخل بريدًا إلكترونيًا صحيحًا.
  3. اكتب رسالة تستطيع التعرف عليها بسهولة.
  4. اضغط على زر إرسال الرسالة.
  5. تحقق من ظهور رسالة نجاح.
  6. تحقق من وصول الرسالة إلى البريد المرتبط بالمدونة.
  7. كرر الاختبار من الهاتف.

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

النموذج يظهر على الكمبيوتر ولا يظهر على الهاتف، ما الحل؟

قد تستخدم بعض قوالب Blogger القديمة أو المعدلة قواعد خاصة بالنسخة المحمولة تؤدي إلى إخفاء Widget.

أولًا تأكد من وجود:

mobile='yes'

في تعريف Widget.

وفي قالبنا أضفنا أيضًا حماية للعرض على الهاتف:

.mobile #ContactForm1,
body.mobile #ContactForm1 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100%;
  max-width: 560px;
}

لا تحتاج إلى هذا CSS إذا كان النموذج يظهر بصورة طبيعية على الهاتف، لكنه مفيد في القوالب التي تضيف class باسم mobile وتخفي بعض Widgets.

النموذج يظهر لكن زر الإرسال لا يعمل، أين المشكلة؟

إذا ظهرت الحقول بشكل طبيعي لكن الضغط على زر الإرسال لا يفعل شيئًا، ابدأ بالتحقق من هذه النقاط:

  • هل Widget معرف فعلًا على أنه type='ContactForm'؟
  • هل المعرف هو ContactForm1 ولا توجد نسخة أخرى متعارضة؟
  • هل أبقيت Classes الخاصة بالحقول وزر الإرسال؟
  • هل JavaScript الأصلي الخاص بـBlogger محمّل في صفحة الاتصال؟
  • هل القالب يستخدم كودًا لتعطيل Widgets أو JavaScript الافتراضي؟
  • هل تختبر الصفحة المنشورة بدل الاعتماد على المعاينة فقط؟

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

هل يمكن وضع نموذج اتصل بنا داخل صفحة Blogger نفسها فقط؟

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

بهذا نستطيع الاستفادة من Widget الأصلي والتحكم في مكان عرضه في الوقت نفسه.

هل Google Forms أفضل من Blogger Contact Form؟

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

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

هل صفحة اتصل بنا مهمة للمدونة؟

صفحة الاتصال تمنح القارئ وسيلة واضحة للتواصل مع صاحب الموقع، سواء للإبلاغ عن مشكلة أو الاستفسار عن المحتوى أو التواصل بشأن أمر متعلق بالموقع.

كما أن Blogger نفسه يدعم إنشاء صفحات ثابتة لمحتوى دائم مثل صفحات About وContact، ويمكن إظهار هذه الصفحات في قوائم الموقع.

إضافة تنبيه خصوصية أسفل النموذج

من الجيد توضيح الغرض من البيانات التي يرسلها المستخدم، خصوصًا البريد الإلكتروني.

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

يمكن استخدام نص مشابه:

<p class='contactFormPrivacy'>
بإرسال الرسالة، ستتم معالجة المعلومات التي تقدمها لغرض الرد على طلبك وفق
<a href='/p/privacy.html'>سياسة الخصوصية</a>.
لا ترسل كلمات مرور أو رموز تحقق أو بيانات بنكية أو معلومات حساسة غير ضرورية.
</p>

الخلاصة: ما الطريقة الصحيحة لتشغيل Contact Form في Blogger؟

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

في تجربتنا كان الحل هو استخدام Widget الأصلي ContactForm، الحفاظ على أسماء الحقول والعناصر التي يعتمد عليها، عرضه فقط في صفحة /p/contact.html، والتأكد من عدم تعطيل Runtime الخاص بـBlogger في تلك الصفحة.

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

أسئلة شائعة حول نموذج اتصل بنا في بلوجر

هل يوجد Contact Form أصلي في Blogger؟

نعم، يستطيع قالب Blogger استخدام Widget من نوع ContactForm، ويمكن دمجه داخل القالب وتخصيص مظهره.

لماذا يظهر نموذج اتصل بنا لكن زر الإرسال لا يعمل؟

من الأسباب المحتملة أن القالب يعرض HTML الخاص بالنموذج بينما JavaScript أو Runtime الذي يحتاج إليه Widget لا يعمل، أو أن بنية ContactForm الأصلية عُدلت بطريقة عطلت وظيفته.

هل أحتاج إلى PHP لإنشاء نموذج اتصال في بلوجر؟

ليس عند استخدام ContactForm الأصلي في Blogger بالطريقة الموضحة هنا، لأننا لا ننشئ Backend PHP منفصلًا لمعالجة الرسائل.

هل أحتاج إلى Formspree؟

لا. Formspree وخدمات النماذج الخارجية حلول بديلة، لكن الطريقة التي استخدمناها تعتمد على ContactForm الخاص بـBlogger نفسه.

هل يمكن استخدام النموذج مع دومين مخصص؟

نعم. استخدام نطاق مخصص للمدونة لا يمنع Widget الأصلي من العمل ما دامت المدونة والقالب وإعدادات النموذج تعمل بصورة صحيحة.

هل يجب اختبار النموذج بعد تغيير القالب؟

نعم. أي تعديل يؤثر في JavaScript الافتراضي أو Widgets أو صفحة الاتصال قد يؤثر في النموذج، لذلك من الأفضل إجراء رسالة اختبار بعد التغييرات الكبيرة على القالب.

المصادر

يستخدم Diouane.com ملفات تعريف الارتباط وتقنيات مشابهة لتشغيل الموقع وقياس الأداء وتحسين التجربة. سياسة الخصوصية