كيف ترسل نماذج Elementor إلى Webhook (n8n أو Make أو أي CRM)

لإرسال نماذج Elementor إلى Webhook، حرّر عنصر Form في Elementor Pro، وافتح Actions After Submit، وأضف Webhook، والصق رابط الجهة التي ستستقبل البيانات: عقدة Webhook في n8n، أو Custom webhook في Make، أو نقطة نهاية خاصة بك. ثم أرسل إدخال اختبار حقيقيًا، وتحقق من الحقول التي وصلت، واربطها بحقول CRM لديك. ومعظم العمل الحقيقي في هذا الجزء الأخير: أن تعرف ما الذي يصل، وأن تُبقي نقطة الاستقبال سرية، وألا تخسر عميلًا محتملًا عندما يتعطل المستقبِل.

يأخذك هذا الدليل خلال الإعداد الكامل مع n8n كمستقبِل، ثم يغطي Make، والإرسال المباشر إلى CRM، والأمان، والأعطال.

ما هو الـ Webhook، وكيف يختلف عن الـ API

الـ Webhook رابط يستدعيه نظام ما تلقائيًا عند وقوع حدث معين، ويرسل معه بيانات الحدث. فعندما يرسل زائر نموذج Elementor لديك، يرسل WordPress طلب HTTP إلى رابط الـ Webhook يحمل الحقول المرسلة. لا يحتاج أحد إلى طلب البيانات، فهي تُدفع لحظة وقوع الحدث.

أما الـ API فتعمل بالعكس. على أداة الأتمتة لديك أن تستدعي الـ API وتطلب السجلات الجديدة، وعادة وفق جدول زمني. عمليًا:

• Webhook (دفع): فوري، وطلب واحد لكل حدث، ودون استطلاع دوري. والمرسِل هو من يقرر ما يرسله.
• API (سحب): أنت تقرر ما تجلبه ومتى، لكنك تحتاج إلى بيانات اعتماد، والاستطلاع الدوري يضيف تأخيرًا.

في نماذج العملاء المحتملين، الدفع هو ما تريده. يجب أن يصل العميل الجديد إلى CRM أو إلى واتساب فريق المبيعات خلال ثوانٍ، لا في دورة الاستطلاع التالية. وهو أيضًا من أبسط الطرق للتخلص من موصل مدفوع. فإذا كان مشغّل نماذج Zapier بندًا كبيرًا في فاتورتك، فإن الـ Webhook غالبًا مسار أرخص من مشغّل Zapier المدفوع.

قبل أن تضيف الـ Webhook

أربعة أمور توفر عليك الوقت لاحقًا:

1. تحقق من باقة Elementor لديك. عنصر Form جزء من Elementor Pro. وحتى أكتوبر 2026، يقول مركز مساعدة Elementor إن تكاملات النماذج متاحة فقط في باقات Advanced للإضافة وما فوقها (وفي بعض باقات Elementor Hosting). راجع ملاحظات Elementor حول التكاملات قبل أن تبني خطتك عليها.
2. أعطِ كل حقل معرّفًا واضحًا. في محرر النموذج، افتح تبويب Advanced لكل حقل واضبط معرّفًا مثل name أو whatsapp أو email. المعرّفات المقروءة تجعل الربط في n8n واضحًا، وتصمد أمام تغيير التسميات الظاهرة.
3. حدّد ما يُسمح لك بإرساله. أنت تنقل بيانات شخصية إلى نظام آخر. تأكد من أن إشعار الخصوصية وصياغة الموافقة لديك يغطيان الوجهة.
4. لا تمسّ التتبع. الـ Webhook ينقل البيانات ولا يقيس التحويلات. وإذا كان النموذج يغذّي GA4 أو Google Ads أيضًا، فأبقِ تتبع التحويلات على النموذج نفسه واختبر الاثنين بعد أي تغيير.

خطوة بخطوة: من نموذج Elementor إلى n8n

1. أنشئ عقدة Webhook في n8n

