اجعل النموذج المولّد بالذكاء الاصطناعي يرسل البيانات فعلاً

لماذا لا يرسل النموذج المولّد شيئاً

تولّد Lovable وBolt وv0 وCursor واجهات جيدة: حقول وتحقق وزر ورسالة «شكراً!». لكن الزر افتراضياً غالباً لا يفعل شيئاً: يعرض المعالج الشكر فوراً دون أي طلب شبكة، فلا تُحفظ البيانات في أي مكان.

النمط الآخر أن تربط الأداة Supabase أو Lovable Cloud بنفسها. يعمل هذا، لكنه يجرّ إلى نموذج تواصل بسيط قاعدة بيانات وإعداد صلاحيات وغالباً خدمة بريد منفصلة مثل Resend.

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

ثلاثة مسارات عملية للنموذج

1. البنية الخلفية للأداة. Lovable Cloud أو Supabase مع وصل بريد. منطقية إذا كان تطبيقك يستخدمها بالفعل للمصادقة أو بيانات أخرى، لكنها بنية زائدة لنموذج تواصل منعزل.

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

3. دالة serverless خاصة. تحكم كامل ومسؤولية كاملة: الكود والأسرار وفلترة البريد المزعج وإعادة المحاولات عليك. مبررة عندما يكون النموذج جزءاً من منطق أعقد.

هذا المقال عن المسار الثاني، وهو يعمل بالطريقة نفسها في أي أداة تولّد HTML أو React.

معايير اختيار خدمة استقبال النماذج

دليل على الوصول. كلمة «شكراً» لا تثبت شيئاً. تحتاج مخزناً للرسائل بحالات: مقبولة، مسلّمة، بريد مزعج. في Formgong هذا صندوق رسائل بتفاصيل التسليم لكل قناة.

حماية من البريد المزعج. حقل خفي كحد أدنى، ويفضل وجود Turnstile اختياري وتقييم للرسائل المشبوهة، وألا يستهلك البريد المزعج حصتك الشهرية.

قنوات التنبيه. البريد أساس، وتليجرام لسرعة الفريق، وwebhooks موقعة للتكاملات.

مكان البيانات. إن كان عملاؤك في الاتحاد الأوروبي فتحقق من مكان الحفظ الفعلي. Formgong يحفظ كل شيء في Cloudflare ضمن نطاق الاتحاد الأوروبي: قاعدة D1 والطابور والملفات.

تعديل دون إعادة توليد. المستلمون والتحويلات والرد الآلي تتغير من لوحة التحكم، لا في كود يعيد الذكاء الاصطناعي توليده.

طلب واحد يناسب أي أداة بناء

افتح محادثة مشروعك في الأداة واطلب ربط النموذج الموجود مع الحفاظ على التصميم وأسماء الحقول. الطلب المعروض أسفل هذا القسم يناسب Lovable وBolt وv0 وCursor؛ استبدل fk_your_access_key بالمفتاح من لوحة تحكم Formgong، قسم ربط الموقع للنموذج المطلوب.

Connect this form to Formgong. Keep its design and field names.
1. Send a POST request to https://formgong.com/submit (FormData or JSON with access_key).
2. access_key: fk_your_access_key (a public key; it can stay in the code).
3. Show success only after a response with success: true.
4. On error, keep the entered field values and show an error message.
5. Add a hidden botcheck field (honeypot) with no visible UI change.
6. Do not add tokens, secrets, or file inputs.

async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    // _lang: language of Formgong messages and the autoreply (multilingual site: document.documentElement.lang).
    body: JSON.stringify({ _lang: "en", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Could not send. Please try again.");
  return result.message; // localized "Sent. Thank you!"
}

اختبر الوصول لا رسالة النجاح

بعد أن تطبق الأداة التغييرات، أرسل رسالة اختبار مميزة واتبع الطريق كاملاً:

1. الطلب. يظهر في Network طلب POST إلى https://formgong.com/submit وردّ فيه success: true.
2. السجل. تظهر الرسالة في صندوق النموذج في Formgong بكل حقولها.
3. البريد. في Free يصل البريد في ملخص صباح اليوم التالي الساعة 08:00 بتوقيت صاحب الحساب، لمستلم واحد. في Pro وBusiness تُرسل كل رسالة بريداً منفصلاً. افحص مجلد البريد غير المرغوب فيه.
4. تليجرام. تليجرام فوري في كل الخطط، بما فيها Free. إن وُجدت محادثة مرتبطة، تصل الرسالة إليها.

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

بعد الإطلاق: تعديلات دون إعادة توليد

عندما يعمل النموذج، معظم التعديلات لا تحتاج عودة إلى الأداة: المستلمون ومحادثات تليجرام والتحويلات بعد الإرسال والرد الآلي على الزائر والحماية، كلها تتغير من لوحة Formgong.

إذا انقطعت الرسائل بعد redesign، لا تخمّن: ميزة تشخيص النموذج في Formgong تحمّل صفحتك وتظهر هل التركيب صحيح — العنوان والطريقة والمفتاح والحقول المطلوبة.

وتظهر تحليلات النموذج أين يتوقف الزوار عن التعبئة، وهو أرخص من تجربة A/B ولا يحتاج توليد كود جديد.

أخطاء شائعة في نماذج يولدها الذكاء الاصطناعي

يظهر «نجاح» ولا يوجد طلب

ولّدت الأداة معالجاً للزينة. اطلب منها: «أرسل البيانات بـ fetch واعرض النجاح فقط بعد رد success: true».

بقي fk_your_access_key في الكود

هذا مثال للتعبئة. خذ المفتاح الحقيقي من قسم ربط الموقع لنموذجك واستبدله.

تُمسح الحقول بعد الخطأ

يفقد الزائر ما كتبه. يجب أن يحتفظ المعالج بالقيم ويعرض رسالة الخطأ؛ أضف ذلك إلى طلبك التالي.

توقف النموذج بعد تفعيل Turnstile

يجب إضافة المكوّن إلى الكود وإرسال cf-turnstile-response. حدّث مثال الربط من لوحة التحكم بعد تغيير الحماية.

السجل موجود ولا بريد

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