التصدير إلى React

يمكن لـ NueForm تصدير أي نموذج كملف مكون React مستقل. بدلاً من تضمين iframe، تحصل على مكون React حقيقي يحتوي على بيانات نموذجك ومحرك العرض وجميع مكونات الحقول في ملف واحد. ضعه في تطبيق React الخاص بك ويعمل مباشرة.

ما يتم تصديره

عند تصدير نموذج، ينشئ NueForm ملف TypeScript واحد (.tsx) يحتوي على:

• بيانات نموذجك --- جميع الأسئلة والخصائص والخيارات والقفزات المنطقية والمتغيرات وإعدادات السمة مضمنة كثابت.
• محرك عرض النموذج --- محرك عرض NueForm الكامل، بما في ذلك التنقل وتتبع التقدم والرسوم المتحركة واختصارات لوحة المفاتيح.
• جميع مكونات الحقول المطلوبة --- يتم تضمين مكونات الحقول المستخدمة في نموذجك فقط (مثلاً إذا لم يكن في نموذجك أسئلة تقييم، يتم حذف مكون حقل التقييم).
• الدوال المساعدة --- تقييم القفزات المنطقية واستيفاء المتغيرات وتسجيل نقاط الاختبار إن وُجد.

الملف المُصدّر مستقل --- ليس له اعتماد على خوادم أو واجهة NueForm البرمجية. يعمل نموذجك بالكامل على جانب العميل.

كيفية التصدير

من لوحة التحكم

1. افتح نموذجك في منشئ NueForm.
2. انقر على زر تصدير في شريط الأدوات العلوي.
3. ستقوم نافذة التصدير بإنشاء مكونك.
4. انقر على نسخ إلى الحافظة أو تنزيل للحصول على الملف.

من الواجهة البرمجية

curl "https://app.nueform.com/api/forms/FORM_ID/export?lang=tsx&obfuscate=true" \
  -H "Authorization: Bearer nf_your_api_key" \
  -o MyForm.tsx

معاملات الاستعلام:

استخدام المكون المُصدّر

الخطوة 1: إضافة الملف إلى مشروعك

ضع الملف المُنزّل في مجلد المكونات:

src/
  components/
    CustomerFeedbackForm.tsx    <-- Your exported form
    ...

الخطوة 2: تثبيت الاعتماديات المطلوبة

يسرد المكون المُصدّر اعتمادياته. قم بتثبيتها:

npm install react react-dom

بعض أنواع الأسئلة تتطلب اعتماديات إضافية:

تعرض نافذة التصدير الاعتماديات الدقيقة المطلوبة لنموذجك المحدد.

الخطوة 3: الاستيراد والعرض

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

export default function FeedbackPage() {
  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <CustomerFeedbackForm />
    </div>
  );
}

يعرض المكون تجربة نموذج بملء الشاشة بشكل افتراضي.

الخطوة 4: معالجة الإرسالات

النموذج المُصدّر يُعرض بالكامل على جانب العميل. بشكل افتراضي، يعرض شاشة الشكر عند الإكمال لكنه لا يرسل البيانات إلى أي مكان. تحتاج إلى إضافة معالج إرسال خاص بك.

يقبل المكون دالة استدعاء onSubmit:

import CustomerFeedbackForm from './components/CustomerFeedbackForm';

export default function FeedbackPage() {
  const handleSubmit = async (answers: Array<{ questionId: string; value: unknown }>) => {
    // Send answers to your backend
    await fetch('/api/feedback', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ answers }),
    });
  };

  return (
    <div style={{ width: '100%', height: '100vh' }}>
      <CustomerFeedbackForm onSubmit={handleSubmit} />
    </div>
  );
}

تخصيص النماذج المُصدّرة

لأن التصدير هو ملف مكون React قياسي، يمكنك تخصيصه بعدة طرق:

تجاوزات السمة

سمة النموذج (الألوان والخطوط والأحجام) مضمنة في البيانات المُصدّرة. يمكنك تعديل هذه القيم مباشرة في الملف المُصدّر:

