انشاء صفحة اتصل بنا احترافيه لمدونة بلوجر بتصميم أنيق وعملي

تعد صفحة اتصل بنا على Blogger ركيزة أساسية لأي مدونة احترافية، فهي ليست مجرد وسيلة تواصل، بل شرط إلزامي وأساسي لقبول مدونتك في Google AdSense. ومع ذلك، يواجه أغلب المدونين مشكلة تقنية مزعجة: أداة الاتصال الافتراضية في منصة بلوجر كثيراً ما تتوقف عن العمل، أو لا تقوم بإرسال الرسائل إلى البريد الإلكتروني.

الحل النهائي والاحترافي لهذه المشكلة هو استخدام "طريقة الجسر" (The Bridge Method). تعتمد هذه الطريقة الذكية على ربط نموذج HTML داخل مدونتك بخدمة Google Apps Script، لإنشاء قناة اتصال خاصة ومجانية تضمن وصول الرسائل إلى صندوق الوارد في Gmail فوراً وبنسبة نجاح 100%.

وداعاً لمشاكل الأداة الافتراضية.. مرحباً بالاحترافية

لماذا تعتبر طريقة الجسر أفضل؟

قبل أن نبدأ في التركيب، دعنا نوضح لك في هذا الجدول لماذا يعتبر هذا التعديل ضرورياً لمدونتك مقارنة بالطرق القديمة المنتشرة:

الميزة	الطرق التقليدية (أكواد منسوخة)	طريقة الجسر (The Bridge Method)
الاعتمادية	غالباً تتوقف فجأة عن العمل	100% (تعمل مدى الحياة)
وصول الرسائل	غير مضمون (قد تضيع)	تصل فوراً لصندوق Gmail
التصميم	تصميم قديم وثابت	عصري ومتجاوب بالكامل
الأمان	تعتمد على خدمات خارجية مجهولة	آمنة (سيرفرات Google الخاصة بك)

---

الخطوة الأولى: إعداد كود الاستقبال (Backend)

سنبدأ بإنشاء الكود الذي يستقبل الرسائل. اتبع الخطوات التالية:

1. توجه إلى موقع Google Apps Script.
2. اضغط على زر New Project.
3. امسح أي كود موجود في المحرر، والصق الكود التالي.
4. قم بتعديل TO_ADDRESS في السطر الأول بوضع بريدك الإلكتروني.
5. قم بتعديل BLOG_NAME في السطر الثاني بوضع اسم مدونتك.

/* --- منطقة التعديل: ضع بياناتك بين علامات التنصيص --- */
var TO_ADDRESS = "your-email@gmail.com"; 
var BLOG_NAME = "Your Blog Name";       
/* -------------------------------------------------- */

function doPost(e) {
  try {
    var data = e.parameter;
    var name = data.name || "زائر";
    var email = data.email || "بدون بريد";
    var message = data.message || "لا يوجد محتوى";

    var cleanName = name.replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var cleanMsg = message.replace(/</g, "&lt;").replace(/>/g, "&gt;");

    var htmlBody = '<div dir="rtl" style="font-family:Arial,sans-serif; padding:20px; border:1px solid #ddd;">' +
                   '<h2 style="color:#007bff;">📩 رسالة جديدة من: ' + cleanName + '</h2>' +
                   '<p><strong>البريد:</strong> ' + email + '</p>' +
                   '<hr>' +
                   '<p><strong>نص الرسالة:</strong></p>' +
                   '<div style="background:#f9f9f9; padding:15px; border-radius:5px;">' + cleanMsg + '</div>' +
                   '</div>';

    GmailApp.sendEmail(TO_ADDRESS, "رسالة جديدة من: " + BLOG_NAME, "", {
      htmlBody: htmlBody,
      replyTo: email
    });

    return ContentService.createTextOutput(JSON.stringify({'result': 'success'}))
      .setMimeType(ContentService.MimeType.JSON);

  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({'result': 'error', 'error': error}))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

كيفية تفعيل ونشر الكود (Deploy)

لكي يعمل الكود، يجب نشره كتطبيق ويب، وهذه هي الخطوات:

• ابدأ النشر: اضغط على زر Deploy (أعلى اليمين) > ثم New Deployment.
• حدد النوع: اضغط على الترس (Settings) واختر Web App.
• الوصف: اكتب اسماً للتطبيق، مثلاً "Contact".
• الصلاحيات: في خيار "Who has access" اختر Anyone.
• الحفظ: اضغط Deploy، وافق على الأذونات، ثم انسخ الرابط الناتج (URL).

تحذير هام جداً!
تأكد من اختيار Anyone في خانة "من لديه حق الوصول" (Who has access). إذا اخترت "Only myself"، فلن يتمكن الزوار من إرسال الرسائل وسيظهر لهم خطأ.

---

الخطوة الثانية: تركيب صفحة الاتصل بنا (Frontend)

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

<!-- بداية كود صفحة اتصل بنا -->
<style>
  .contact-box { max-width: 600px; margin: 20px auto; padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); font-family: 'Tajawal', sans-serif; }
  .form-group { margin-bottom: 15px; }
  .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; }
  .form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; box-sizing: border-box; }
  .form-group textarea { height: 120px; resize: vertical; }
  #send-btn { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: 0.3s; }
  #send-btn:hover { background: #0056b3; }
  #send-btn:disabled { background: #ccc; cursor: not-allowed; }
  #status-msg { margin-top: 15px; text-align: center; display: none; font-weight: bold; }
