كيفية التعامل مع نماذج Webflow دون الحاجة إلى backend مخصص

نموذج التواصل في Webflow يبدو رائعاً من البداية، لكن المنصة لا تفعل أكثر من إرسال بيانات الإرسال إلى بريدك الإلكتروني - فهي لا تحفظ البيانات في قاعدة بيانات، ولا تربطها بنظام إدارة علاقات العملاء (CRM)، ولا تُشغّل أي منطق مخصص. إذا كنت تحتاج أكثر من مجرد إشعار بريدي بسيط، فعليك توجيه إرسالات نماذج Webflow عبر خدمة خارجية. والخبر الجيد أن هذا ممكن دون كتابة سطر واحد من كود الخادم.

ما الذي يوفره Webflow افتراضياً

معالج النماذج المدمج في Webflow يؤدي ثلاثة أشياء فقط: يرسل إشعاراً بالبريد الإلكتروني لصاحب الموقع، ويعرض رسالة نجاح، ويسجّل الإرسالات في لوحة تحكم Webflow (في الخطط المدفوعة). هذا يكفي لنماذج التواصل البسيطة في المواقع الصغيرة، لكنه يقصر بسرعة حين تحتاج إلى أي مما يلي:

• ردود تلقائية على الشخص الذي أرسل النموذج
• توجيه الإرسالات إلى صندوق بريد فريق معين أو نظام CRM
• منطق شرطي (مثل توجيه العملاء المحتملين حسب اهتمامهم بالمنتج)
• تصفية البريد المزعج بما يتجاوز حقل honeypot البسيط في Webflow
• سجل تسليم موثوق مع طوابع زمنية وإعادة محاولة عند الفشل

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

التكاملات الأصلية - Zapier و Make

يتكامل Webflow مباشرةً مع Zapier و Make (المعروف سابقاً بـ Integromat). عند وصول إرسال جديد للنموذج، يُطلق المشغّل (trigger) ويمكنك ربطه بأي إجراء: إضافة صف في Google Sheets، إنشاء جهة اتصال في HubSpot، إرسال رسالة على Slack، وغير ذلك.

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

1. في Webflow، اذهب إلى إعدادات المشروع > التكاملات وقم بربط حساب Zapier الخاص بك.
2. في Zapier، أنشئ Zap جديداً باستخدام Webflow - New Form Submission كمشغّل.
3. اختر النموذج المحدد باسمه.
4. أضف خطوة الإجراء (Gmail أو Slack أو Airtable وغيرها).
5. اختبر بإرسال حقيقي ثم شغّل Zap.

Make أرخص للسير العمل المعقدة، لكن كلتا المنصتين تضيفان تبعية خارجية: إذا تعطّل Zapier أو Make أو تجاوز حسابك الحد المسموح، ستفشل الإرسالات بصمت أو تتراكم في قائمة الانتظار.

استخدام Webhook في Webflow

يُعدّ webhook في Webflow مساراً أكثر مباشرة. فعند كل إرسال لنموذج، يُرسل Webflow طلب HTTP POST إلى URL تحدده أنت. أنت من يتحكم في endpoint المستقبِل، مما يتيح لك فعل أي شيء بالـ payload.

لإعداده:

1. اذهب إلى إعدادات المشروع > التكاملات > Webhooks في Webflow.
2. انقر على إضافة Webhook واختر مشغّل Form Submission .
3. الصق رابط endpoint الخاص بخدمتك المستقبِلة.
4. احفظ واختبر بإرسال حقيقي.

الـ payload الذي يرسله Webflow هو كائن JSON يحتوي على جميع قيم الحقول واسم النموذج وبيانات الموقع. مثال على payload نموذجي:

{
  "name": "Contact Form",
  "site": "my-webflow-site",
  "data": {
    "Name": "Jane Smith",
    "Email": "[email protected]",
    "Message": "Hi, I'd like a quote."
  },
  "submittedAt": "2024-11-15T10:22:00Z"
}

المشكلة هنا أنك تحتاج إلى شيء يستقبل هذا الـ webhook. الخيارات تشمل Cloudflare Worker صغير، أو سير عمل على Pipedream، أو خلفية نماذج متخصصة. كتابة المستقبِل الخاص بك هو تماماً مشكلة "الخادم المخصص" التي يسعى هذا المقال لمساعدتك على تجنبها. وهنا تصبح خدمات form-to-email الحل الأنظف.

