تضمين نموذج في موقعك الخاص بالمكوّن المولَّد

النموذج لا يحتاج إلى صفحة من صفحات FormFlow. إذا كان لديك موقع بالفعل، فيمكنك لصق المكوّن المولَّد للنموذج فيه وإبقاء زوارك على صفحاتك أنت. يغطي هذا الدليل النسخ واللصق، وأمرين يفاجئان الناس غالباً بعد ذلك: أين يصل الزائر بعد الضغط على «إرسال»، وماذا يحدث حين تغيّر حقول النموذج لاحقاً. التضمين جزء من FormFlow منذ v1.0.0.

ما تحتاج إليه

نموذج فيه حقل واحد على الأقل، وصفحة خاصة بك يمكنك أن تلصق فيها HTML، أو ملف Blade أو Vue أو React. لا تحتاج إلى صفحة مستضافة، وهي متاحة في الخطة المدفوعة فقط. لا شيء في «الحصول على الكود» يتحقق من خطتك، لذا يمكن لفريق على الخطة المجانية أن يضمّن نموذجاً أيضاً. وتظل حصة الإرسالات في الخطة سارية على ما يستقبله النموذج.

انسخ المكوّن المولَّد

1. افتح النموذج في اللوحة. في ترويسة المحرّر، اضغط «الحصول على الكود». في النموذج الذي لم يستقبل أي إرسال من قبل يكون هذا الزر هو المميَّز. وفي كل نموذج آخر يوجد تحت «الأدوات». وفي قائمة النماذج إجراء «الحصول على الكود» على كل صف أيضاً.

2. عنوان النافذة «مكوّن جاهز للّصق». وسطرها الأول يقرأ "وجّه نموذجك إلى" متبوعاً بوجهة النموذج، وتنتهي بالرمز الخاص بالنموذج. هذه الوجهة هي العنوان الوحيد الذي تحتاجه صفحتك.

3. اختر «النمط». نمط واحد يتحكم في كل التبويبات وفي المعاينة، و«Minimal» هو الافتراضي. يُكتب النمط في النسخة نفسها، فتغيير النمط لاحقاً يعني النسخ من جديد.

4. اختر التبويب المناسب لتقنيتك: HTML أو Blade أو Vue أو React. يرسم تبويب «معاينة» نسخة HTML داخل اللوحة لتتحقق منها قبل أن تلصق أي شيء.

5. اضغط شارة «نسخ إلى الحافظة» في أعلى التبويب، والصق الناتج في صفحتك حيث ينبغي أن يظهر النموذج.

ما الذي تحتويه نسخة HTML

تبويب HTML هو نموذج عادي يرسل إلى وجهة نموذجك. هذه عينة مختصرة لنموذج فيه حقل بريد إلكتروني. يحلّ YOUR_FORM_TOKEN محل الرمز، وفي النسخة الفعلية يأتي أولاً عنصر style يحمل CSS الخاص بالنمط.

<form action="https://formflow.digital/api/v1/f/YOUR_FORM_TOKEN" class="ff-form" lang="en" dir="ltr" method="post">
    <div class="ff-group">
        <label class="ff-label" for="ff-email" dir="auto">Email<span aria-hidden="true"> *</span></label>
        <input class="ff-input" id="ff-email" name="email" type="email" dir="auto" autocomplete="email" required>
    </div>
    <!-- ...one group per field... -->

    <div aria-hidden="true" class="ff-honeypot">
        <label for="ff-ff_xxxxxxxx">Leave this field empty</label>
        <input autocomplete="off" id="ff-ff_xxxxxxxx" name="ff_xxxxxxxx" tabindex="-1" type="text">
    </div>

    <button class="ff-button" type="submit">Send</button>
</form>

جزءان يستحقان كلمة. أسماء الحقول، مثل name="email"، هي ما يظهر إجاباتٍ في إرسالاتك، لذا غيّرها في النموذج لا في صفحتك. أما حقل الإدخال الخارج عن الشاشة فهو فخّ للإزعاج لا يراه الناس وتميل الروبوتات إلى ملئه. يُولَّد اسمه لكل نموذج، وهو معروض هنا بصيغة ff_xxxxxxxx. اتركه في مكانه.