أنشئ سير عمل جديدًا وأضف عقدة تشغيل من نوع Webhook. اضبط HTTP Method على POST، لأن إرسال النموذج يرسل بيانات ولا يطلبها. استبدل المسار العشوائي بمسار مقروء لكن يصعب تخمينه، مثل lead-intake-7f3k9q. واترك Respond على Immediately حاليًا. تعرض العقدة رابطين في أعلاها: رابط اختبار ورابط إنتاج. انسخ رابط الاختبار.

ووفقًا لـ توثيق عقدة Webhook في n8n، لا يستمع رابط الاختبار إلا أثناء نقرك على Listen for test event، ولا يعمل رابط الإنتاج إلا بعد نشر سير العمل. والخلط بينهما سبب معظم مشكلات “لا شيء يصل”.

2. أضف إجراء Webhook في Elementor

1. حرّر الصفحة في Elementor واختر عنصر Form.
2. في Actions After Submit، أضف Webhook. وأبقِ أي إجراءات تستخدمها حاليًا، مثل Email أو Collect Submissions.
3. افتح قسم Webhook الجديد والصق رابط اختبار n8n.
4. حدّث الصفحة.

يدرج Elementor إجراء Webhook ضمن إجراءات ما بعد الإرسال الأخرى. ويعمل الإجراء مع كل إرسال لذلك النموذج.

3. أرسل اختبارًا واقرأ ما يصل

في n8n، انقر Listen for test event. افتح الصفحة الحية (لا معاينة المحرر)، واملأ النموذج ببيانات اختبار واقعية، وأرسله. يجب أن تعرض عقدة Webhook عنصرًا واحدًا يحتوي على headers و params و query و body.

انظر جيدًا إلى body. هذه هي الحمولة، وهي المرجع الموثوق الوحيد لأسماء الحقول، لأن توثيق Elementor لا يوضح شكلها الدقيق. لاحظ كيف تُسمّى مفاتيح كل حقل، وهل تُضمَّن الحقول الفارغة، وما المعلومات الإضافية التي تصل مع الإرسال. وابنِ بقية سير العمل على ما تراه هنا، لا على ما تتوقعه.

4. اربط الحقول وأرسلها إلى وجهتها

أضف عقدة Edit Fields (Set) مباشرة بعد المشغّل. أعطِ الحقول أسماء نظيفة وثابتة، مثل name و whatsapp و email و source_page. احذف المسافات الزائدة ووحّد رقم الهاتف بصيغة واحدة. كل عقدة بعد هذه تقرأ من هذه الأسماء النظيفة، فإذا تغيّر النموذج لاحقًا، تصلح عقدة واحدة فقط.

ومن هناك، أرسل العميل المحتمل إلى حيث يجب أن يذهب:

• CRM: استخدم عقدة n8n الخاصة بـ CRM لديك، أو عقدة HTTP Request مع الـ API الخاصة به. ابحث بالبريد أو الهاتف أولًا، وحدّث جهة الاتصال الموجودة بدلًا من إنشاء نسخ مكررة.
• تنبيه الفريق: رسالة إلى Slack أو البريد أو واتساب تحمل بيانات العميل المحتمل ورابطًا إلى سجله في CRM.
• متابعة بالذكاء الاصطناعي: يمكنك إعادة استخدام Webhook n8n نفسه في سير عمل ذكاء اصطناعي يؤهّل العميل المحتمل عبر واتساب.

5. انتقل إلى رابط الإنتاج وانشر

عندما يبدو تشغيل الاختبار سليمًا، انسخ رابط الإنتاج من عقدة Webhook، والصقه في Elementor مكان رابط الاختبار، وحدّث الصفحة، وانشر سير العمل في n8n. أرسل اختبارًا حقيقيًا آخر وتأكد من ظهوره في تبويب Executions لسير العمل. فتشغيلات الإنتاج لا تظهر على لوحة العمل، بل في Executions فقط.