استبدال endpoint النموذج بخدمة متخصصة

بدلاً من استخدام معالج النماذج في Webflow كلياً، يمكنك توجيه خاصية action في نموذجك نحو خدمة نماذج خارجية. تستقبل الخدمة طلب POST، تتحقق منه، تصفّي البريد المزعج، وترسل لك النتائج بالبريد الإلكتروني. لا حاجة لأي خادم خلفي من جانبك.

خطوات العمل في Webflow:

1. في Webflow Designer، اختر عنصر النموذج.
2. في لوحة إعدادات النموذج ، اضبط حقل Action على رابط endpoint الخاص بخدمة النماذج (مثل https://sendform.net/!your-form-id ).
3. اضبط Method على POST .
4. تأكد من أن كل حقل إدخال يحتوي على خاصية name - يضبطها Webflow تلقائياً.
5. انشر الموقع واختبر إرسالاً.

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

هذا النمط يعمل مع أي موقع ثابت أو موقع بدون كود. إذا كنت تستضيف موقعك على GitHub Pages أو Cloudflare Pages أيضاً، فمقال استضافة موقع ثابت مجاناً مع نماذج تواصل تعمل بشكل كامل يغطي نفس النهج بالتفصيل.

Sendform مقارنةً بالبدائل

هناك عدة خدمات نماذج تعمل مع Webflow. إليك مقارنة بين الخيارات الرئيسية على المعايير التي تهم فعلاً عند إعداد نموذج تواصل:

يتميز Sendform بأسباب ملموسة تتجاوز ما تعرضه الجداول:

• إعداد فوري بدون عوائق: تحصل على رابط endpoint للنموذج دون الحاجة لإنشاء حساب مسبقاً. الصقه في حقل Action في Webflow وانتهيت.
• لا تخزين للإرسالات افتراضياً: يرسل Sendform البيانات بالبريد الإلكتروني دون الاحتفاظ بها على خوادمه، وهو الإعداد الصحيح للامتثال لـ GDPR. المنافسون كـ Formspree يخزّنون جميع الإرسالات في لوحة تحكمهم، مما يعني أن بيانات مستخدميك تبقى على خادم طرف ثالث إلى أجل غير مسمى.
• مناسب للمطورين وسهل للمستخدمين بدون كود: على عكس Zapier، لا يوجد سير عمل للصيانة. وعلى عكس Netlify Forms، لا يرتبط بمزود استضافة محدد - يعمل مع Webflow و GitHub Pages وأي استضافة أخرى.
• خطة مجانية شفافة: لا توجد قيود مخفية من نوع "ترقّ للخطة المدفوعة لتفعيل إعادة التوجيه" التي تستخدمها خدمات أخرى لدفعك نحو الاشتراك.

أي خيار يناسبك؟

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

• إشعارات بريد إلكتروني فقط: استخدم Sendform. الصق رابط endpoint في حقل Action في Webflow وانتهيت في دقيقتين.
• بريد إلكتروني + مزامنة مع CRM أو جداول بيانات: استخدم Sendform لتسليم البريد الإلكتروني وأضف خطوة Zapier مُشغَّلة بالبريد الوارد، أو استخدم مخرج webhook من Sendform إن كان متاحاً في خطتك.
• أتمتة معقدة متعددة الخطوات: webhook من Webflow إلى Make أو Zapier منطقي هنا، لكن خصّص ميزانية للخطة المدفوعة.
• أنت بالفعل على Netlify: Netlify Forms مناسب للحالات البسيطة، لكنك ستصطدم بسقف 100 إرسال شهرياً بسرعة على أي موقع نشط.

لغالبية نماذج التواصل في Webflow - حقل اسم وبريد إلكتروني ورسالة تحتاج أن تصل إلى صندوق بريدك بشكل موثوق - يُعدّ Sendform الخيار الأسرع والأنظف. لا خادم خلفي، ولا حدود شهرية للمهام تراقبها، ولا بيانات إرسال تجلس في لوحة تحكم طرف ثالث نسيت حذفها.

تعامل مع نموذج تواصل Webflow دون كتابة أي كود خلفي

يمنحك Sendform endpoint جاهزاً للنموذج يمكنك لصقه مباشرةً في حقل Action في Webflow - تصلك إرسالات نموذجك فوراً في صندوق بريدك، مع تصفية البريد المزعج وإعدادات متوافقة مع GDPR من البداية.

جرّب Sendform مجاناً ←