حدّد أين يصل الزوار

نسختا HTML وBlade نموذجان أصليان. حين يضغط أحدهم «إرسال»، يرسل المتصفح إلى FormFlow ويعرض أي رد يجيب به FormFlow. وبلا توجيه، يكون هذا الرد رسالة JSON قصيرة. إنها دقيقة، لكنها ليست ما تريد أن يقرأه الزائر. وتقول اللوحة الشيء نفسه بجوار الإعداد: "سيصل مُرسِلو نموذج HTML العادي إلى استجابة JSON خام."

1. في محرّر النموذج، افتح تبويب «التسليم».

2. ضمن «أين يصل المُرسِل بعد الإرسال»، املأ «توجيه المُرسِلين إلى» بصفحة شكر على موقعك. ويجب أن يكون عنوان http أو https.

3. احفظ النموذج.

نسختا React وVue تعملان بشكل مختلف. فهما ترسلان في الخلفية وتعرضان رسالة التأكيد الخاصة بهما في مكانها، لذا لا يهم التوجيه إلا في HTML وBlade.

حدّد من أين يجوز أن تأتي الإرسالات

افتراضياً يقبل النموذج إرسالاً من أي مصدر. في تبويب «الأمان»، ضمن «من أين يُسمح بوصول الإرسالات»، يقبل «المصادر المسموح بها» أسماء النطاقات فقط، دون بروتوكول أو مسار. ونص المساعدة فيه يقول إن القائمة الفارغة تسمح بأي مصدر. أضف اسم نطاق موقعك، مثل example.com، فتُرفض الإرسالات القادمة من مصادر أخرى. والمفتاح تحته، «رفض الإرسالات التي لا تحمل ترويسة Origin»، يرفض أيضاً الإرسالات التي لا تحمل أي مصدر أصلاً.

إذا رُفض إرسال تجريبي من صفحتك، فالسبب المعتاد اسم نطاق مكتوب خطأً. يحتفظ FormFlow بالإرسالات المرفوضة التي يمكنك التصرف بشأنها، فأصلح القائمة ثم انظر تحت «مرفوض» في اللوحة لاسترجاعها.

Turnstile وسياسة أمان المحتوى

أمران آخران ينطبقان فقط إن استخدمتهما. الأول مفتاح «اشتراط تحدّي Turnstile» في تبويب «الأمان». مفتاح Turnstile المدمج في FormFlow يغطي الصفحات التي يقدّمها FormFlow فقط، لذا تحتاج على موقعك إلى مفتاح Cloudflare Turnstile خاص بك، يُدخَل في «إعدادات الفريق». وبدونه تحمل النسخة العنصر النائب YOUR_TURNSTILE_SITE_KEY ويُصنَّف كل إرسال من صفحتك على أنه إزعاج.

والثاني: إن كان موقعك يرسل سياسة أمان المحتوى، فإن «الحصول على الكود» يطبع التوجيهات التي ينبغي إضافتها، في السطر الذي يبدأ بـ "إن كان موقعك يستخدم سياسة أمان المحتوى (CSP)". وللنسخة العادية هي script-src يسمح بـ 'self' وchallenges.cloudflare.com، وframe-src لـ challenges.cloudflare.com، وconnect-src لمصدر وجهة نموذجك. انسخ السطر من النافذة لا من هنا، لأنه مبني لنموذجك.

تحقّق من أنه يعمل

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

2. تأكد من أنك تصل إلى حيث تتوقع: صفحة الشكر، أو رسالة التأكيد في نسخة React أو Vue.

3. افتح «الإرسالات» في اللوحة وابحث عن الإدخال. وإن كان غائباً، فتحقق من «مرفوض» قبل أن تغيّر أي شيء.

حدود ينبغي أن تعرفها

• النسخة الملصوقة لا تتبع التغييرات اللاحقة في حقول النموذج، إلا إذا استخدمت «العرض المباشر» أو نسخت من جديد.

• النمط يثبت لحظة النسخ. ولا يمكن تغييره من النموذج بعد ذلك.

• التوجيه ينطبق على النماذج الأصلية فقط.

• «المصادر المسموح بها» تضيّق حركة المتصفحات. ولا تتحقق من هوية أحد.