عمليات تسليم العملاء من النماذج إلى CRM كهذه جزء كبير من عملي في التكاملات. واستبدال سلاسل الموصلات الهشة بتكاملات مباشرة هو المجال الذي رأيت فيه نتائج مثل زيادة إيرادات الشركاء بنسبة 15% عبر التكاملات. والنمط واحد في كل مرة: التقط البيانات مرة واحدة، ونظّفها مرة واحدة، ووجّهها إلى كل نظام يحتاجها.

الإرسال إلى Make أو Zapier أو مباشرة إلى CRM

جانب Elementor لا يتغير. الذي يتغير هو رابط الاستقبال فقط.

• Make: ابدأ سيناريو بوحدة Webhooks > Custom webhook، وانسخ رابطها إلى Elementor، وأرسل اختبارًا حتى يتعلم Make بنية البيانات.
• Zapier: يستخدم دليل Elementor نفسه Webhooks by Zapier مع المشغّل Catch Hook. والصق الرابط في حقل Webhook نفسه.
• CRM مباشرة: نادرًا ما ينجح ذلك مع الإجراء المدمج. فمعظم واجهات CRM تتوقع بنية JSON محددة وترويسة مصادقة، وإجراء Webhook لا يتيح ترويسات مخصصة. ضع n8n أو Make في المنتصف، أو أرسل الطلب بنفسك عبر خطّاف PHP صغير.

يملك Elementor Pro خطّافًا موثقًا هو elementor_pro/forms/new_record، يعمل بعد إجراءات النموذج ويحمل السجل كاملًا (راجع خطّافات Forms API في Elementor). وبه تتحكم في الصيغة والترويسات ومعالجة الأخطاء. إليك نسخة مبسطة، توضع في إضافة مخصصة صغيرة أو mu-plugin لا في القالب:

add_action( 'elementor_pro/forms/new_record', function ( $record, $handler ) {
    // Only handle the form named "lead_form" in the widget settings.
    if ( 'lead_form' !== $record->get_form_settings( 'form_name' ) ) {
        return;
    }

    $fields = [];
    foreach ( $record->get( 'fields' ) as $id => $field ) {
        $fields[ $id ] = $field['value'];
    }

    $response = wp_remote_post( 'https://n8n.example.com/webhook/lead-intake', [
        'headers' => [
            'Content-Type'    => 'application/json',
            // Define this constant in wp-config.php, never in the code itself.
            'X-Webhook-Token' => LEAD_WEBHOOK_TOKEN,
        ],
        'body'    => wp_json_encode( $fields ),
        'timeout' => 10,
    ] );

    if ( is_wp_error( $response ) || wp_remote_retrieve_response_code( $response ) >= 300 ) {
        error_log( 'lead_form webhook failed' ); // Log the failure, not the personal data.
    }
}, 10, 2 );

وفي جانب n8n، اضبط مصادقة عقدة Webhook على Header Auth باسم الترويسة والرمز نفسيهما. وبذلك تُرفض الطلبات التي لا تحمل الترويسة الصحيحة.

أبقِ نقطة استقبال الـ Webhook سرية

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

• مسار يستحيل تخمينه. استخدم مسارًا عشوائيًا طويلًا، ولا تلصق الرابط أبدًا في التذاكر أو لقطات الشاشة أو المستودعات العامة. تعامل معه ككلمة مرور.
• قائمة عناوين IP مسموحة. تملك عقدة Webhook في n8n خيار IP(s) Allowlist. أضف عنوان IP الصادر من خادم موقعك، وكل ما عداه سيحصل على 403. يعمل ذلك جيدًا على VPS بعنوان IP ثابت. وتحقق مع مزود الاستضافة في الاستضافة المشتركة أو الموزعة الأحمال.
• Only Run If. يقيّم هذا الخيار في n8n تعبيرًا على الطلب ويتخطى التشغيل إن كانت نتيجته false. وهو مفيد لتصفية الطلبات العشوائية، لكن أي شيء داخل النموذج، مثل حقل مخفي، يظهر في مصدر الصفحة، لذا فهو ليس سرًا.
• مصادقة حقيقية. لأي شيء حساس، استخدم خطّاف PHP أعلاه مع Header Auth أو JWT في جانب n8n.

