كيف تضيف نموذج اتصال إلى موقعك (يصلك فعلاً)

لإضافة نموذج اتصال يعمل، ابنِ نموذجاً قصيراً (الاسم، والبريد الإلكتروني، والرسالة)، وأرسله إلى مسار على الخادم يتحقق من المدخلات، ثم يحفظ الرسالة في قاعدة بيانات، ثم يرسل لك إشعاراً بالبريد عبر مزود بريد باستخدام مفتاح API سري. أضف حقلاً مخفياً كـ honeypot وتحديداً لمعدل الطلبات لإيقاف معظم الرسائل المزعجة، واعرض رسالة نجاح واضحة، واختبره من البداية إلى النهاية على الموقع المنشور. الحفظ قبل إرسال البريد هو الجزء المهم: إذا فشل البريد يوماً ما، ستبقى الرسالة محفوظة لديك.

خياراتك

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

ما الذي يتضمنه نموذج اتصال جيد

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

أمثلة على التعليمات

النموذج الأساسي:

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

إشعارات البريد:

عند حفظ رسالة اتصال، أرسل لي إشعاراً بالبريد على hello@example.com باستخدام Resend مع المفتاح الموجود في RESEND_API_KEY. اضبط عنوان الرد (reply-to) على بريد المرسل حتى أستطيع الرد مباشرة. إذا فشل الإرسال، احتفظ بالرسالة المحفوظة وسجّل الخطأ دون كشف المفتاح.

الحماية من الرسائل المزعجة:

أضف حماية من الرسائل المزعجة إلى نموذج الاتصال: حقل مخفي كـ honeypot يجب أن يبقى فارغاً، وحد أقصى 5 إرسالات لكل عنوان IP في الساعة على الخادم، ورفض الرسائل التي تحتوي أكثر من 3 روابط. تجاهل إرسالات honeypot بصمت مع إظهار رسالة النجاح.

صندوق الوارد:

أضف صفحة إدارة محمية بكلمة مرور تعرض رسائل الاتصال الأحدث أولاً، مع خانة "تمت المعالجة" وفلتر للرسائل غير المعالجة.

خطوة بخطوة

1. حدّد أين تذهب الرسائل: من يستلم الإشعارات، ومن يرد.
2. ابنِ النموذج بالحقول أعلاه، وتسميات قابلة للوصول، وحقول مناسبة للهاتف (استخدم نوع حقل البريد الإلكتروني حتى تظهر لوحة المفاتيح الصحيحة على الهواتف).
3. أنشئ مسار الخادم. يتحقق من الحقول المطلوبة وصيغة البريد وحدود الطول. لا تثق أبداً بالتحقق الذي يتم في المتصفح فقط.
4. احفظ في قاعدة البيانات أولاً. انظر كيف تضيف قاعدة بيانات إلى تطبيقك.
5. أعدّ مزود بريد. أنشئ حساباً، وتحقق من نطاق الإرسال، وخزّن مفتاح API كقيمة سرّية. يغطي كيف ترسل رسائل البريد من تطبيقك إعداد النطاق (SPF وDKIM) بالتفصيل.
6. أرسل الإشعار من الخادم بعد الحفظ. استخدم نطاقك المتحقق منه كمرسل، وبريد الزائر كعنوان رد (reply-to)، ولا ترسل "من" بريد الزائر، فغالباً سيُرفض ذلك كانتحال.
7. يمكنك اختيارياً إرسال رد تلقائي للزائر، لكن اجعله قصيراً؛ فالردود التلقائية إلى عناوين المزعجين قد تضر بسمعة مرسلك.
8. أضف الحماية من الرسائل المزعجة: honeypot، ثم تحديد معدل الطلبات، ثم تحقق من نوع CAPTCHA إذا لزم الأمر.
9. اختبر على الموقع المنشور: أرسل، وتحقق من قاعدة البيانات، وتحقق من صندوق الوارد ومجلد الرسائل المزعجة، واضغط على الرد.

إيقاف الرسائل المزعجة

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

1. حقل honeypot. حقل مخفي عن البشر؛ الروبوتات تملؤه. لا يكلّف الزوار الحقيقيين شيئاً.
2. تحديد معدل الطلبات على الخادم. يحدّ عدد الرسائل التي يمكن لعنوان واحد إرسالها في فترة معينة.
3. قواعد للمحتوى. ارفض الرسائل المحشوّة بالروابط، أو التي يكون حقل الرسالة فيها فارغاً أو طويلاً بشكل غير معقول.
4. تحقق من نوع CAPTCHA، مثل Cloudflare Turnstile أو Google reCAPTCHA. يجب التحقق من الرمز على خادمك؛ والتحقق الذي يعمل في المتصفح فقط يمكن تجاوزه.

أخطاء شائعة

• عرض "تم الإرسال!" بينما لم يُرسل شيء. الواجهة تُظهر النجاح قبل رد الخادم أو بغض النظر عنه. انتظر دائماً رد الخادم.
• البريد فقط دون قاعدة بيانات. مفتاح مُعدّ بشكل خاطئ واحد، وتختفي الاستفسارات لأسابيع دون أن ينتبه أحد.
• مفتاح API في كود الواجهة الأمامية. أي شخص يستطيع استخدامه لإرسال البريد باسمك.
• نطاق إرسال غير متحقق منه. الإشعارات تصل إلى مجلد الرسائل المزعجة أو لا تصل أبداً.
• الإرسال "من" بريد الزائر. استخدم عنوان الرد (reply-to) بدلاً من ذلك.
• عدم وجود حدود للطول. الروبوتات تلصق كتلاً ضخمة من النص.
• عدم اختبار الموقع الحي أبداً. المفاتيح والنطاقات غالباً تختلف بين المعاينة والإنتاج.

قائمة التحقق

• نموذج قصير بتسميات مرئية وأخطاء واضحة
• تحقق على الخادم وحدود للطول
• كل رسالة محفوظة في قاعدة البيانات
• إشعار البريد مرسل من نطاق متحقق منه، مع ضبط عنوان الرد
• مفتاح API للبريد مخزّن في أسرار الخادم فقط
• honeypot وتحديد معدل الطلبات مفعّلان
• رسالة النجاح تظهر فقط بعد تأكيد الخادم
• ملاحظة الخصوصية تشير إلى سياسة الخصوصية
• تم الاختبار من البداية إلى النهاية على الموقع المنشور، بما في ذلك مجلد الرسائل المزعجة

نماذج الاتصال في Mythex

في Mythex يمكنك بناء كل ذلك من الدردشة. اطلب النموذج وقاعدة البيانات في التعليمة نفسها (أو اكتب /database) حتى تبقى الإرساليات محفوظة. لا يملك Mythex منتجاً مدمجاً لإرسال البريد، لذا للإشعارات أحضر مزوداً مثل Resend أو SendGrid أو Postmark، وأضف مفتاحه عبر /secrets أو إعدادات المشروع، واطلب من الوكيل الإرسال من الخادم، انظر إرسال البريد من تطبيقك. قبل أن تعتمد عليه، شغّل اختبار التطبيق (/test) على النموذج في المعاينة، ثم انشر واختبر على الرابط المباشر.

نموذج الاتصال جزء أساسي من معظم مواقع الأعمال الصغيرة وصفحات الهبوط. راجع قائمة التحقق الأمنية قبل الإطلاق.

الأسئلة