// Inside the exported file, find the form data constant:
const FORM_DATA = {
  themeColor: '#6366f1',        // Change this
  backgroundColor: '#0a0a0a',   // Change this
  textColor: '#ffffff',          // Change this
  // ...
};

تخصيص CSS

يستخدم المكون المُصدّر أسماء فئات CSS مسبوقة بـ fc- (مكون النموذج). يمكنك تجاوز الأنماط في CSS الخاص بك:

/* Override question title styling */
.fc-question-title {
  font-size: 2rem;
  font-weight: 700;
}

/* Override button styling */
.fc-submit-button {
  background-color: #10b981;
  border-radius: 12px;
}

إضافة منطق مخصص

يمكنك تعديل الملف المُصدّر لإضافة سلوك مخصص:

• إضافة قواعد تحقق تتجاوز ما يدعمه NueForm.
• التكامل مع إدارة حالة تطبيقك (Redux أو Zustand وغيرها).
• إضافة تتبع تحليلات مخصص لأسئلة محددة.
• ملء الإجابات مسبقًا من بيانات مستخدم تطبيقك.

حماية الكود

تتضمن المكونات المُصدّرة حماية الكود بشكل افتراضي (معامل obfuscate=true). هذا يُصغّر أسماء المتغيرات وتفاصيل التنفيذ الداخلية مع الحفاظ على وظائف المكون بالكامل.

حماية الكود:

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

للتصدير بدون حماية الكود (لتسهيل التصحيح)، اضبط obfuscate=false:

curl "https://app.nueform.com/api/forms/FORM_ID/export?lang=tsx&obfuscate=false" \
  -H "Authorization: Bearer nf_your_api_key"

أنواع الأسئلة المدعومة

أنواع الأسئلة التالية مدعومة في تصديرات React:

القيود

• رفع الملفات --- يتضمن النموذج المُصدّر واجهة رفع الملفات، لكنك تحتاج إلى توفير نقطة نهاية رفع خاصة بك لأنه لا يمكنه استخدام تخزين NueForm.
• التسجيل --- تسجيل الفيديو/الصوت يعتمد على واجهات المتصفح البرمجية وقد يتطلب إعدادًا إضافيًا للتخزين.
• الدفع --- أسئلة الدفع غير مضمنة في تصديرات React لأنها تتطلب تكامل Stripe على جانب الخادم.
• ميزات جانب الخادم --- الميزات التي تعتمد على خادم NueForm الخلفي (webhooks والتحليلات وتخزين الردود) غير متاحة في النماذج المُصدّرة. يجب تنفيذها في الخادم الخلفي الخاص بك.
• التحديثات --- النماذج المُصدّرة هي لقطات ثابتة. إذا قمت بتحديث النموذج في NueForm، تحتاج إلى إعادة التصدير واستبدال الملف.

أفضل الممارسات

1. اغلف ولا تعدّل. أنشئ مكون غلاف حول النموذج المُصدّر لتخصيصاتك. بهذه الطريقة، لا تكتب إعادة التصدير فوق منطقك المخصص.

2. عالج الإرسالات على جانب الخادم. أرسل دائمًا بيانات النموذج إلى الخادم الخلفي الخاص بك للتحقق والتخزين. لا تعتمد أبدًا على إرسالات النماذج على جانب العميل فقط.

3. أدر إصدارات تصديراتك. تتبع أي إصدار من النموذج قمت بتصديره، حتى تتمكن بسهولة من إعادة التصدير ومقارنة التغييرات.

4. اختبر بعد التصدير. اختبر دائمًا النموذج المُصدّر في تطبيقك المستهدف قبل النشر للإنتاج.

ذو صلة

• السمات والتنسيق --- تخصيص مظهر النموذج قبل التصدير
• CSS مخصص --- تخصيص CSS متقدم
• تضمين النماذج --- تضمين بديل عبر iframe (لا يتطلب خطة Pro)