وتبقى الحماية المعتادة من الرسائل المزعجة في النماذج (honeypot أو reCAPTCHA أو ما يشبهها) مهمة. فالـ Webhook يمرر كل ما يقبله النموذج.

عندما يفشل الـ Webhook، لا تخسر العميل المحتمل

المستقبِلات تتعطل، وتُحدَّث، وتصطدم بحدود معدل الطلبات. خطّط لذلك:

• احتفظ بنسخة في WordPress. أضف إجراء Collect Submissions بجوار Webhook لتُخزَّن كل الإدخالات في شاشة Submissions في Elementor. فإذا فات n8n إدخالٌ ما، تستطيع إيجاده وإعادة إرساله.
• سجّل الاستجابة. يتيح Elementor الخطّاف elementor_pro/forms/webhooks/response مع استجابة الـ Webhook. بضعة أسطر PHP تكفي لتسجيل رموز الحالة الفاشلة، فتعرف أن شيئًا تعطل قبل أن يعرف فريق المبيعات.
• استجب بسرعة. أبقِ عقدة Webhook في n8n على Respond: Immediately حتى لا ينتظر النموذج استدعاءات CRM. ونفّذ العمل الثقيل بعد الاستجابة.
• التقط الأخطاء في n8n. اضبط سير عمل للأخطاء (سير عمل يبدأ بـ Error Trigger) ينبهك عندما يفشل تشغيل عميل محتمل عند خطوة CRM.

إذا لم تكن متأكدًا من أن نماذجك تصل إلى كل نظام يجب أن تصل إليه، يمكنني إلقاء نظرة. فـ مراجعة مجانية لطريقة تسليم نماذجك للعملاء المحتملين جزء من تدقيق MarTech الذي أقدمه.

استكشاف الأخطاء وإصلاحها

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

هل تدعم النسخة المجانية من Elementor الـ Webhooks؟

لا. عنصر Form وإجراء Webhook الخاص به جزء من Elementor Pro، وحتى أكتوبر 2026 يدرج Elementor تكاملات النماذج ضمن باقات Advanced وما فوقها. وفي Elementor المجاني ستحتاج إلى إضافة نماذج منفصلة أو كود مخصص.

ما الفرق بين الـ Webhook والـ API؟

الـ Webhook يدفع البيانات إلى رابط لحظة وقوع الحدث. أما الـ API فتنتظر أن تطلب أنت البيانات. وإرسال النماذج يناسب الـ Webhooks لأن العميل المحتمل يجب أن ينتقل فورًا، دون استطلاع دوري.

هل يمكنني إرسال نموذج Elementor مباشرة إلى CRM؟

فقط إذا كان CRM يقبل الطلب كما يرسله Elementor، دون ترويسة مصادقة. ومعظمها لا يقبل، لذا استخدم n8n أو Make في المنتصف، أو تكاملًا أصليًا في Elementor إن كان CRM لديك يملكه، أو الخطّاف elementor_pro/forms/new_record لإرسال طلب منسق بشكل صحيح ومصادَق عليه.

كيف أؤمّن Webhook في Elementor؟

استخدم مسار Webhook طويلًا وعشوائيًا، وقيّد عقدة Webhook في n8n بعنوان IP لخادمك، وأبقِ الحماية من الرسائل المزعجة على النموذج، وفي التدفقات الحساسة أرسل الطلب من PHP مع ترويسة مصادقة يتحقق منها n8n.

أين يقع هذا من الصورة الكاملة

الـ Webhook حلقة واحدة في السلسلة من الزائر إلى العميل. يجب أيضًا تتبع النموذج، وأن يوجّه CRM العميل المحتمل، وأن يتابعه أحدٌ بسرعة. وإذا أردت فحص السلسلة كاملة، فابدأ بـ قائمة تدقيق MarTech.