ربط نموذج الحجز في ووردبريس بالواتساب خطوة بخطوة

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

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

الطريقة هنا لا تحتاج واجهة WhatsApp Business API ولا اشتراكًا مدفوعًا. الزائر يملأ النموذج (Form)، ثم يفتح له الموقع واتساب على رقمك ومعه رسالة مكتوبة مسبقًا تحوي الاسم والخدمة والموعد. هو يراجعها ويضغط إرسال من حسابه.

في الوقت نفسه يحفظ الموقع الطلب عندك. هذه النقطة هي الفرق بين نظام يُعتمد عليه ونظام يضيّع الحجوزات، وسنعود إليها.

خطة التنفيذ

من النموذج إلى واتساب في 5 خطوات

1. حقول قليلة وواضحة

   اسم، هاتف، خدمة، تاريخ، وقت، وملاحظات اختيارية.

2. تحقق قبل الإرسال

   حقول مطلوبة، هاتف بأرقام، ومنع التواريخ الماضية.

3. رسالة جاهزة مرتبة

   سطر لكل معلومة، مبنية من قيم الحقول.

4. احفظ ثم حوّل

   خزّن الطلب في الموقع، ثم افتح رابط wa.me.

5. اختبر على موبايل

   تأكد من النص العربي والرقم قبل النشر.

ابن موقعك قطعة قطعةarabcms.com

الخطوة 1: اختر الحقول التي تحتاجها فعلًا

كل حقل زائد يرفع احتمال أن يترك الزائر النموذج قبل إكماله، وكل حقل ناقص يعني رسالة متابعة لاحقًا. لنموذج حجز مواعيد يكفي غالبًا ما يلي:

الحقل	النوع	مطلوب؟	لماذا
الاسم	نص	نعم	لتعرف من يحجز
رقم الموبايل/واتساب	هاتف	نعم	للرد إن لم يرسل الزائر الرسالة
الخدمة	قائمة منسدلة	نعم	خيار واضح بدل وصف حر مبهم
التاريخ المفضل	منتقي تاريخ	نعم	يمنع صيغ التاريخ العشوائية
الوقت المفضل	قائمة منسدلة	نعم	فترات زمنية تحددها أنت
ملاحظات	نص قصير	لا	لأي تفصيل إضافي

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

الخطوة 2: التحقق من البيانات قبل الإرسال

التحقق من بيانات النموذج (Form Validation) يمنع ثلاث مشكلات متكررة: حقول فارغة، وأرقام هواتف خاطئة، وتواريخ مرّت بالفعل.

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

أفضل من رفض التاريخ الماضي بعد الإرسال أن تمنع اختياره من الأساس. هذا السطر يضبط أقل تاريخ مسموح في حقل التاريخ على «اليوم» بتوقيت جهاز الزائر:

// Set the earliest selectable date to today (local time, not UTC)
const dateInput = document.querySelector('#booking-date');
const today = new Date();
today.setMinutes(today.getMinutes() - today.getTimezoneOffset());
dateInput.min = today.toISOString().slice(0, 10);

ملاحظة: استخدام toISOString() مباشرة يعطي التاريخ بتوقيت UTC، فقد يظهر «أمس» كتاريخ مسموح لزائر في مصر أو الخليج بعد منتصف الليل. التعديل بفارق المنطقة الزمنية في السطر الثالث يحل ذلك. وإن كنت لا تقبل حجز اليوم نفسه، أضف يومًا إلى today قبل السطر الأخير.

الخطوة 3: صياغة الرسالة الجاهزة

الرسالة يجب أن تُقرأ كطلب حجز طبيعي، لا كمخرجات نموذج. سطر لكل معلومة، وبالترتيب نفسه في كل مرة، حتى تقرأها بنظرة واحدة على الموبايل:

مرحبًا، أريد حجز موعد.
الاسم: [الاسم]
الخدمة: [الخدمة]
التاريخ المفضل: [التاريخ]
الوقت المفضل: [الوقت]
ملاحظات: [الملاحظات]

لا تضع أسماء الحقول الداخلية مثل field_3، ولا تكتب اسم خدمة ثابتًا داخل نص الرسالة. ابنِ الرسالة من قيم الحقول، حتى لا تضطر لتعديلها كلما غيّرت قائمة خدماتك.

الخطوة 4: بناء رابط wa.me بالرسالة

رابط المحادثة المباشرة (Click to Chat) في واتساب يأخذ هذا الشكل:

https://wa.me/<number>?text=<encoded-message>

الرقم يُكتب بالصيغة الدولية، أرقامًا فقط: بلا علامة + ولا مسافات ولا شرطات ولا أقواس، ومن غير الصفر المحلي في أوله.

الرقم كما تكتبه محليًا	كما يُكتب في الرابط
010 0123 4567 (مصر)	201001234567
050 123 4567 (السعودية)	966501234567
050 123 4567 (الإمارات)	971501234567

أما الرسالة فتحتاج ترميز الروابط (URL Encoding): المسافة تصبح %20 وفاصل السطر %0A. بدون الترميز تصل الرسالة مقطوعة عند أول رمز خاص، وهذا يحدث كثيرًا مع النص العربي. الدالة التالية تجمع الخطوتين، وتعمل مع أي إضافة نماذج لأنها تأخذ القيم وتعيد الرابط فقط:

function buildWhatsAppLink(phone, data) {
  // Keep digits only: no +, spaces, dashes or brackets
  const number = phone.replace(/\D/g, '');
  const lines = [
    'مرحبًا، أريد حجز موعد.',
    'الاسم: ' + data.name,
    'الخدمة: ' + data.service,
    'التاريخ المفضل: ' + data.date,
    'الوقت المفضل: ' + data.time,
  ];
  if (data.notes) lines.push('ملاحظات: ' + data.notes);
  // encodeURIComponent handles Arabic text, spaces and line breaks
  return 'https://wa.me/' + number + '?text=' + encodeURIComponent(lines.join('\n'));
}

الدالة لا تحذف الصفر المحلي من أول الرقم، لأن ذلك يختلف من بلد لآخر. اكتب رقم عملك في الكود بالصيغة الدولية الصحيحة من البداية.

الخطوة 5: احفظ الطلب أولًا، ثم افتح واتساب

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

بعد الإرسال الناجح أمامك خياران، اختر واحدًا والتزم به:

1. إعادة التوجيه (Redirect) تلقائيًا: يُحفظ الطلب ثم يُنقل الزائر مباشرة إلى واتساب. أسرع وأقل خطوات.
2. زر في رسالة التأكيد: تظهر رسالة «تم استلام طلبك» ومعها زر «أرسل الحجز على واتساب». يعطي الزائر حرية الاختيار.

اكتب نص الزر بوضوح: «أرسل الحجز على واتساب» أوضح بكثير من «إرسال».

في Elementor: نموذج Elementor Pro يتيح إجراءات بعد الإرسال (Actions After Submit)، منها Collect Submissions لحفظ الطلب داخل لوحة التحكم وRedirect لنقل الزائر إلى رابط. ضع إجراء الحفظ أولًا. وإن احتجت رابطًا يحمل قيم الحقول ولم يكفِك إعداد التحويل في نسختك، استخدم الدالة السابقة في كود الصفحة.

بصراحة: هذا القسم قراءة للخطوات من المصدر ومن مبادئ عمل رابط واتساب، لا تجربة على نسخة بعينها من إضافات النماذج. واجهات Elementor وJetFormBuilder وContact Form 7 تتغير بين الإصدارات، فاختبر طريقة تمرير القيم إلى رابط التحويل على موقعك قبل الاعتماد عليها.

الخطوة 6: اختبر قبل أن يراه أي عميل

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

• أرسل النموذج كاملًا: هل يفتح واتساب بالاسم والخدمة والموعد الصحيح؟
• اترك حقلًا مطلوبًا فارغًا: هل يتوقف النموذج برسالة واضحة؟
• جرّب تاريخًا ماضيًا: هل يمنعه منتقي التاريخ؟
• اقرأ الرسالة على موبايل: هل النص العربي سليم، والأسطر منفصلة؟
• أرسل الرسالة فعلًا: هل وصلت إلى رقم العمل الصحيح؟
• افتح لوحة التحكم: هل الطلب محفوظ حتى لو لم تُرسل رسالة واتساب؟

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

أخطاء شائعة تفسد النظام

• عدم حفظ الطلب: بلا سجل في الموقع لا يمكنك متابعة من غيّر رأيه.
• نموذج طويل: اسأل فقط عما تحتاجه للرد.
• رسالة مبهمة: «أريد الحجز» وحدها تعيدك لنقطة الصفر. ضع التفاصيل في الرسالة.
• نسيان البديل: ليس كل زائر يستخدم واتساب على الجهاز الذي يتصفح منه. اترك رقم هاتف أو إيميلًا ظاهرًا في الصفحة نفسها.

الأسئلة الشائعة

س: هل أحتاج WhatsApp Business API لربط النموذج بالواتساب؟
ج: لا. رابط wa.me مجاني ويعمل مع حساب واتساب العادي أو تطبيق WhatsApp Business. الـ API تحتاجه فقط إن أردت إرسال رسائل تلقائية من الموقع دون تدخل الزائر.

س: لماذا تصل رسالة واتساب الجاهزة مقطوعة أو بحروف غريبة؟
ج: غالبًا لأن النص لم يُرمَّز قبل وضعه في الرابط. مرّر الرسالة عبر encodeURIComponent كما في الدالة أعلاه، وستصل الأسطر والنص العربي سليمة.

س: كيف أكتب رقم مصري في رابط واتساب؟
ج: احذف الصفر الأول وأضف كود الدولة 20، بلا علامة + أو مسافات. الرقم 01001234567 يصبح 201001234567.

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

الخلاصة

نموذج الحجز المربوط بالواتساب مش مشروع معقد، الشغل كله في التفاصيل: حقول قليلة، تحقق من البيانات، رسالة مرتبة، رقم بالصيغة الدولية، وحفظ الطلب قبل التحويل. ابنيه النهارده، جرّبه من موبايلك قبل أي عميل، وسيب رقم تليفون بديل في الصفحة.

مراجع إضافية: How to use click to chat — WhatsApp Help Center

مرجع المقال (بالإنجليزية): Connecting a WordPress booking form to WhatsApp, step by step
المقال ده مش ترجمة حرفية: متكيّف للقارئ العربي ومضاف عليه سياق ووردبريس وElementor وJetEngine.