</style>

<div class="contact-box">
  <form id="bridgeForm">
    <div class="form-group">
      <label>الاسم:</label>
      <input type="text" name="name" placeholder="الاسم الكامل" required>
    </div>
    <div class="form-group">
      <label>البريد الإلكتروني:</label>
      <input type="email" name="email" placeholder="example@mail.com" required>
    </div>
    <div class="form-group">
      <label>الرسالة:</label>
      <textarea name="message" placeholder="اكتب رسالتك هنا..." required></textarea>
    </div>
    <button type="submit" id="send-btn">إرسال الرسالة 🚀</button>
    <div id="status-msg"></div>
  </form>
</div>

<script>
  /* الصق الرابط الذي نسخته من الخطوة السابقة في المكان المظلل أدناه 
  */
  const SCRIPT_URL = "PUT_YOUR_WEB_APP_URL_HERE"; 

  const form = document.getElementById('bridgeForm');
  const btn = document.getElementById('send-btn');
  const msg = document.getElementById('status-msg');

  form.addEventListener('submit', e => {
    e.preventDefault();
    btn.disabled = true;
    btn.innerHTML = "جاري الإرسال...";
    
    fetch(SCRIPT_URL, { method: 'POST', body: new FormData(form) })
    .then(response => response.json())
    .then(data => {
      if(data.result === 'success') {
        msg.style.display = 'block';
        msg.style.color = 'green';
        msg.innerHTML = '✅ تم الإرسال بنجاح! سنرد عليك قريباً.';
        form.reset();
      } else { throw new Error('Error'); }
    })
    .catch(error => {
      msg.style.display = 'block';
      msg.style.color = 'red';
      msg.innerHTML = '❌ حدث خطأ! تأكد من الاتصال وحاول مجدداً.';
    })
    .finally(() => {
      setTimeout(() => {
        btn.disabled = false;
        btn.innerHTML = "إرسال الرسالة 🚀";
        msg.style.display = 'none';
      }, 4000);
    });
  });
</script>
<!-- نهاية كود صفحة اتصل بنا -->

الخطوة الأخيرة: الربط والتشغيل

• ابحث عن الكود: في أسفل الكود أعلاه، ستجد جملة مظللة: PUT_YOUR_WEB_APP_URL_HERE.
• الاستبدال: احذف هذه الجملة والصق مكانها الرابط الطويل الذي نسخته من جوجل.
• النشر: اضغط نشر (Publish) في بلوجر، ومبروك عليك صفحة احترافية.

معاينة الصفحة

يمكنك مشاهدة شكل الصفحة النهائي وتجربة النموذج من خلال زر المعاينة التالي:

معاينة صفحة اتصل بنا الحية

الأسئلة الشائعة (FAQ)

جمعنا لك أهم الاستفسارات التقنية والسيو التي يبحث عنها المدونون حول صفحة اتصل بنا:

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

السبب الرئيسي غالباً هو توقف خدمة الأداة الافتراضية من طرف بلوجر أو تعارضها مع أكواد القالب (JQuery). الحل الجذري هو استخدام كود HTML مخصص وربطه بخدمة Google Apps Script كما شرحنا في هذا المقال لضمان وصول الرسائل 100%.

هل صفحة اتصل بنا ضرورية لقبول أدسنس؟

نعم، تعتبر صفحة "اتصل بنا" وصفحة "سياسة الخصوصية" من المعايير الأساسية التي يراجعها فريق جوجل أدسنس للتأكد من مصداقية الموقع وهوية صاحبه، وغيابها قد يؤدي لرفض المدونة.

كيفية إنشاء صفحة اتصل بنا احترافية لمدونة بلوجر؟

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

هل كود Google Apps Script مجاني وآمن؟

نعم، الخدمة مجانية تماماً مقدمة من جوجل، وهي آمنة جداً لأن البيانات تنتقل مباشرة من مدونتك إلى بريدك في Gmail دون المرور بأي سيرفرات خارجية أو أطراف ثالثة.

كيف يمكنني تغيير البريد الإلكتروني الذي يستقبل الرسائل؟

يمكنك ذلك بسهولة عن طريق الدخول إلى مشروعك في Google Apps Script، وتعديل المتغير "TO_ADDRESS" الموجود في السطر الأول من الكود ووضع البريد الجديد، ثم حفظ المشروع ونشره مرة أخرى (New Deployment).

الخاتمة

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